JSON 存语言包比硬编码更可控：抽离为 locales/zh.json 等键值对文件，通过 data-i18n 属性标记元素，JS 动态替换内容；需处理 value/placeholder 等属性、动态 DOM 重译、localStorage 记忆语言并设 fallback；静态生成适合 SEO 但失灵活性。
用 JSON 文件存语言包比写死在 HTML 里更可控
硬编码多语言文本到每个 <span> 或 <p> 标签里，改一次语言就得全量替换 HTML，维护成本爆炸。推荐把每种语言的文案抽成独立 JSON 文件，比如：locales/zh.json、locales/en.json，结构统一为键值对：
{
"header_title": "欢迎来到我们的网站",
"btn_submit": "提交"
}
这样切换语言只需加载对应 JSON，再批量替换 DOM 中带 data-i18n 属性的元素内容。不依赖后端、不刷新页面，纯前端可跑。
用 data-i18n 标记需要翻译的元素最轻量
不用引入完整 i18n 库（如 i18next），几行 JS 就能驱动。给要翻译的标签加属性：<h1 data-i18n="header_title"></h1>，然后 JS 按 key 查 JSON，填进 textContent 或 innerHTML。注意几点：
- 避免在
input的value上直接用data-i18n，得额外处理setAttribute('value', ...) -
placeholder、alt、title这类属性需单独遍历处理，不能只靠textContent - 如果页面有动态插入的 DOM（比如 JS 拼的弹窗），得在插入后主动调用翻译函数，否则不会自动生效
localStorage 记住用户上次选的语言，但别跳过初始 fallback
用户选了日语，关掉浏览器再打开，应该默认显示日语——这靠 localStorage.setItem('lang', 'ja') 实现。但关键点是：首次访问时 localStorage 为空，必须有兜底逻辑：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 优先读
localStorage.lang - 其次看
navigator.language（注意 Safari 返回zh-CN，而你的文件名可能是zh.json，得做截断或映射） - 最后强制 fallback 到
en或你主语言的 JSON 文件
漏掉 fallback，遇到不支持的语言码（比如 zh-HK 但只有 zh.json），整个页面文案会空白。
静态站点生成时预编译多语言 HTML 更快，但失去运行时灵活性
如果你用 Hugo、Jekyll 或 VuePress，可以构建时生成 /zh/index.html 和 /en/index.html 两套文件。优势是首屏秒开、SEO 友好；劣势是语言切换必须整页跳转（比如从 /en/contact 跳到 /zh/contact），且所有页面路径得严格对齐。这时候 URL 结构和 <link rel="alternate" hreflang="..."> 标签就变得重要，否则搜索引擎可能当成重复内容。
真正麻烦的是混合场景：有些文案必须运行时获取（比如用户昵称、时间格式），有些必须构建时确定（比如 SEO title）。这时候得把静态部分和动态部分拆开处理，别指望一个 JSON 全包圆。
