YAMLフロントマター：Markdownファイル先頭のメタデータ
YAMLフロントマター
MarkdownのYAMLフロントマター：構文、フィールド、例 | We.Inc
YAMLフロントマターとは何か、---のルール、Jekyll、Hugo、Eleventy、Astroが読み取るフィールドを解説。自分のファイルのメタデータと本文を分けて表示するツール付き。
フロントマターとは、Markdownファイルの一番先頭に置くYAMLのブロックで、3つのダッシュの行（---）で開始と終了を示します。静的サイトジェネレーターはこれをタイトル、日付、レイアウト、タグなどのページのデータとして読み取り、終了行より下のすべてをページの内容としてレンダリングします。
人気の静的サイトジェネレーター4つのフロントマター対応
- Jekyll
- ---で囲んだYAML
- layout、permalink、published。投稿ではdate、category、categories、tags
- Hugo
- YAML（---）、TOML（+++）、JSON（{ }）
- title、date、draft、description、slug、weight、tags
- Eleventy
- デフォルトはYAML、加えて---jsonと---js
- permalink、layout、tags
- Astro
- YAMLまたはTOML
- layout（src/pagesのMarkdownページ用）
フロントマターは、ただのMarkdownファイルをメタデータ付きのページに変えますが、ダッシュが1つずれるだけで壊れます。ファイルを分割ツールに貼り付ければ、ビルドがエラーを出す前に、メタデータがどこで終わり内容がどこから始まるか、どのトップレベルのフィールドが見つかったかを正確に確認できます。
- Markdownファイルを貼り付けるか、サンプルの投稿を編集します。
- 分割ツールが、最初の行が---（YAML）または+++（TOML）であることを確認し、対応する終了行を探します。
- フロントマターのブロック、見つかったシンプルなトップレベルのフィールド、レンダリングされる本文を表示します。
- ブロックが閉じられていない場合はそれを知らせます。これは、ページにメタデータがテキストとして表示されてしまう最も一般的な原因です。
- 開始の---の前には何も置いてはいけません。空行やバイトオーダーマークもだめです。置くと、ほとんどのジェネレーターはブロックを通常のテキストとして扱います。
- "Pricing: what changed"のように、コロンの後に空白が続くタイトルは引用符で囲みましょう。囲まないとYAMLはネストしたマッピングとして読み取ります。
- 日付はYYYY-MM-DDで書きましょう。ジェネレーターとYAMLライブラリの解釈が一致します。
- 独自のフィールドは一貫した場所にまとめましょう。たとえばHugoには、独自の値を入れるためのparamsキーがあります。
よくある質問
Markdownのフロントマターとは何ですか？
Markdownファイルの先頭で、2本の区切り行の間に書くメタデータです。Markdown自体が定義しているものではなく、静的サイトジェネレーターやコンテンツツールが合意した慣習で、残りをレンダリングする前にデータとして読み取ります。
フロントマターはYAMLでなければいけませんか？
YAMLが一般的なデフォルトですが、唯一の選択肢ではありません。Hugoは+++の行で囲んだTOMLと波括弧で囲んだJSONを受け付け、Eleventyは---jsonと---jsに対応し、AstroもTOMLを受け付けます。
ページにフロントマターがテキストとして表示されるのはなぜですか？
たいていは、最初の---の前に何かがある、終了の---がない、開始行に余計な文字がある、のいずれかです。上の分割ツールは後の2つをすぐに指摘します。
フロントマターは空でもよいですか？
構いません。Jekyllでは、空の---の行のペアでもファイルを処理対象として示せます。CSSやフィードのファイルで、メタデータなしにLiquidタグをレンダリングさせるにはこの方法を使います。
自分のコードでフロントマターを読み取るには？
ファイルを区切り行で分割し、前半をYAMLライブラリで解析して、残りをMarkdownレンダラーに渡します。Eleventyはgray-matterパッケージでこれを行っており、Nodeでも直接使えます。
区切り行のルール
- Jekyllのドキュメントは明快です。フロントマターはファイルの最初になければならず、3つのダッシュの行の間に有効なYAMLとして書く必要があります。他のジェネレーターも同じ形に従います。
- ブロックの中では通常のYAMLのルールが適用されます。インデントには空白を使い、特殊文字を含む値は引用符で囲み、タグやカテゴリーにはリストを使いましょう。
すべてのページに設定したいフィールド
- ほとんどのテーマでは、タイトルと説明がページの見出しと検索結果のスニペットになります。日付は投稿の並び順を決め、draftやpublishedはページをそもそもビルドするかどうかを決めます。
- それ以外はテンプレート次第です。追加したフィールドはすべて、著者名、ヒーロー画像のパス、読了時間など、レイアウトが表示できるデータになります。
フロントマターの例
ブログ記事（YAML）
典型的な投稿です。コロンを含むため引用符で囲んだタイトル、日付、タグのリスト、独自のauthorフィールドがあります。
同じ投稿をTOMLのフロントマターで（Hugo）
Hugoは+++をTOMLのフロントマターとして読み取ります。独自の値はparamsキーの下に置きます。
フロントマター分割ツール
Markdownファイルを貼り付けてください。フロントマターのブロックを見つけ、シンプルなトップレベルのフィールドを一覧にし、レンダリングされる本文を表示します。
Markdownファイル
フロントマター（{f}）
見つかったトップレベルのフィールド
トップレベルにシンプルなkey: valueの行はありません。
本文
フロントマターなし：最初の行が---でも+++でもないため、ファイル全体が内容として扱われます。
{d}で開始したブロックが閉じられていません。最後のフィールドの後に対応する{d}の行を追加してください。
フロントマターが見つかり、正しく閉じられています。
フィールド
書かれたままの値
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る