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

在 Jekyll 主题中自定义 CSS 和 HTML

GitHub 页面 可用于具有 GitHub Free 的公共仓库,以及具有 GitHub Pro、GitHub Team、GitHub Enterprise Cloud 和 GitHub Enterprise Server 的公共和私有仓库。更多信息请参阅“GitHub 的产品。”

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

我们建议您安装 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 上的 _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. 根据需要自定义布局。

延伸阅读

问问别人

找不到要找的内容?

联系我们