Improve this page

Step by Step チュートリアル

5. Includes（インクルード）

サイトは一緒にできていますが、ページ間を移動する方法がありません。そこを修正していきましょう。

ナビゲーションは全てのページにあるべきですので、レイアウトに追加するのが正しいです。レイアウトに直接追加するのではなく、インクルードについて学ぶ機会に使いましょう。

インクルードタグ

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>

http://localhost: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>

http://localhost:4000を見て、現在のページがレッドリンクになっていることを確認してください。

ナビゲーションに新しい項目を追加したり、ハイライトの色を変更したい場合は、ここでも多くの繰り返しがあります。次のステップでは、これに対処します。

Back