使用 Jekyll 为您的 GitHub Pages 站点添加主题

拥有仓库写入权限的用户可以使用 Jekyll 为 GitHub Pages 站点添加主题。

如果您从分支发布，当更改合并到站点的发布源时，站点的更改会自动发布。若您使用自定义 GitHub Actions 工作流发布，只要工作流被触发（通常是对默认分支的推送），更改就会发布。若您想先预览更改，可以在本地而非 GitHub 上进行更改，然后在本地测试站点。欲了解更多信息，请参阅 在本地使用 Jekyll 测试您的 GitHub Pages 站点。

受支持的主题

开箱即用，以下主题受支持

• Architect
• Cayman
• Dinky
• Hacker
• Leap day
• Merlot
• Midnight
• Minima
• Minimal
• Modernist
• Slate
• Tactile
• Time machine

jekyll-remote-theme Jekyll 插件也可用，且可让您加载其他主题。

添加主题

1. 在 GitHub 上，前往您站点的仓库。

2. 为您的站点导航到发布源。欲了解更多信息，请参阅 配置 GitHub Pages 站点的发布源。

3. 转到 _config.yml。

4. 在文件视图的右上角，点击以打开文件编辑器。

   

   注意

   您可以选择不使用默认文件编辑器编辑并提交文件，而是通过选择下拉菜单并点击 github.dev 来使用 github.dev 代码编辑器。您也可以通过点击 GitHub Desktop 克隆仓库并使用 GitHub Desktop 在本地编辑文件。

   

5. 在文件中添加一行来指定主题名称。

   • 要使用受支持的主题，请键入 theme: THEME-NAME，将 THEME-NAME 替换为主题仓库的 _config.yml 中显示的主题名称（大多数主题遵循 jekyll-theme-NAME 命名约定）。受支持主题列表，请参阅 GitHub Pages 站点上的 受支持的主题。例如，要选择 Minimal 主题，请键入 theme: jekyll-theme-minimal。
   • 要使用托管在 GitHub 上的其他 Jekyll 主题，请键入 remote_theme: THEME-NAME，将 THEME-NAME 替换为主题仓库的 README 中显示的主题名称。

6. 点击 提交更改...

7. 在“Commit message”字段中，键入简短且有意义的提交信息，描述您对文件所做的更改。您可以在提交信息中将该提交归因于多个作者。欲了解更多信息，请参阅 创建拥有多位作者的提交。

8. 如果您的 GitHub 账户关联了多个电子邮件地址，请点击电子邮件地址下拉菜单并选择要用作 Git 作者电子邮件地址的邮箱。仅已验证的电子邮件地址会出现在此下拉菜单中。如果您启用了电子邮件地址隐私，则默认的提交作者电子邮件地址将是 “no‑reply”。有关 no‑reply 邮箱的具体形式，请参阅 设置提交电子邮件地址。

   

9. 在提交信息字段下方，决定是将提交添加到当前分支还是新分支。如果您当前的分支是默认分支，建议为提交创建一个新分支，然后发起拉取请求。欲了解更多信息，请参阅 创建拉取请求。

   

10. 点击 提交更改 或 提议更改。

自定义主题的 CSS

这些说明最适用于 GitHub Pages 官方支持的主题。完整的受支持主题列表，请参阅 GitHub Pages 站点上的 受支持的主题。

主题的源仓库可能会提供自定义主题的帮助。例如，请参阅 Minimal 的 README。

1. 在 GitHub 上，前往您站点的仓库。

2. 为您的站点导航到发布源。欲了解更多信息，请参阅 配置 GitHub Pages 站点的发布源。

3. 创建一个新文件，名为 /assets/css/style.scss。

4. 在文件顶部添加以下内容

   ---
   ---
   
   @import "{{ site.theme }}";
   

5. 在 @import 行后立即添加您想要的任何自定义 CSS 或 Sass（包括导入）。

自定义主题的 HTML 布局

这些说明最适用于 GitHub Pages 官方支持的主题。完整的受支持主题列表，请参阅 GitHub Pages 站点上的 受支持的主题。

主题的源仓库可能会提供自定义主题的帮助。例如，请参阅 Minimal 的 README。

1. 在 GitHub 上，导航到您的主题源仓库。例如，Minimal 的源仓库是 https://github.com/pages-themes/minimal。
2. 在 _layouts 文件夹中，导航至主题的 _default.html 文件。
3. 复制该文件的内容。
4. 在 GitHub 上，前往您站点的仓库。
5. 为您的站点导航到发布源。欲了解更多信息，请参阅 配置 GitHub Pages 站点的发布源。
6. 创建一个名为 _layouts/default.html 的文件。
7. 粘贴您之前复制的默认布局内容。
8. 根据需要自定义布局。

延伸阅读

• 创建新文件