使用i18next对静态HTML进行本地化(加载本地json翻译文件)

Question

我的项目仅为HTML。我不会使用node或react版本。

我试过默认的例子，工作良好

<div id="output" />
<script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
<script>
i18next.init({
lng: 'en',
debug: true,
resources: {
en: {
translation: {
"key": "Hello World"
}
},
de: {
translation: {
"key": "hello welt"
}
}
}
}, function(err, t) {
// init set content
updateContent();
});
function updateContent() {
document.getElementById('output').innerHTML = i18next.t('key');
}
function changeLng(lng) {
i18next.changeLanguage(lng);
}
i18next.on('languageChanged', () => {
updateContent();
});
</script>

但我不知道如何加载本地json文件，而不是将所有翻译放在js中。我必须安装一个额外的插件来加载json翻译文件吗？

这是针对HTML中每个字符串的正确方法吗？

function updateContent() {
document.getElementById("homeTitle").innerHTML = i18next.t("home.title");
document.getElementById("homeSubtitle").innerHTML = i18next.t("home.subtitle");
}

有没有一种方法可以像一样为HTML字符串添加属性

<h1 data-i18n="home.title"></h1>

得到翻译？

Answer 1

您可以用fetch加载它们，运行一堆promise。我用vanillaJS为您编写了一个沙箱代码示例。

PS:不知道为什么，但当你打开代码沙盒时，代码执行不好，你必须刷新本地预览才能让它工作(或者你可以尝试从这里打开预览(，但我在我的开发环境中通过Live Server测试了它，它工作得很好