用 translate.js 是最快落地的自动翻译方案，两行代码即可实现基于 Edge 服务的实时多语言渲染，支持 100+ 语言且 SEO 友好；手写方案仅适用于极小静态页面，需自行处理语言状态持久化及 alt、日期等连带问题。
直接用 translate.js 是最快落地的方案，两行代码就能跑起来，不用改 HTML 结构、不写翻译字典、也不配 API Key。其他手写方案只适合极小页面或有强定制需求的场景。
用 translate.js 实现自动翻译切换
它不是“手动切换中英文”，而是实时调用 Edge 翻译服务，自动识别并渲染整页文本，支持 100+ 语言，且对 SEO 友好（服务端不参与，纯客户端执行）。
- 在
</html>前插入脚本：<script src="https://cdn.staticfile.net/translate.js/3.18.66/translate.js"></script> - 紧接着加初始化代码：
translate.language.setLocal('chinese_simplified'); translate.execute(); - 默认会在右上角生成下拉控件；如需换位置或隐藏，用
translate.ui.hide()+ 自定义按钮触发translate.ui.show() - 若页面用 Vue/React 动态更新 DOM，必须启用监听：
translate.listener.start()，否则新增元素不被翻译
手写双语切换（仅适用静态小页面）
适合只有几处文案、不依赖框架、也不需要 SEO 的内部页面。核心是用 data-lang-key 标记元素，靠 JS 查表替换内容。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 准备翻译对象：
const langMap = { en: { title: 'Home', btn: 'Submit' }, zh: { title: '首页', btn: '提交' } }; - 给元素加属性：
<h1 data-lang-key="title"></h1>、<button data-lang-key="btn"></button> - 切换函数里遍历所有
[data-lang-key]元素，用langMap[lang][key]更新textContent或innerHTML - 别直接改
id或class——它们可能被 CSS 或 JS 逻辑依赖，只动内容层
常见踩坑点：localStorage + 刷新丢失语言状态
用户选了日语，刷新后变回中文，是因为没持久化选择。这不是 translate.js 的问题，而是所有手写方案都得自己处理。
立即学习“前端免费学习笔记（深入）”；
- 切换时存到
localStorage.setItem('preferred-lang', 'ja') - 页面加载时读取：
const saved = localStorage.getItem('preferred-lang');，再传给translate.language.setDefaultTo(saved)或手写方案的初始化函数 - 注意浏览器隐私模式下
localStorage可能被禁用，要加 try/catch -
translate.js默认会读取navigator.language，但不会自动 fallback 到 localStorage，必须显式调用
真正麻烦的从来不是“怎么切”，而是“切完之后图片 alt、日期格式、数字分隔符、RTL 布局、SEO meta 标签”这些连带问题——它们在 translate.js 里默认不处理，手写方案也得一条条补。先跑通主文案，再逐个填坑更实际。
