Hero Image

如何添加文章与多语言支持(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"
---

![Hero](/assets/posts/2025-01-13-your-slug/hero.jpg)

正文内容(Markdown)。

中文示例(带 /zh/ 前缀的推荐做法):

---
title: "文章中文标题"
date: 2025-01-13
excerpt: "一句话摘要(中文)。"
lang: zh
categories: [zh]
translation_key: "2025-01-13-your-slug"
---

![头图](/assets/posts/2025-01-13-your-slug/hero.jpg)

正文内容(Markdown)。

日文示例(如需 /ja/ 前缀可添加 categories: [ja]):

---
title: "日本語のタイトル"
date: 2025-01-13
excerpt: "短い要約(日本語)。"
lang: ja
# categories: [ja]
translation_key: "2025-01-13-your-slug"
---

![ヒーロー画像](/assets/posts/2025-01-13-your-slug/hero.jpg)

本文(Markdown)。

可选:在 Front Matter 增加图片目录变量,便于复用:

images_dir: /assets/posts/2025-01-13-your-slug

引用图片:![Hero](/hero.jpg)

列表与首页导航

  • 英文文章列表页:/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,仅显示正文,并支持一键复制;代码块支持自动换行。

添加新文章的步骤

  1. 创建目录:_posts/YYYY-MM-DD-your-slug/
  2. 新建英文版:YYYY-MM-DD-your-slug.en.md(默认语言),填写 Front Matter 与正文
  3. 如需中文:复制为 YYYY-MM-DD-your-slug.zh.md,设置 lang: zhcategories: [zh],并共用同一 translation_key
  4. 如需其他语言:同理新增 .ja.md(或其他)并设置 lang
  5. 放置图片:assets/posts/YYYY-MM-DD-your-slug/,在 Markdown 顶部插入头图
  6. 提交与推送:git add . && git commit -m "add post" && git push

完成后,GitHub Pages 会自动构建,首页与列表页会出现新文章入口。