ステップバイステップチュートリアル

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 には便利な変数があり、その 1 つが page.url です。

page.url を使用すると、各リンクが現在のページかどうかを確認し、true の場合は赤色で表示できます。

<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 を確認すると、現在のページの赤いリンクが表示されます。

ナビゲーションに新しい項目を追加したり、強調表示の色を変更したりする場合は、ここにはまだ多くの繰り返しがあります。次のステップでは、この問題に対処します。

戻る