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

4. レイアウト

Jekyllは、ページの構築時にHTMLに加えて Markdown をサポートしています。Markdownは、コンテンツ構造が単純なページ（単なる段落、見出し、画像）に最適な選択肢であり、生のHTMLよりも冗長ではありません。

サイトのルートフォルダーに about.md という名前の新しいMarkdownファイルを作成します。

index の内容をコピーして、「バージョン情報」ページ用に修正できます。しかし、これを行うと、サイトに追加する新しいページごとにカスタマイズする必要がある重複コードが作成されます。

たとえば、新しいスタイルシートをサイトに追加するには、各ページの <head> にスタイルシートへのリンクを追加することになります。ページが多いサイトでは、これは時間の無駄です。

レイアウトは、サイトの任意のページで使用でき、ページコンテンツをラップするテンプレートです。これらは _layouts という名前のディレクトリに格納されています。

サイトのルートフォルダーに _layouts ディレクトリを作成し、次の内容を含む新しい default.html ファイルを作成します

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

このHTMLは index.html とほぼ同じですが、フロントマターはなく、ページのコンテンツが content 変数に置き換えられています。

content は、呼び出されたページのレンダリングされたコンテンツを返す特別な変数です。

index.html に新しいレイアウトを使用させるには、フロントマターで layout 変数を設定します。ファイルは次のようになります

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

サイトを再読み込みすると、出力は同じままです。

レイアウトはページ上のコンテンツをラップするため、レイアウトファイルで page のようにフロントマターを呼び出すことができます。レイアウトをページに適用すると、そのページのフロントマターが使用されます。

「バージョン情報」ページで新しいレイアウトを使用するために、次の内容を about.md に追加します

---
layout: default
title: About
---
# About page

This page tells you a little bit about me.

ブラウザーで http://localhost:4000/about.html を開き、新しいページを表示します。

おめでとうございます。これで、2ページのWebサイトができました。

次に、サイト内をページからページへ移動する方法について説明します。

戻る