🙏废话不多说系列,直接开整🙏
一、说明和注意事项
(1)说明和思路
- 使用 i18next.init 初始化国际化配置,指定默认语言和资源(翻译文本),包括多个文本内容。
- 定义 updateContent 函数,用于更新多个文本内容,调用 i18next.t 方法获取翻译文本并更新相应的 HTML 元素。
- 为每个按钮添加事件监听器,当用户点击按钮时,调用 i18next.changeLanguage 方法切换语言,并调用 updateContent 函数更新页面内容。
(2)扩展内容
- 多文本内容 :你可以在 resources 对象中添加更多的键值对,以支持更多的文本内容。
- 动态内容 :如果你的网页内容是动态生成的,可以在生成内容时使用 i18next.t 进行翻译。
- 复杂结构:对于更复杂的网页结构,可以将每个部分的文本提取到不同的对象中,以便于管理和维护。
(3)注意事项
- 确保在国际化过程中考虑到文化差异,例如日期格式、数字格式等。
- 如果需要支持更多语言,可以根据需要扩展
resources
****对象。 i18next
****还支持插件,可以实现更多功能,比如语言检测、后端加载等。
二、完整代码演示
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>国际化示例</title>
<script src="https://unpkg.com/i18next@21.6.3/i18next.min.js"></script>
</head>
<body>
<h1 id="title"></h1>
<p id="description"></p>
<button id="change-lang-en">切换到英文</button>
<button id="change-lang-zh">切换到中文</button>
<script>
// 初始化 i18next
i18next.init({
lng: 'zh', // 默认语言
resources: {
en: {
translation: {
"title": "Welcome to Our Website",
"description": "This is a sample description in English."
}
},
zh: {
translation: {
"title": "欢迎来到我们的网站",
"description": "这是一个中文的示例描述。"
}
}
}
}, function(err, t) {
// 更新页面内容
updateContent();
});
// 更新页面内容的函数
function updateContent() {
document.getElementById('title').innerHTML = i18next.t('title');
document.getElementById('description').innerHTML = i18next.t('description');
}
// 切换语言的事件处理
document.getElementById('change-lang-en').addEventListener('click', function() {
i18next.changeLanguage('en', function(err, t) {
updateContent();
});
});
document.getElementById('change-lang-zh').addEventListener('click', function() {
i18next.changeLanguage('zh', function(err, t) {
updateContent();
});
});
</script>
</body>
</html>
测试结果:
🙏至此,非常感谢阅读🙏