纯静态网站（html+js+css）,怎么实现中英文切换

看_雷神之锤
191 阅读2分钟

纯静态网站（html+js+css）,怎么实现中英文切换

对于普通 HTML 网站（即没有使用 React、Vue 等现代前端框架），你依然可以轻松实现中英文切换，而且不需要后端，只需借助轻量级的 JavaScript 国际化插件。

✅ 推荐插件：i18next + i18next-browser-languagedetector + i18next-http-backend

这是一个专为浏览器设计的国际化（i18n）解决方案，支持：

  • 多语言 JSON 文件管理
  • 自动检测浏览器语言
  • 手动切换语言
  • 本地存储用户偏好
  • 轻量、无框架依赖（纯 HTML/JS 可用）

🔧 实现步骤（纯 HTML + JS）

1. 创建项目结构

your-site/
├── index.html
├── js/
│   └── i18n.js
└── locales/
    ├── en/
    │   └── translation.json
    └── zh/
        └── translation.json

2. 准备语言文件

locales/en/translation.json

{
  "title": "Welcome",
  "nav.home": "Home",
  "nav.about": "About",
  "content": "This is an English page."
}

locales/zh/translation.json

{
  "title": "欢迎",
  "nav.home": "首页",
  "nav.about": "关于",
  "content": "这是一个中文页面。"
}

3. 引入 i18next（通过 CDN）

在 index.html 中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title data-i18n="title">Loading...</title>
</head>
<body>
  <nav>
    <a href="#" data-i18n="nav.home"></a> |
    <a href="#" data-i18n="nav.about"></a>
  </nav>
  <p data-i18n="content"></p>

  <!-- 语言切换按钮 -->
  <button onclick="changeLang('zh')">中文</button>
  <button onclick="changeLang('en')">English</button>

  <!-- 引入 i18next -->
  <script src="https://cdn.jsdelivr.net/npm/i18next@23.11.5/dist/umd/i18next.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/i18next-browser-languagedetector@8.0.0/dist/umd/i18nextBrowserLanguageDetector.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@2.5.2/dist/umd/i18nextHttpBackend.min.js"></script>

  <script>
    // 初始化 i18next
    i18next
      .use(i18nextHttpBackend)
      .use(i18nextBrowserLanguageDetector)
      .init({
        fallbackLng: 'en',
        debug: false,
        backend: {
          loadPath: './locales/{{lng}}/translation.json'
        }
      }, function(err, t) {
        // 翻译页面
        updateContent();
      });

    // 切换语言函数
    function changeLang(lang) {
      i18next.changeLanguage(lang, (err, t) => {
        if (!err) updateContent();
      });
    }

    // 更新所有带 data-i18n 的元素
    function updateContent() {
      document.querySelectorAll('[data-i18n]').forEach(el => {
        const key = el.getAttribute('data-i18n');
        el.textContent = i18next.t(key);
      });
      // 更新页面语言属性（利于 SEO 和无障碍）
      document.documentElement.lang = i18next.language;
    }
  </script>
</body>
</html>

✅ 优点

  • 无需框架：纯 HTML + JS 即可运行
  • 自动检测语言：首次访问时根据浏览器语言自动切换
  • 用户可手动切换
  • 内容集中管理：所有文本在 JSON 中，便于翻译和维护
  • SEO 友好：配合 <html lang="zh"> 提升可访问性

📦 插件说明

插件作用
i18next核心国际化库
i18next-browser-languagedetector自动检测用户浏览器语言
i18next-http-backend从 locales/ 目录异步加载 JSON 文件

所有插件都可通过 CDN 引入，无需安装 Node.js 或构建工具。

💡 小贴士

  • 如果你担心 JSON 文件被直接访问，可以放在非公开目录（但普通网站通常没关系）。
  • 可以用 localStorage 记住用户上次选择的语言（i18next 默认已支持）。
  • 对于静态托管（如 GitHub Pages、Vercel、Netlify），完全兼容。
avatar
文章
阅读
粉丝