レイアウト

レイアウトはコンテンツを包み込むテンプレートです。これを使用すると、テンプレートのソースコードを 1 か所に保存し、すべてのページでナビゲーションやフッターなどの内容を繰り返す必要がなくなります。

レイアウトは _layouts ディレクトリ内にあります。default.html というベーステンプレートがあり、他のレイアウトは必要に応じてここを継承するという慣習があります。

レイアウトディレクトリ

Jekyll は、サイトの source のルートまたはテーマのルートにある _layouts ディレクトリを探します。

設定ファイルで layouts_dir キーを設定して、レイアウトを配置するディレクトリ名を構成することはできますが、ディレクトリ自体はサイトの source ディレクトリのルートにある必要があります。

使用方法

最初のステップは、テンプレートのソースコードを default.html に配置することです。content は特別な変数で、値はラップされる投稿またはページのレンダリングされたコンテンツです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>{{ page.title }}</h1>
    <section>
      {{ content }}
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

元のフロントマターに完全にアクセスできます。上記の例では、page.title はページのフロントマターから来ています。

次に、ページのフロントマターで使用するレイアウトを指定する必要があります。また、フロントマターのデフォルトを使用すると、すべてのページでこれを設定する手間が省けます。

---
title: My First Page
layout: default
---

This is the content of my page

このページのレンダリングされた出力は次のとおりです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Page</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>My First Page</h1>
    <section>
      This is the content of my page
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

継承

レイアウトの継承は、サイトの文書の一部に既存のレイアウトに追加する場合に便利です。一般的な例はブログ投稿です。投稿に日付と著者を表示したい場合がありますが、それ以外は基本レイアウトと同じである必要があります。

これを実現するには、フロントマターで元のレイアウトを指定する別のレイアウトを作成する必要があります。たとえば、このレイアウトは _layouts/post.html にあります。

---
layout: default
---
<p>{{ page.date }} - Written by {{ page.author }}</p>

{{ content }}

これで、投稿はこのレイアウトを使用できますが、他のすべてのページはデフォルトを使用します。

変数

レイアウトにフロントマターを設定できますが、唯一の違いは Liquid で使用する場合に、page ではなく layout 変数を使用する必要があることです。例:

---
city: San Francisco
---
<p>{{ layout.city }}</p>

{{ content }}