改进此页面

分步教程

5. 包含

网站正在逐渐成形；但是，页面之间无法导航。我们来解决这个问题。

导航应在每个页面上显示，因此将其添加到布局中是正确的方法。我们不妨利用这个机会了解一下包含，而不是直接将其添加到布局中。

包含标记

include 标记允许你包含存储在 _includes 文件夹中的另一个文件中的内容。包含对于在网站中重复出现的源代码的单一来源或改善可读性非常有用。

导航源代码可能会很复杂，因此有时将其移到包含中会很好。

包含用法

在 _includes/navigation.html 中为导航创建一个文件，内容如下

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>

尝试使用包含标记将导航添加到 _layouts/default.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

在浏览器中打开 https://#:4000，然后尝试在页面之间切换。

当前页面突出显示

我们进一步突出显示导航中的当前页面。

_includes/navigation.html 需要知道插入页面的 URL，以便添加样式。Jekyll 提供有用的变量，其中之一是 page.url。

使用 page.url，你可以检查每个链接是否是当前页面，如果是，则将其着色为红色

<nav>
  <a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>
    Home
  </a>
  <a href="/about.html" {% if page.url == "/about.html" %}style="color: red;"{% endif %}>
    About
  </a>
</nav>

查看 https://#:4000，查看当前页面的红色链接。

如果你想向导航添加新项目或更改高亮颜色，这里仍然有很多重复。在下一步中，我们将解决此问题。

下一步