我们经常发布文档更新,此页面的翻译可能仍在进行中。有关最新信息,请访问英文文档。如果此页面上的翻译有问题,请告诉我们
文章版本: Enterprise Server 2.16

在 Jekyll 主题中自定义 CSS 和 HTML

通过向 Jekyll 主题添加自定义样式和更改主题布局,可以个性化您的 GitHub Pages 站点。

GitHub 页面 可用于具有 GitHub Free 的公共仓库,以及具有 GitHub Pro、GitHub Team、GitHub Enterprise Cloud 和 GitHub Enterprise Server 的公共和私有仓库。

我们建议您安装 Jekyll,以便发布更改之前在本地进行测试。 您的更改被合并到站点的发布分支后,就会发布在站点上。 更多信息请参阅“Jekyll 的构建过程”。

Jekyll 主题的源仓库也可能对自定义主题有所帮助。 例如,查看 Jekyll 主题 Minima 的自述文件

这些用法说明经过优化,非常适用于 GitHub 页面 官方支持的 Jekyll 主题。 有关完整列表,请参阅“支持的主题”。

自定义 Jekyll 主题的 CSS

  1. 在站点仓库的根目录中创建名为 /assets/css/style.scss 的文件。

  2. 将以下内容添加到文件顶部,如下所示:

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

自定义 Jekyll 主题的 HTML 布局

  1. 在 GitHub Enterprise 上的 _layouts 文件夹中,导航到 Jekyll 主题源仓库的 default.html 文件。 例如,导航到 https://github.com/pages-themes/THEME_NAME/blob/master/_layouts/default.html,将 THEME_NAME 替换为您的 Jekyll 主题的名称。

  2. 复制 default.html 文件的内容。

    提示:单击页面右上角的 Raw(原始)可更改文件视图,以便更轻松地进行复制。

  3. 在站点仓库中创建名为 /_layouts/default.html 的文件。

  4. 将您在第 2 步中复制的默认布局内容粘贴到站点仓库的新 /_layouts/default.html 文件中。

  5. 根据需要自定义布局。

延伸阅读

问问别人

找不到要找的内容?

联系我们