Skip to main content

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

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

谁可以使用此功能?

GitHub Pages 适用于具有 GitHub Free 和组织的 GitHub Free 的公共存储库,以及具有 GitHub Pro、GitHub Team、GitHub Enterprise Cloud 和 GitHub Enterprise Server 的公共和专用存储库。 有关详细信息,请参阅“GitHub 的计划”。

GitHub Pages 现在使用 GitHub Actions 来执行 Jekyll 构建。 使用分支作为构建源时,如果要使用内置的 Jekyll 工作流,则必须在存储库中启用 GitHub Actions。 或者,如果 GitHub Actions 不可用或已禁用,则将 .nojekyll 文件添加到源分支的根目录将绕过 Jekyll 构建过程并直接部署内容。 有关 GitHub Actions 运行器的详细信息,请参阅“管理存储库的 GitHub Actions 设置”。

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

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

添加主题

  1. 在 GitHub 上,导航到站点的仓库。
  2. 导航到站点的发布来源。 有关详细信息,请参阅“配置 GitHub Pages 站点的发布源”。
  3. 导航到“_config.yml”。
  4. 在文件视图的右上角,单击 以打开文件编辑器。

文件的屏幕截图。 在标头中,标有铅笔图标的按钮以深橙色标出。

Note

除了使用默认文件编辑器编辑和提交文件,还可以选择使用 github.dev 代码编辑器,方法是选择 下拉菜单并单击“github.dev”****。 还可以单击 GitHub Desktop 克隆存储库并通过 GitHub Desktop 在本地编辑文件。

文件的屏幕截图。 在标头中,一个朝下三角形图标用深橙色框出。

  1. 为主题名称添加新行。

    • 若要使用支持的主题,请键入 theme: THEME-NAME,将 THEME-NAME 替换为主题存储库(大多数主题遵循 jekyll-theme-NAME 命名约定)的 _config.yml 中显示的主题名称。 有关支持主题的列表,请参阅 GitHub Pages 站点上的支持主题。 例如,若要选择 Minimal 主题,请键入 theme: jekyll-theme-minimal
    • 若要使用在 GitHub 上托管的任何其他 Jekyll 主题,请键入 remote_theme: THEME-NAME,将 THEME-NAME 替换为主题存储库的 README 中显示的主题名称。
  2. 单击“提交更改...”

  3. 在“提交消息”字段中,输入简短、有意义的提交消息,以描述对文件的更改。 您可以在提交消息中将提交归于多个作者。 有关详细信息,请参阅“创建有多个作者的提交”。

  4. 如果在 GitHub 上有多个电子邮件地址与你的帐户关联,请单击电子邮件地址下拉菜单,然后选择要用作 Git 作者电子邮件地址的电子邮件地址。 只有经过验证的电子邮件地址才会出现在此下拉菜单中。 如果启用了电子邮件地址隐私,则使用无回复电子邮件地址作为默认提交作者的电子邮件地址。 有关无回复电子邮件地址可以采用的确切格式的详细信息,请参阅“设置提交电子邮件地址”。

    GitHub 拉取请求的屏幕截图,其中显示了一个下拉菜单,包含用于选择提交作者电子邮件地址的选项。 已选择 octocat@github.com。

  5. 在提交消息字段下面,确定是要将提交添加到当前分支还是新分支。 如果当前分支是默认分支,则应选择为提交创建新分支,然后创建拉取请求。 有关详细信息,请参阅“创建拉取请求”。

    GitHub 拉取请求的屏幕截图,其中显示了一个单选按钮,用于直接提交到主分支或创建新分支。 已选择“新建分支”。

  6. 单击“提交更改”或“建议更改” 。

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

其他阅读材料