添加 Jekyll 主题到 GitHub 页面站点
GitHub 页面 可用于具有 GitHub Free 的公共仓库,以及具有 GitHub Pro、GitHub Team、GitHub Enterprise Cloud 和 GitHub Enterprise Server 的公共和私有仓库。
您可以编辑站点的 _config.yml 文件,将 Jekyll 主题添加到 GitHub 页面站点。
GitHub 页面 支持官方支持的 Jekyll 主题,以及所有托管于 GitHub Enterprise 上的开源 Jekyll 主题。
更多信息请参阅“关于 GitHub 上的 Jekyll 主题”。
您可以在以下文件夹中使用站点内容覆盖 Jekyll 主题的默认值:
_layouts
_includes
_sass
assets
有关您可以覆盖的 Jekyll 主题文件的更多信息,请参阅主题的自述文件或主题源仓库中的其他文档。
在站点的 _config.yml 文件中添加 Jekyll 主题
-
在 GitHub Enterprise 上,导航到仓库的主页面。
-
在仓库中,浏览到 _config.yml。
-
在文件视图的右上角,单击 打开文件编辑器。
-
在 _config.yml 中新添加包含主题名称的新行,以激活主题:
- 要激活其中一个正式支持的主题,请输入
theme:
,后接主题名称(如主题源仓库中的自述文件所示)。 - 要激活托管于 GitHub Enterprise 上的任何其他开源 Jekyll 主题,请输入
remote_theme:
,后接主题名称(如主题源仓库中的自述文件或其他文档所示)。
- 要激活其中一个正式支持的主题,请输入
-
在页面底部,键入简短、有意义的提交消息,描述您对文件所做的更改。您可以在提交消息中将提交归因于多个作者。更多信息请参阅“创建多个合作作者的提交."
-
在 commit message(提交消息)字段下方,决定要将提交添加到当前分支还是添加到新分支。如果当前分支为
master
,则应选择为提交创建新分支,然后创建拉取请求。 -
单击 Propose file change(提议文件更改)。
-
如果您创建了拉取请求,请合并拉取请求到 GitHub 页面 发布分支,通常是
master
分支,有时也是gh-pages
分支。
您的站点此时应该会使用新增的主题发布。
本地预览 Jekyll 主题
在 您的 GitHub Enterprise Server 实例 上的站点 _config.yml 文件中添加 Jekyll 主题后,您可以按照下面章节详述的步骤在本地预览主题。
在尝试本地预览 Jekyll 主题之前,请确保:
- 您的计算机上有远程 GitHub 页面 站点仓库的本地副本。 如果您没有站点仓库的本地副本,请参阅“克隆仓库”。如果在 您的 GitHub Enterprise Server 实例 上还没有远程 GitHub 页面 站点仓库,可以使用别人的开源站点仓库作为起始模板并对其分叉。
- 您已安装 Bundler。
将主题作为 Gem 添加到 Gemfile
注:如果使用仅 web 界面进行编辑,您无需将主题添加到站点的 Gemfile(如果其中存在主题)。
-
在 GitHub Enterprise 上,导航到仓库的主页面。
-
在仓库中,浏览到 Gemfile。
-
在文件视图的右上角,单击 打开文件编辑器。
-
在 Gemfile 中新增一行,用引号括住主题名称:
提示:您可以在 Gemfile 中添加多个 Jekyll 主题,但为激活主题,在 _config.yml 文件中只能添加一个主题。
-
在页面底部,键入简短、有意义的提交消息,描述您对文件所做的更改。您可以在提交消息中将提交归因于多个作者。更多信息请参阅“创建多个合作作者的提交."
-
在 commit message(提交消息)字段下方,决定要将提交添加到当前分支还是添加到新分支。如果当前分支为
master
,则应选择为提交创建新分支,然后创建拉取请求。 -
单击 Propose file change(提议文件更改)。
-
如果您创建了拉取请求,请合并拉取请求到 GitHub 页面 发布分支,通常是
master
分支,有时也是gh-pages
分支。 有关在哪个分支上发布站点的更多信息,请“用户、组织和项目页面”。
使用 Bundler 安装主题
-
打开终端终端Git Bash终端。
-
浏览到本地 GitHub 页面 站点仓库:
$ cd my-pages-site-repository
-
将 您的 GitHub Enterprise Server 实例 上远程站点仓库中的更改加载到本地站点仓库:
$ git pull
提示:有关使用
git pull
的更多信息,请参阅“获取远程”。 -
使用 Bundler 安装 Jekyll 主题 Gem:
$ bundle install > Fetching gem metadata from https://rubygems.org/............ Fetching version metadata from https://rubygems.org/... Fetching dependency metadata from https://rubygems.org/.. Resolving dependencies... . . . Installing minima 1.0.1 Using bundler 1.10.6 Bundle complete! 2 Gemfile dependencies, 54 gems now installed. Use `bundle show [gemname]` to see where a bundled gem is installed.
-
推送更改到 您的 GitHub Enterprise Server 实例 上的远程 GitHub 页面 站点仓库,在下面的示例中,如果使用
gh-pages
分支发布站点,则将master
替换为gh-pages
。$ git push origin master
在命令行上添加 Jekyll 主题
-
打开终端终端Git Bash终端。
-
导航到本地站点仓库
$ cd my-pages-site-repository
-
要将主题添加到站点的 Gemfile,请打开您常用的文本编辑器,如 Atom,然后将此行添加到 Gemfile,用引号括住所选主题的名称: `
shell gem "minima"
Minima 是 Jekyll 站点的默认主题。
<div class="extended-markdown tip border rounded-1 mb-4 p-3 border-blue bg-blue-light f5">
**提示:**您可以将多个 Jekyll 主题添加到 *Gemfile*,但为了激活主题,只能添加其中一个主题到 *_config.yml* 文件。
</div>
4. 使用 Bundler 安装 Jekyll 主题 Gem:
<pre><code class="hljs language-shell">$ bundle install
> Fetching gem metadata from https://rubygems.org/............
Fetching version metadata from https://rubygems.org/...
Fetching dependency metadata from https://rubygems.org/..
Resolving dependencies...
. . .
Installing minima 1.0.1
Using bundler 1.10.6
Bundle complete! 2 Gemfile dependencies, 54 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.</code></pre>
5. 要激活主题,请使用您的常用文本编辑器,在站点 *_config.yml* 文件中新增一行,其中包含主题的名称:
shell
theme: minima
6. 使用 Git 添加并提交更改:
<pre><code class="hljs language-shell">$ git commit -a
# Adds your changes
$ git commit -m "added theme to Gemfile & _config.yml"
# Commits your changes with a commit message</code></pre>
7. [推送更改](/articles/pushing-to-a-remote/)到远程 GitHub 页面 站点仓库,在下面的示例中,如果使用 `gh-pages` 分支发布站点,则将 `master` 替换为 `gh-pages`:
<pre><code class="hljs language-shell">$ git push origin master</code></pre>
您的站点此时应该会使用新增的主题发布。
### 延伸阅读
- [Jekyll 关于主题的正式文档](https://jekyllrb.com/docs/themes/)
- "[关于 GitHub 上的 Jekyll 主题](/articles/about-jekyll-themes-on-github)"
- "[自定义 Jekyll 主题中的 CSS 和 HTML](/articles/customizing-css-and-html-in-your-jekyll-theme)"