跳至主要内容

使用 Jekyll 向 GitHub Pages 网站添加主题

您可以通过添加和自定义主题来个性化您的 Jekyll 网站。

谁可以使用此功能?

GitHub Pages 可用于使用 GitHub Free 和 GitHub Free for organizations 的公共仓库,以及使用 GitHub Pro、GitHub Team、GitHub Enterprise Cloud 和 GitHub Enterprise Server 的公共和私有仓库。有关更多信息,请参阅“GitHub 的计划”。

从 2024 年 6 月 30 日起,所有 GitHub Pages 构建都将使用 GitHub Actions。无需进行其他更改,但必须在您的仓库中启用 GitHub Actions 才能继续构建。有关启用 GitHub Actions 的更多信息,请参阅“管理仓库的 GitHub Actions 设置”。

拥有仓库写入权限的人员可以使用 Jekyll 向 GitHub Pages 网站添加主题。

如果您从分支发布,则更改将自动发布到您的网站的发布源中。如果您从自定义 GitHub Actions 工作流发布,则更改将在您的工作流触发时发布(通常由对默认分支的推送触发)。如果您想先预览更改,可以在本地进行更改,而不是在 GitHub 上进行更改。然后,在本地测试您的网站。有关更多信息,请参阅“使用 Jekyll 在本地测试您的 GitHub Pages 网站”。

添加主题

  1. 在 GitHub 上,导航到您的网站仓库。

  2. 导航到您的网站的发布源。有关更多信息,请参阅“配置 GitHub Pages 网站的发布源”。

  3. 导航到 _config.yml

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

    Screenshot of a file. In the header, a button, labeled with a pencil icon, is outlined in dark orange.

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

    Screenshot of a file. In the header, a downwards-facing triangle icon is outlined in dark orange.

  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. 在“提交消息”字段中,键入一个简短且有意义的提交消息,描述您对文件所做的更改。您可以在提交消息中将提交归因于多个作者。有关更多信息,请参阅“创建具有多个作者的提交”。

  8. 如果您在 GitHub.com 上的帐户中关联了多个电子邮件地址,请单击电子邮件地址下拉菜单并选择要作为 Git 作者电子邮件地址使用的电子邮件地址。此下拉菜单中仅显示已验证的电子邮件地址。如果您启用了电子邮件地址隐私,则无回复将是默认的提交作者电子邮件地址。有关无回复电子邮件地址可能采取的确切形式的更多信息,请参阅“设置您的提交电子邮件地址”。

    Screenshot of a GitHub pull request showing a dropdown menu with options to choose the commit author email address. octocat@github.com is selected.

  9. 在提交信息字段下方,选择将您的提交添加到当前分支还是新分支。如果您的当前分支是默认分支,您应该选择为您的提交创建一个新分支,然后创建一个拉取请求。有关更多信息,请参阅“创建拉取请求”。

    Screenshot of a GitHub pull request showing a radio button to commit directly to the main branch or to create a new branch. New branch is selected.

  10. 点击提交更改提出更改

自定义主题的 CSS

这些说明最适合 GitHub Pages 正式支持的主题。有关支持主题的完整列表,请参阅 GitHub Pages 网站上的“支持主题”。

您的主题源代码库可能会提供一些帮助来自定义您的主题。例如,请参阅 Minimal 的自述文件

  1. 在 GitHub 上,导航到您的网站仓库。

  2. 导航到您的网站的发布源。有关更多信息,请参阅“配置 GitHub Pages 网站的发布源”。

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

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

    ---
    ---
    
    @import "{{ site.theme }}";
    
  5. @import 行之后立即添加您想要的任何自定义 CSS 或 Sass(包括导入)。

自定义主题的 HTML 布局

这些说明最适合 GitHub Pages 正式支持的主题。有关支持主题的完整列表,请参阅 GitHub Pages 网站上的“支持主题”。

您的主题源代码库可能会提供一些帮助来自定义您的主题。例如,请参阅 Minimal 的自述文件

  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. 根据您的需要自定义布局。

进一步阅读