html - 我需要 i18next-xhr-backend 才能在分离的 json 文件中使用翻译吗？

Question

我在纯 html 网站中使用 i18next。

这是错误信息:

i18next::translator: missingKey en translation title title

代码如下:

 ///multilng.js
(function () {


i18next
.init({
    "debug": true,
    "lng": "en",
    "ns": [
      "translation"
    ],
    "fallbackLng": false,
    "keySeparator": false,
    "nsSeparator": false,
    resources: {
      "backend": {
        "loadPath": "../locales/{{lng}}/{{ns}}.json"
      }
    }
  }, function(err, t) {
   console.log(err);
 });

  function changeLng(lng) {
    i18next.changeLanguage(lng);
  }

  i18next.on('languageChanged', () => {
    updateContent();
  });

  updateContent();
})();

function updateContent() {
  var title = i18next.t("title");
  $("#logo.dark-logo").html(title);
}

这是项目结构:

以下是我如何引用 js 文件:

<script type='text/javascript' src='js/vendor/jquery-1.12.4.min.js'></script>
<script type='text/javascript' src="js/vendor/i18next.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.1.0/jquery-i18next.min.js"></script>
<script type='text/javascript' src='js/i18nextXhr.js'></script>
<script type='text/javascript' src='js/main.js'></script>
<script type='text/javascript' src='js/multilng.js'></script>

这是 translation.json 的内容:

{
    "title":"My Studio",
    "slogan":"Your expert."
}

Answer 1

如果你喜欢通过 xhr 加载它们 - 是的。还有其他选项，例如捆绑它们或自定义后端，列表是无止境的:https://www.i18next.com/overview/plugins-and-utils

或创建自己的实现:https://www.i18next.com/misc/creating-own-plugins

我在您的选项中发现的一个错误配置是后端选项嵌套在资源中......那些应该在顶层，如果您想加载它们，请不要在 init 上添加资源。