🏗️ テーマ基盤上級

YAML フロントマターの形式整形

Liquid ファイルの先頭にある YAML フロントマター（メタ情報）を Prettier で自動整形するためのテストケース。空の YAML ブロックや複数ブロック、ブロック後のテキストの処理に対応した形式化ルールを示す。

用途

Liquid テンプレートファイルに記述した YAML メタデータ（設定値、レイアウト指定など）を一貫した見た目に自動修正するとき。開発時のコード品質維持に用いる。

設置場所

このコード自体はテストケース集であり、直接テーマに貼り付けるものではない。Prettier Liquid プラグイン( `@shopify/prettier-plugin-liquid` )の開発・テスト環境で参照し、YAML ブロックの整形ルールを検証する際に使用する。

注意点

このスニペットはテスト用の仕様書であって、実装ではない。実際の YAML フロントマター整形機能は Prettier プラグイン側で提供されるため、ストアテーマに直接組み込む必要はない。Liquid ファイルで YAML メタデータを使う場合、プラグインのバージョンと対応する Prettier バージョンを揃えておくと整形が正しく動く。

タグ:yaml-frontmatterprettierformattingliquid-syntaxdevelopment-tool

コード

31 行 / liquid

---
hello: world
array:
  - one
  - "{{ liquid }}"
  - three
---
<body>
  hello
</body>

It should handle empty yaml blocks
---
---
<body>
  hello
</body>

It should format text after the block correctly
printWidth: 1
---
hello: world
array:
  - one
  - "{{ liquid }}"
  - three
---
this
is
text

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/yaml-frontmatter/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

YAML フロントマターの形式整形

コード

出典・ライセンス

関連項目

セクションスキーマのカスタムブロック定義

セクション呼び出しのフォーマット

レイアウトテンプレートの指定

Liquid フォーマッター互換のセクション表記

基本的なHTMLレイアウト

layout タグのフォーマット