jquery-i18next - 用法,按用户更改语言,从文件加载翻译

Question

我正在寻找一个国际化框架,并遇到了jqueryi-18next.js.我实际上完全对使用此插件感到困惑,因为示例文件中的代码与文档不同.

我修改了sample.html,我添加了两个语言资源(de,fr),当我更改脚本中的"lng"值时,它工作正常.

i18next.init({
        lng: 'de',
        resources: {
          en: {
            translation: {
              nav: {
                page1: 'Page One',
                page2: 'Page Two',
                page3: 'Page Three'
              }
            }
          },
          de: {
            translation: {
              nav: {
                page1: 'Seite Eins',
                page2: 'Seite Zwei',
                page3: 'Seite Drei'
              }
            }
          },
          fr: {
            translation: {
              nav: {
                page1: 'Page Un',
                page2: 'Page Deux',
                page3: 'Page Trois'
              }
            }
          }
        }
      }, function(err, t) {
        i18nextJquery.init(i18next, $);
        $('.nav').localize();
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/0.0.14/i18next-jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/2.0.22/i18next.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<ul class="nav">
  <li><a href="#" data-i18n="nav.page1"></a></li>
  <li><a href="#" data-i18n="nav.page2"></a></li>
  <li><a href="#" data-i18n="nav.page3"></a></li>
</ul>

根据文档,插件初始化使用:

jqueryI18next.init(i18nextInstance, $, {...

此外,如果我从存储库加载jquery-i18next.min.js 它根本不起作用,我只能看到列表项点.

我基本上想要实现的是:

1. 使用锚链接(en/de/fr)更改语言而不重新加载整个页面.
2. 从文件加载翻译.我根据带有子文件夹(en/de/fr)的语言环境中的文档保存了三个translation.json文件,但没有任何成功,只有列表项目点可见!:(

我不知道该怎么做,所以我真的很感激任何帮助!

非常感谢你提前!

Answer 1

我想我可以回答你问题的两个部分.

1. 您可以添加一些锚链接,使其很容易控制语言.要更改语言,只需调用i18next.chngeLanguage以设置新语言,然后调用$(elem).localize()最初本地化的每个元素.在此示例中,如果.lang-select单击任何链接,则会更新语言.

i18next.init({
        lng: 'de',
        resources: {
          en: {
            translation: {
              nav: {
                page1: 'Page One',
                page2: 'Page Two',
                page3: 'Page Three'
              }
            }
          },
          de: {
            translation: {
              nav: {
                page1: 'Seite Eins',
                page2: 'Seite Zwei',
                page3: 'Seite Drei'
              }
            }
          },
          fr: {
            translation: {
              nav: {
                page1: 'Page Un',
                page2: 'Page Deux',
                page3: 'Page Trois'
              }
            }
          }
        }
      }, function(err, t) {
        i18nextJquery.init(i18next, $);
        $('.nav').localize();

        $('.lang-select').click(function() {
          i18next.changeLanguage(this.innerHTML);
          $('.nav').localize();
        });
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/0.0.14/i18next-jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/2.0.22/i18next.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<a href="#" class="lang-select">en</a>
<a href="#" class="lang-select">de</a>
<a href="#" class="lang-select">fr</a>
<ul class="nav">
  <li><a href="#" data-i18n="nav.page1"></a></li>
  <li><a href="#" data-i18n="nav.page2"></a></li>
  <li><a href="#" data-i18n="nav.page3"></a></li>
</ul>

2. 要从服务器上的文件加载,您需要使用i18next-xhr-backend for i18next.此测试将无法在此处加载翻译,但如果您在服务器上设置下面显示的目录结构,那么它应该能够根据需要加载翻译.您还可以提供其他值loadPath来控制文件的存储方式.要将每种语言的所有命名空间存储在单个文件中,请使用loadPath: '/locales/{{lng}}.json'或将所有语言存储在单个文件中loadPath: '/locales.json'.

i18next
  .use(i18nextXHRBackend)
  .init({
      lng: 'de',
      backend: {
          loadPath: '/locales/{{lng}}/{{ns}}.json'
      }
    }, function(err, t) {
      jqueryI18next.init(i18next, $);
      $('.nav').localize();

      $('.lang-select').click(function() {
        i18next.changeLanguage(this.innerHTML, function() {
           $('.nav').localize();
        });
      });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/0.0.14/i18next-jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/2.0.22/i18next.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<a href="#" class="lang-select">en</a>
<a href="#" class="lang-select">de</a>
<a href="#" class="lang-select">fr</a>
<ul class="nav">
  <li><a href="#" data-i18n="nav.page1"></a></li>
  <li><a href="#" data-i18n="nav.page2"></a></li>
  <li><a href="#" data-i18n="nav.page3"></a></li>
</ul>

目录结构需要:

locales
??? de
?   ??? translation.json
??? dev
?   ??? translation.json
??? en
?   ??? translation.json
??? fr
    ??? translation.json

示例translation.json:

{
    "nav": {
        "page1": "Seite Eins",
        "page2": "Seite Zwei",
        "page3": "Seite Drei"
    }
}