Step by Step チュートリアル

3. Front Matter

front matterは、ファイル冒頭の3つのダッシュのライン2つの間のYAMLの断片です。front matterは、例えば次のようにしてページに変数をセットするために使います。

---
my_number: 5
---

front matterの変数は、page変数としてLiquidで使用できます。例えば、上記の変数を出力する場合は、次のように使用します。

{{ page.my_number }}

front matterを使う

front matterを使って、サイトの<title>を変更してみましょう。

---
title: Home
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    <h1>{{ "Hello World!" | downcase }}</h1>
  </body>
</html>

普通のHTMLよりもソースコードを多く書かなければいけないのに、どうしてこの様にするのか不思議に思っているのではないでしょうか。次のステップへ進むと、理由が分かります。

  1. セットアップ
  2. Liquid
  3. Front Matter
  4. レイアウト
  5. Includes(インクルード)
  6. Dataファイル
  7. Assets
  8. ブログ
  9. コレクション
  10. Deployment