使用 i18next 对静态 HTML 进行本地化（获取翻译）

Question

我正在使用 i18next 翻译静态内容。这是 code

<h1 id="homeTitle">Loading</h1>
<h1 id="homeSubTitle">Loading</h1>

<script>
function updateContent() {

  // Home
  document.getElementById("homeTitle").innerHTML = i18next.t("home.title");
  document.getElementById("homeSubTitle").innerHTML = i18next.t("home.subtitle");

}

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

async function i18Loader() {
  const langs = ["en", "ru"];
  const jsons = await Promise.all(
    langs.map((l) => fetch("src/i18/" + l + ".json").then((r) => r.json()))
  );
  const res = langs.reduce((acc, l, idx) => {
    acc[l] = { translation: jsons[idx] };
    return acc;
  }, {});
  await i18next.init({
    lng: "en",
    debug: true,
    resources: res
  });
  updateContent();
  i18next.on("languageChanged", () => {
    updateContent();
  });
  const langSelector = document.getElementById("langSelector");
  langSelector.removeAttribute("disabled");
  langSelector.addEventListener("change", (e) => {
    i18next.changeLanguage(e.target.value);
  });
}

i18Loader();
</script>

按照此方法，我必须使用 ID 来定位 HTML 中的每个字符串。我想知道是否有办法以编程方式执行此操作，而不是使用

定位每个字符串

  document.getElementById("homeTitle").innerHTML = i18next.t("home.title");
  document.getElementById("homeSubTitle").innerHTML = i18next.t("home.subtitle");
  ...

i18next 的默认文档显示了此方法，但对于整个 paraject 中有数百个字符串的情况，这不是最佳选择。

Answer 1

您可以使用某个 class 定位每个元素并读取您设置的属性以获得元素的 i18 字典键。这里有一个例子 code sandbox.

像这样：

const elements = document.getElementsByClassName("i18nelement");
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const k = element.getAttribute("data-i18n");
    element.innerHTML = i18next.t(k);
  }

使用 i18next 对静态 HTML 进行本地化（获取翻译）

Localization of static HTML with i18next (getting the translations)

javascript

html

i18next