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它根本不起作用，我只能看到列表项点。

我基本上想要实现的目标是：

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

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

非常感谢你！

Answer 1

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

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

＆＃13;

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();
        });
      });

＆＃13;

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

＆＃13;

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

＆＃13;

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();
        });
      });
  });

＆＃13;

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

＆＃13;

目录structre required：

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 - 用法，按用户更改语言，加载文件翻译

1 个答案: