HTML国际化怎么解耦？模块化维护核心逻辑-html教程-PHP中文网

data-i18n + 外部 json 是解耦的物理边界：用 data-i18n 属性标记需翻译节点，翻译值存于外部 zh.json/en.json 中，键为纯字符串且层级≤2，切换语言仅更新文本、保留状态，并通过服务端 accept-language 注入 lang 属性确保 ssr/csr 一致。

html国际化怎么解耦？模块化维护核心逻辑

data-i18n + 外部 JSON 是解耦的物理边界

把翻译文本塞进 JS 字符串或 HTML 注释里，等于把语言配置和逻辑代码焊死在一起。真正解耦的第一步，是让翻译内容完全脱离 HTML 和 JS 的执行路径——data-i18n 属性就是这个锚点。

它不参与渲染、不触发样式、不绑定事件，只做一件事：标记“这里需要翻译”。对应的语言值全放在外部 zh.json、en.json 里，按键查表即可。构建时甚至可以交给 CI 自动校验键是否缺失，而不用打开 HTML 文件一行行对。

data-i18n 值必须是纯字符串键（如 "header.welcome"），禁止拼接变量或表达式，否则无法静态分析
JSON 文件禁止嵌套过深，层级建议 ≤2 层（{"form": {"submit": "提交"}} 可，{"pages": {"home": {"sections": {"hero": {...}}}}} 不可）
键名中避免用空格、中文、特殊符号；推荐用英文点号分隔，既符合 JS 路径习惯，也方便后续转成 TS 类型定义

切换语言时只刷新 DOM 文本，不重载、不重建

语言切换不是 reload 页面，也不是清空再 render 整个 document.body。核心动作就一个：遍历所有带 data-i18n 的节点，查新语言包，更新 textContent 或安全地设置 innerHTML。

这么做能保住所有已绑定的事件监听器、表单输入值、滚动位置，以及第三方组件（比如 flatpickr 或 Chart.js 实例）的状态。

优先用 el.textContent = value，只有当翻译值含 HTML 标签（如 "请@#@#@#@#@#@#@#@#@#@0继续"）时，才用 el.innerHTML = value，且必须提前做过滤或白名单处理
切语言后，必须同步更新 document.documentElement.lang，否则屏幕阅读器、CSS :lang() 选择器、Intl 实例都会不同步
时间/数字/货币字段需单独调用 Intl.DateTimeFormat 或 Intl.NumberFormat 重建实例，旧对象不会自动响应语言变更

服务端注入 lang 属性才是 SSR 和 CSR 一致的起点

只靠 navigator.language 判断用户语言，在 SSR 场景下必然错乱——服务端根本没这个 API。浏览器隐私模式、手动改过语言设置、甚至某些安卓 WebView 都会让这个值不可信。

Claude风格HTML汇报文件

生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid

下载

正确做法是：服务端从 Accept-Language 请求头解析出首选语言，直接写进 HTML 的，前端初始化时优先读它，fallback 才用 navigator.language。