博客的 lang 属性必须写在 标签上且值为合法 bcp 47 格式(如 zh-cn),中文技术博客统一用 zh-cn;嵌入英文内容需显式标注 lang="en";静态生成器须在模板中硬编码,第三方组件需通过语义化标签或属性单独处理。

博客的 lang 属性必须写在 标签上,且值必须是合法 BCP 47 格式(如 zh-CN),否则屏幕阅读器读错、Chrome 不出翻译按钮、SEO 报“未指定语言”——JS 后期修改完全无效。
博客首页和文章页的 lang 值怎么定
主语言由博客定位决定,不是由作者母语或编辑器语言决定。中文技术博客统一用 zh-CN,不是 zh、zh-Hans 或 zh_CN。
-
zh-CN是事实标准:Google Search Console、NVDA、Chrome 翻译、主流 CMS(如 Hexo、Hugo 的 i18n 插件)默认识别它;字体回退、拼写检查、:lang(zh)CSS 选择器都依赖这个值 - 避免
zh:太宽泛,iOS VoiceOver 可能跳过中文 TTS 引擎,把“长”读成 /tʃæŋ/ - 避免
zh_Hans或Chinese:非 BCP 47 格式,浏览器静默忽略,等于没写 - 若博客明确面向港澳台用户且内容全为繁体,才用
zh-TW或zh-HK;混用简繁时,按实际段落分别标注,不靠根lang“覆盖”
博客里英文术语、代码、引文怎么标语言
根 只定义主基调,不影响嵌入内容的语音引擎选择或翻译行为。一段英文 API 名称被读成“阿皮”,就是因为没显式声明语言。
- 单个外文词:
<code lang="en">useState→ 触发 IDE 英文高亮 + 屏幕阅读器用英语发音 - 整句/段英文:
<p lang="en">This is not a bug, it's a feature.</p> - 命令行示例:
<pre class="brush:php;toolbar:false;" lang="en">curl -X POST https://api.example.com</pre>(别用lang="bash",这不是语言代码) - 引用类内容优先用语义化标签:
<blockquote lang="ja">ありがとう</blockquote>比<div lang="ja"> 更可靠 <li>避免给每个单词加 <code>lang:DOM 膨胀、可访问性树构建变慢;只标有明确语义边界的片段 - Hugo:在
layouts/_default/baseof.html中写,确保config.yaml里languageCode: zh-CN - Jekyll:在
_includes/head.html里写;多语言需用jekyll-multiple-languages-plugin产出不同目录下的 HTML,各自带对应lang - Hexo:主题
layout/_partial/head.ejs中写;若启用hexo-i18n,需为每个语言生成独立public/zh/和public/en/目录 - 所有生成器都要检查最终 HTML 源码:打开页面 → 查看源码 → 确认第一行是
,而不是空值、大写或下划线 - utterances:加载后遍历其 iframe 内容(跨域受限),不可控;稳妥做法是禁用其自带多语言,用 CSS
:lang(en) .utterances单独调整样式,但语音朗读仍可能错 - giscus:支持
data-lang属性,初始化时传"zh-CN",它会在内部元素上补lang属性 - 自建评论框:在插入评论容器后,手动执行
commentContainer.querySelectorAll('p, blockquote, pre').forEach(el => el.setAttribute('lang', 'zh-CN')),但仅限同域 - 最省事也最可靠的方式:把评论区当作独立语义区域,在包裹它的
<section></section>上加lang="zh-CN",再确保其子元素不显式覆盖
静态博客生成器(Hugo/Jekyll/Hexo)中怎么硬编码
静态站没有 SSR,不能靠 JS 改 document.documentElement.lang。每种语言版本必须生成独立 HTML 文件,lang 写死在模板里。
博客评论区、第三方组件(如 utterances、giscus)的语言处理
这些组件通常动态注入 DOM,它们生成的节点不会自动继承根 lang,也不受你 JS 修改 document.documentElement.lang 影响。
真正难的不是写对一个 zh-CN,而是让每段从 Markdown 渲染出的 HTML、每个第三方脚本插入的文本节点、甚至代码高亮库生成的 <span></span>,都带着准确的 lang 被解析——这要求你在模板层、渲染层、集成层全部设防,而不是指望某次 JS patch 能兜底。











