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, $, {...

此外，如果我从repository 加载 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>

1. 要从服务器上的文件加载，您需要为 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

示例翻译.json：

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