レイアウト

レイアウトはコンテンツを包み込むテンプレートです。テンプレートでソースコードを一カ所にまとめることができますので、フッターやナビゲーションをページ毎に繰り返す必要がありません。

レイアウトは_layoutsディレクトリに入れます。慣例として、default.htmlという基本テンプレートを用意し、必要に応じて他のレイアウトがこれを継承するようにします。

レイアウトディレクトリ

Jekyllはサイトのsourceのrootかテーマのrootのどちらかで_layoutsディレクトリを探します。

設定ファイルのlayouts_dirキーでレイアウトを入れるディレクトリの名前を変更できますが、そのディレクトリはサイトのsourceのrootにある必要があります。

使い方

まず始めに、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>

元のファイルの全front matterにアクセスできます。上記の例では、page.titleがページのfront matterから読み込まれます。

次にページのfront matterで使用するレイアウトを指定する必要があります。front matterのデフォルトを使用して、全ページに設定するのを省くことができます。

---
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>

継承

レイアウトの継承は、サイトの一部のドキュメントには、既存のレイアウトに何かを追加したい場合に便利です。例としては、ブログのポストには日付と著者を表示したいけれど、他ではベースのレイアウトを使用する場合です。

その様な場合は、違うレイアウトを作成して、元にするレイアウトをfront matterで指定します。例えば、次のような_layouts/post.htmlを作ります。

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

{{ content }}

これで、ポストはこのレイアウトを使用して、ページではデフォルトを使用することができます。

変数

レイアウトにもfront matterを設定することができます。Liquidを使用する場合のみ違いがあり、page変数ではなく、layout変数を使用します。例えば：

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

{{ content }}