Skip to main content

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

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

谁可以使用此功能?

GitHub Pages 适用于具有 GitHub Free 和组织的 GitHub Free 的公共存储库,以及具有 GitHub Pro、GitHub Team、GitHub Enterprise Cloud 和 GitHub Enterprise Server 的公共和专用存储库。

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

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

添加主题

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

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

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

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

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

自定义主题的 CSS

主题的源仓库也可能对自定义主题有所帮助。 例如,请参阅 Minimal 的自述文件

  1. 在 GitHub Enterprise Server 上,导航到站点的仓库。

  2. 导航到站点的发布来源。 有关详细信息,请参阅“配置 GitHub Pages 站点的发布源”。

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

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

    ---
    ---
    
    @import "{{ site.theme }}";
    
  5. @import 行的后面直接添加所需的任何自定义 CSS 或 Sass(包括导入)。

自定义主题的 HTML 布局

主题的源仓库也可能对自定义主题有所帮助。 例如,请参阅 Minimal 的自述文件

  1. 在 GitHub 上,导航到主题的源仓库。 例如,Minimal 的源存储库为 https://github.com/pages-themes/minimal。
  2. 在 _layouts 文件夹中,导航到主题的 default.html 文件 。
  3. 复制该文件的内容。
  4. 在 GitHub Enterprise Server 上,导航到站点的仓库。
  5. 导航到站点的发布来源。 有关详细信息,请参阅“配置 GitHub Pages 站点的发布源”。
  6. 创建一个名为 _layouts/default.html 的文件。
  7. 粘贴之前复制的默认布局内容。
  8. 根据需要自定义布局。

其他阅读材料