Skip to main content

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

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

GitHub Pages 适用于具有 GitHub AE 的内部和私有仓库。 GitHub Pages 适用于具有 GitHub Free 和组织的 GitHub Free 的公共仓库,以及具有 GitHub Pro、GitHub Team、GitHub Enterprise Cloud 和 GitHub Enterprise Server 的公共和私有仓库。

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

Changes to your site are published automatically when the changes are merged into your site's publishing source. If you want to preview your changes first, you can make the changes locally instead of on GitHub AE. 然后在本地测试站点。 更多信息请参阅“使用 Jekyll 在本地测试 GitHub Pages 站点”。

添加主题

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

  2. 导航到站点的发布来源。 For more information, see "Configuring a publishing source for your GitHub Pages site."

  3. 导航到 _config.yml

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

    编辑文件按钮

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

    • 要使用支持的主题,请键入 theme: THEME-NAME,将 THEME-NAME 替换为主题仓库的 README 中显示的主题名称。 有关支持的主题列表,请参阅 GitHub Pages 网站上的“支持的主题”。 配置文件中支持的主题
    • 要使用托管于 GitHub 的任何其他 Jekyll 主题,请键入 remote_theme: THEME-NAME,将 THEME-NAME 替换为主题仓库的 README 中显示的主题名称。 配置文件中不支持的主题
  6. 在页面底部,输入一条简短、有意义的提交消息,描述您对文件所作的更改。 您可以在提交消息中将提交归于多个作者。 更多信息请参阅“创建有多个合作作者的提交”。 有关更改的提交消息

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

  8. 单击 Propose file change(提议文件更改)提议文件更改按钮

自定义主题的 CSS

主题的源仓库也可能对自定义主题有所帮助。 例如,请参阅“Minima's README”。

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

  2. 导航到站点的发布来源。 For more information, see "Configuring a publishing source for your GitHub Pages site."

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

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

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

自定义主题的 HTML 布局

主题的源仓库也可能对自定义主题有所帮助。 例如,请参阅“Minima's README”。

  1. 在 GitHub 上,导航到主题的源仓库。 例如,Minima 的源仓库为 https://github.com/jekyll/minima。
  2. _layouts 文件夹中,导航到主题的 default.html 文件。
  3. 复制文件的内容。
  4. 在 GitHub AE 上,导航到站点的仓库。
  5. 导航到站点的发布来源。 For more information, see "Configuring a publishing source for your GitHub Pages site."
  6. 创建名为 _layouts/default.html 的文件。
  7. 粘贴之前复制的默认布局内容。
  8. 根据需要自定义布局。

延伸阅读