如何为极简单页网站实现最简多语言支持（含浏览器语言自动识别与手动切换功能）

刚好碰到过类似的极简场景，给你一套超轻量的纯原生实现，完全不用任何框架，代码量极少，适配你的单页div结构：

核心思路 #

• 把所有多语言文本集中管理，避免零散修改
• 优先读取用户手动选择的语言（存在localStorage），没有的话自动检测浏览器默认语言
• 用一个简单函数替换所有div的文本内容

完整代码示例 #

HTML部分

先给每个需要切换语言的div加一个唯一的data-i18n属性，用来对应文本键：

<!-- 手动切换按钮 -->
<button onclick="switchLang('en')">English</button>
<button onclick="switchLang('zh')">中文</button>

<!-- 页面内容 -->
<div data-i18n="welcome"></div>
<div data-i18n="description"></div>
<div data-i18n="footer"></div>

JavaScript部分

放在页面末尾或者单独的script标签里：

// 1. 定义多语言文本库，按语言分类
const langTexts = {
  en: {
    welcome: "Welcome to Picstalk",
    description: "A simple single-page site for sharing photos",
    footer: "© 2024 Picstalk"
  },
  zh: {
    welcome: "欢迎来到Picstalk",
    description: "一个用于分享照片的极简单页网站",
    footer: "© 2024 Picstalk"
  }
};

// 2. 获取当前应该使用的语言
function getCurrentLang() {
  // 优先取用户手动选择的语言（存在localStorage）
  const savedLang = localStorage.getItem('selectedLang');
  if (savedLang && langTexts[savedLang]) return savedLang;
  
  // 没有的话检测浏览器语言，取前两位（比如en-US → en）
  const browserLang = navigator.language.slice(0, 2);
  return langTexts[browserLang] ? browserLang : 'en'; // 默认英文
}

// 3. 切换语言的核心函数
function switchLang(lang) {
  // 保存用户选择到localStorage
  localStorage.setItem('selectedLang', lang);
  
  // 遍历所有带data-i18n属性的元素，替换文本
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    el.textContent = langTexts[lang][key] || '';
  });
}

// 4. 页面加载时自动初始化语言
document.addEventListener('DOMContentLoaded', () => {
  switchLang(getCurrentLang());
});

为什么适合你的场景？ #

• 极简无依赖：纯原生JS+HTML，没有任何外部库，代码量不到50行
• 易维护：所有文本都集中在langTexts对象里，新增语言或修改文本直接改这里就行
• 用户友好：自动记住用户的语言选择，刷新页面不会重置
• 扩展性强：以后要加新的语言，只需要在langTexts里加对应的键值对，再添个切换按钮就搞定了

内容的提问来源于stack exchange，提问作者Tatyana Sirotkin