使用 i18next 对静态 HTML 进行本地化(获取翻译)
Localization of static HTML with i18next (getting the translations)
我正在使用 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 中有数百个字符串的情况,这不是最佳选择。
您可以使用某个 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 翻译静态内容。 这是 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 中有数百个字符串的情况,这不是最佳选择。
您可以使用某个 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);
}