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

Question

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

我修改了sample.html，我在其中添加了另外两种语言资源（德语、法语），当我更改脚本中的"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, $, {...

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

我基本上想要实现的是：

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

我不知道该怎么做，因此非常感谢您的帮助！

非常感谢您！

Answer 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>

要从服务器上的文件加载，您需要为 i18next 使用 i18next-xhr-backend。该示例无法在此处加载翻译，但如果您在服务器上设置如下所示的目录结构，那么它应该能够根据需要加载翻译。您还可以为 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"
    }
}

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

jquery-i18next - usage, change language by user, load translation from files

jquery

i18next