Js 原生项目多语言

1. 通过 JSON 文件加载语言数据

这是最常见的方法之一，你可以创建多个 JSON 文件来存储不同语言的文本内容，并使用 JavaScript 根据用户选择动态加载相应的语言文件。

步骤：

• 创建语言 JSON 文件
  为每种语言创建一个 JSON 文件。例如，en.json 和 zh.json：

  en.json:

  {
    "title": "Welcome to our website!",
    "description": "This is the English version of the site."
  }

  zh.json:

  {
    "title": "欢迎来到我们的网站！",
    "description": "这是网站的中文版。"
  }

• 在 HTML 中定义元素
  给页面上需要多语言替换的地方加上 data-attribute 标识：

  <h1 data-i18n="title"></h1>
  <p data-i18n="description"></p>

• 使用 JavaScript 加载语言文件
  根据用户选择的语言，加载对应的 JSON 文件并替换 HTML 内容：

  function loadLanguage(lang) {
    fetch(`${lang}.json`)
      .then(response => response.json())
      .then(data => {
        document.querySelectorAll('[data-i18n]').forEach(el => {
          const key = el.getAttribute('data-i18n');
          el.textContent = data[key];
        });
      });
  }
  
  // 假设用户选择了中文
  loadLanguage('zh');  // 加载中文语言文件

• 语言切换功能
  你可以添加一个语言切换器，让用户选择语言：

  <select onchange="loadLanguage(this.value)">
    <option value="en">English</option>
    <option value="zh">中文</option>
  </select>

2. 使用 navigator.language 自动检测用户语言

你可以通过 navigator.language 或 navigator.userLanguage 自动检测用户浏览器的语言，并根据检测到的语言加载对应的 JSON 文件：

const userLang = navigator.language || navigator.userLanguage; 
const lang = userLang.includes('zh') ? 'zh' : 'en';  // 默认英文

loadLanguage(lang);

3. URL 参数或 LocalStorage 存储用户的语言选择

你可以通过 URL 参数或者 LocalStorage 来保存用户的语言偏好，这样每次用户访问时，可以自动加载他们的语言偏好。

• URL 参数： 假设用户访问 URL: https://yourwebsite.com?lang=zh

  const urlParams = new URLSearchParams(window.location.search);
  const lang = urlParams.get('lang') || 'en';  // 默认英文
  loadLanguage(lang);

• LocalStorage： 用户选择语言后将其保存到 LocalStorage：

  function loadLanguage(lang) {
    localStorage.setItem('language', lang);  // 保存用户的语言选择
    fetch(`${lang}.json`)
      .then(response => response.json())
      .then(data => {
        document.querySelectorAll('[data-i18n]').forEach(el => {
          const key = el.getAttribute('data-i18n');
          el.textContent = data[key];
        });
      });
  }
  
  // 加载时从 LocalStorage 获取用户的语言偏好
  const savedLang = localStorage.getItem('language') || 'en';
  loadLanguage(savedLang);

4. 服务器端渲染的静态 HTML 模板

如果你的网站不是单页应用，还可以通过服务器端根据用户的语言选择或 Accept-Language 头渲染不同语言的 HTML 页面。这种方式适合 SEO 需求较高的项目。

总结：

• 如果是一个静态页面，建议使用 JSON 文件结合 JavaScript 动态加载和替换页面文本。
• 通过 LocalStorage 或 URL 参数保存用户的语言偏好可以提高用户体验。
• 使用 navigator.language 自动检测用户语言来提供默认语言是常见的优化方式。

这些方法可以帮助你在前端原生 HTML 和 JavaScript 项目中实现灵活的多语言支持。