博客多语言适配记录

记录 Hexo 多语言适配的设计思路:文件名约定识别语言、filter 偷换 slug 实现路径前缀路由、手写 permalink 处理 Page、generator 按语言隔离聚合页,以及 hreflang、语言切换器、翻译质量标记等前端串联。

站点运营以来,在归档页中可以发现中文和英文混在一起。为Hexo适配多语言并不容易,因此适配计划被我无限延期。

最近初步实现了多语言支持,最直接的契机是 AnyRouter 的 Opus 模型又能用了。

但更重要的是兴趣使然。前些日子本该专心写毕设论文,却总忍不住分心去折腾博客,睡前脑子仍在琢磨,乐此不疲。博客打磨后的UI/UX让我很有成就感。

此外,还有锻炼表达能力的目的。回头看以前写的文章,经常会出现一些问题:

  • 时不时夹杂外文词句(例如本文标题中的“多语言”,起初用词是i18n,即internationalization)
  • 带有明显的“欧化中文”痕迹[1]

个人长期接触英文内容,久而久之,表达时会下意识模仿英语的表达方式,而这种生硬的表达无疑有碍理解。 为博客支持多语言,某种意义上也是逼自己克服表达上的懒惰。

另外一个功利的目的:多语言会扩大博客受众群体。虽然去论坛发帖来增加曝光更为直接,但我更喜欢博客中相对私密的交流。

源文件组织与路由

文件组织:文件名约定

Hexo 官方更推荐“目录约定”,但我最终选择把所有 .md 平铺在 _posts/ 下,通过 __<lang> 后缀区分语言;这样原文与译文相邻,查找和编辑更方便。配合 VS Code 的 File Nesting,可以将 foo__en.md 折叠到 foo.md 下方进一步优化目录观感。

方法是在 settings.json 中加入:

"explorer.fileNesting.patterns": {  "*.md": "$(capture)__en.md"}

路由设计:路径前缀

采用 /en/foo/ 路径前缀方案,对 SEO 和缓存更友好。映射关系:

角色输入文件名输出 URL
默认语言 postfoo.md/foo/
翻译版 postfoo__en.md/en/foo/
默认语言 pageabout.md/about/
翻译版 pageabout__en.md/en/about/

对于 Post,利用 permalink: :i18n_path:name 模板,注册一个低优先级的 post_permalink filter 注入 i18n_path(默认语言 "",英文 "en/",可从文件名推断得出)并改写 slug(去掉文件名中的 __en 后缀)

Page 数量很少,直接在 front-matter 中声明 permalink 即可,例如 permalink: /en/links/

Archive、Tag 与搜索隔离

  • Tag / Archive:为每种语言单独运行一次 generator,只传入对应语言的 posts,生成两套完全独立的标签和归档页。
  • 搜索:构建时分别输出 /content.json/en/content.json,各语言页面加载自己的索引,结果天然不会串语言。

此外还有sitemap.xmlatom.xml等资源,它们未做语言隔离。

SEO

为方便搜索引擎正确识别原文与译文的关系,需要在 front-matter 中声明 i18n 映射。形如:

langya_terrace.md
---title: 琅邪台游记date: 2026-03-13excerpt: 孤立特显,出于众山上,下周二十余里,傍滨巨海tags:  - Essay  - 青岛i18n:  en: /en/langya_terraceupdated: 2026-05-23 00:30:39---原文内容...
langya_terrace__en.md
---title: Langya Terrace Travel Notesdate: 2026-03-13excerpt: Standing alone and prominent above all other hills, with a circumference of over twenty li at its base, overlooking the great seatags:  - Essay  - 青岛lang: eni18n:  cn: /langya_terrace  translation: 2updated: 2026-05-23 00:30:59---译文内容...

主题会根据 i18n 字段自动生成 <link rel="alternate" hreflang> 标签,指向对应语言版本的 URL,示例如下:

<link rel="canonical" href="https://vluv.space/langya_terrace/" /><link  rel="alternate"  hreflang="zh-CN"  href="https://vluv.space/langya_terrace/"/><link  rel="alternate"  hreflang="en"  href="https://vluv.space/en/langya_terrace/"/><link  rel="alternate"  hreflang="x-default"  href="https://vluv.space/langya_terrace/"/>

同时 <html lang> 和 og:locale 也会随页面语言自动切换。

交互设计

  • 导航栏语言切换:Archive/Tag/Links/About等页面直接跳转。文章同理,但考虑部分文章未提供翻译,此时点击切换语言需要toast 提示;
  • 翻译方式标记:文章详情页根据 i18n.translation 展示翻译状态:默认原文,1表示“使用LLM 翻译且已人工审阅”,2表示为“采用 LLM 翻译但未审阅”。

交互设计
交互设计

  1. 欧化中文是现代汉语在印欧语言(尤指英语)影响下出现的语法现象,主要表现为偏离中文传统表达习惯的句式结构,常见于直译文本与书面语。其特点包括句子结构繁复、被动式滥用、“的”“地”等结构助词过度使用,以及“通过”“作为”等介词套用,常将简单动词分解为“弱动词+抽象名词”的复合结构(如“作出贡献”替代“贡献很大”)。

    该现象源于新文化运动时期,鲁迅、钱玄同等文人主张通过直译欧式语法改造中文思维方式。鲁迅明确提出“直译欧文句法”以革新汉语 。翻译家思果在《翻译研究》中批评此类译文“虽然勉强可以懂,但绝对不是中文”,指出欧化中文违背了汉语本质特征。

    20世纪80年代,余光中在《怎样改进英式中文?》中进一步剖析中文表达的“繁琐与生硬”趋势,批评冗余介词(如“由于”“关于”)、不当连接词(如“及”)及形容词过度依附“的”字等西化特征,强调维护中文表达常态的必要性。 ↩︎

CompactRelaxed
Normal1.70