如何添加文章与多语言支持(GitHub Pages 兼容)
本文档说明:如何新增一篇文章、如何为同一篇文章添加多语言版本、以及配图的放置与引用方式。方案兼容 GitHub Pages 默认构建(无需额外插件)。
目录结构与命名
- 每篇文章一个子目录,所有语言版本放在同一子目录中:
_posts/
YYYY-MM-DD-your-slug/
YYYY-MM-DD-your-slug.en.md # 英文(默认语言,无 URL 前缀)
YYYY-MM-DD-your-slug.zh.md # 中文(可带 /zh/ 前缀)
YYYY-MM-DD-your-slug.ja.md # 其他语言(可选)
- 文章配图放在公开静态目录(不要放在下划线目录下):
assets/posts/YYYY-MM-DD-your-slug/
hero.jpg
step-1.png
Front Matter 约定
- 多语言版本通过相同的
translation_key互相关联。 - 英文(默认语言)不设置
categories;中文设置categories: [zh]以启用/zh/前缀(若启用了带:categories的 permalink)。
英文示例(默认语言):
---
title: "Post title in English"
date: 2025-01-13
excerpt: "Short excerpt in English."
lang: en
translation_key: "2025-01-13-your-slug"
---

正文内容(Markdown)。
中文示例(带 /zh/ 前缀的推荐做法):
---
title: "文章中文标题"
date: 2025-01-13
excerpt: "一句话摘要(中文)。"
lang: zh
categories: [zh]
translation_key: "2025-01-13-your-slug"
---

正文内容(Markdown)。
日文示例(如需 /ja/ 前缀可添加 categories: [ja]):
---
title: "日本語のタイトル"
date: 2025-01-13
excerpt: "短い要約(日本語)。"
lang: ja
# categories: [ja]
translation_key: "2025-01-13-your-slug"
---

本文(Markdown)。
可选:在 Front Matter 增加图片目录变量,便于复用:
images_dir: /assets/posts/2025-01-13-your-slug
引用图片:
列表与首页导航
- 英文文章列表页:
/articles/ - 中文文章列表页:
/articles/zh/ - 首页提供跳转按钮到以上列表。
若希望中文详情页 URL 也带语言前缀,可在 _config.yml 将 permalink 切换为:
permalink: /:categories/:year/:month/:day/:title/
- 英文文章保持无
categories,URL 无前缀 - 中文文章使用
categories: [zh],URL 将包含/zh/
文章详情页增强(已内置)
- 语言切换:依据
translation_key自动聚合同组文章,展示语言切换链接。 - 查看原始 Markdown:详情页可点击“View Markdown/Copy”,会从仓库 Raw 拉取当前
.md,自动去除 Front Matter,仅显示正文,并支持一键复制;代码块支持自动换行。
添加新文章的步骤
- 创建目录:
_posts/YYYY-MM-DD-your-slug/ - 新建英文版:
YYYY-MM-DD-your-slug.en.md(默认语言),填写 Front Matter 与正文 - 如需中文:复制为
YYYY-MM-DD-your-slug.zh.md,设置lang: zh、categories: [zh],并共用同一translation_key - 如需其他语言:同理新增
.ja.md(或其他)并设置lang - 放置图片:
assets/posts/YYYY-MM-DD-your-slug/,在 Markdown 顶部插入头图 - 提交与推送:
git add . && git commit -m "add post" && git push
完成后,GitHub Pages 会自动构建,首页与列表页会出现新文章入口。