改善此頁面

逐步教學

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 需要知道插入頁面的網址，才能加入樣式。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，你會看到目前頁面的連結為紅色。

如果你想要在導覽列中新增一個項目或變更突顯顏色，這裡還是有許多重複的地方。在下一步中，我們將解決這個問題。

下一步