详细教程（分步骤）
5. Includes：引入文件、包含文件、可复用片段、模板片段
- Setup：安装、创建和构建 Jekyll 的详细教程
- Liquid：模板语言
- Front Matter：页面头部参数
- Layouts：布局
- Includes：引入文件、包含文件、可复用片段、模板片段
- Data Files：数据文件
- Assets：资源文件（css、js、图片）
- Blogging：Jekyll 博客系统
- Collections：集合（专题页面、聚合页面）
- Deployment：部署
网站已经基本成型，现在还需要一个关联各页面的导航功能。现在我们来解决这个问题。
导航应该出现在每个页面上，因此最合适的做法是将其添加到布局（layout）中。不过，我们不直接把导航代码写进布局文件，而是借此机会学习一下 include 标签的用法。
include 标签
include 标签可以让你从 _includes 文件夹中引入另一个文件的内容。使用 include 有助于让重复的代码集中管理，提高代码的可读性。你也可以理解成模块化。
导航代码可能会比较复杂，因此将其放入一个独立的 include 文件中有助于管理和维护。
include 的使用方法
首先，创建一个 _includes/navigation.html 文件，并添加以下内容：
<nav>
<a href="/">首页</a>
<a href="/about.html">关于</a>
</nav>
然后，在 _layouts/default.html 中使用 include 标签来引入这个导航：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
</head>
<body>
{% include navigation.html %}
{{ content }}
</body>
</html>
在浏览器中打开 http://localhost:4000，然后尝试在不同页面之间切换。
导航菜单高亮当前页面链接
让我们进一步优化，使当前页面的导航链接高亮显示。
_includes/navigation.html 需要知道它被插入的页面的 URL，以便为当前页面的链接添加特殊样式。Jekyll 提供了一些变量，其中 page.url 变量可以用于获取当前页面的 URL。
我们可以使用 page.url 来检查每个链接是否是当前页面，如果是，就把它的颜色设为红色：
<nav>
<a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>
首页
</a>
<a href="/about.html" {% if page.url == "/about.html" %}style="color: red;"{% endif %}>
关于
</a>
</nav>
现在，打开 http://localhost:4000，你会发现当前页面的链接变成了红色。
不过，如果你想添加新导航项或更改高亮颜色，上述代码仍然有很多重复的地方。接下来的步骤，我们将优化这个问题。