静态网页如何国际化

亚洲小炫风2025-12-30 10:25

test.html

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>i18next Static</title>
</head>
<body>

<!-- 静态 DOM -->
<h1 data-i18n="title"></h1>
<p data-i18n="desc"></p>
<button data-i18n="submit"></button>

<!-- JS 动态 -->
<p id="hello"></p>

<!-- i18next（CDN） -->
<script src="https://cdn.jsdelivr.net/npm/i18next@23.6.0/dist/umd/i18next.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@2.5.0/i18nextHttpBackend.min.js"></script>

<script>
    i18next
        .use(i18nextHttpBackend)
        .init({
            fallbackLng: 'zh-CN',
            backend: {
                loadPath: './i18n/{{lng}}.json'
            }
        }, () => {
            // 静态 DOM 替换
            document.querySelectorAll('[data-i18n]').forEach(el => {
                el.textContent = i18next.t(el.dataset.i18n);
            });

            // JS 中动态获取
            document.getElementById('hello').textContent =
                i18next.t('hello', { name: 'xxf' });
        });
</script>

</body>
</html>

配置在同路径下面增加i18n文件夹,创建一个zh-CN的json文件

html 复制代码

{
  "title": "欢迎使用",
  "desc": "WebStorm + i18next 静态页面示例",
  "submit": "提交",
  "hello": "你好，{{name}}"
}

之后用webstorm的浏览器打开test.html

运行效果图如下