Front MatterとLiquid

Front Matter（フロントマッター）を使うと、ファイルにメタデータをセットすることができます。defaultレイアウトを使うためにindex.htmlに記述してみましょう。形式はYAMLで、2つの3連続のダッシュ: --- の間、そしてファイルの先頭に書きます。

index.htmlの先頭に以下を追加します:

---
layout: default
---

ブラウザを更新すると、サイトの見た目は先ほどと全く同じです。違いは、これからは全てのページで同じレイアウトを使えるようになったということです。

まだ問題があります。全て同じ<title>タグはイヤなので、変更する必要があります。Front MatterとLiquid（リキッド）を使って修正することができます。

Liquidは、Jekyllで使われているテンプレート言語です。すでにレイアウトのセクションにて {{ content }}というものを使いました。

Liquidには2種類の書き方があります:

Output Markup - 2つの波括弧を使って、何かしらを出力します。

{{ variable }}

Tag Markup - 何も出力しません。基本的にロジックを書くために使われます。Tag markupには波括弧とパーセント記号を使います。

{% if page.variable %}
  Hello
{% endif %}

では、title変数を設定するために、index.htmlにもう1行Front Matterを追加しましょう。 Front Matterは現在このような感じです:

---
layout: default
title: Home Page
---

default.htmlを開き、このように<title>タグを置き換えます:

<title>
  {% if page.title %}
    {{ page.title }}
  {% else %}
    Default Page Title
  {% endif %}
</title>

pageを使うことで、設定したFront Matterを参照できます。ここでは、タイトルがセットされていれば表示され、されていなければ初期表示になるよう確認しましょう。

ページをリロードすると、ページタイトルが _Home Page_となっています。

Guide