🏗️ テーマ基盤中級
content_for タグ(レイアウトへのコンテンツ埋め込み)
layout ファイルに定義したプレースホルダーへ、テンプレートやセクション側から任意のコンテンツを埋め込む Liquid タグ。複数ブロックの内容を指定位置に出力できる。
用途
テーマレイアウト内の特定位置(例:ヘッダー下、フッター上)に、ページやセクションごと異なるコンテンツを動的に挿入したいとき。
設置場所
layout/theme.liquid 側に `{% content_for 'block_name' %}` で受け取り位置を定義し、template や section ファイル内で `{% content_for 'block_name' %}...{% endcontent_for %}` で実際の内容を指定する。
注意点
content_for で定義したプレースホルダーがレイアウトに存在しないと、指定したコンテンツが出力されない。同じブロック名で複数回 content_for を呼び出した場合、最後の定義で上書きされるため、複数セクションで同じブロック名を使う設計は避ける。レイアウトの読み込み順序に依存するため、条件分岐で動的にプレースホルダーを作る場合は意図通り動作するか検証が必要。
コード
22 行 / liquidIt should never break a name
printWidth: 1
{% content_for 'block' %}
{%- content_for 'blocks' -%}
It should break on named args
printWidth: 1
{% content_for 'block',
key1: val1,
key2: (0..1)
%}
It should not require commas (as per syntax) but add them when pretty printed
{% content_for 'block', key1: val1, key2: (0..1) %}
It should not require spaces (as per syntax) but add them when pretty printed
{% content_for 'block', key1: val1, key2: (0..1) %}
It should strip trailing commas by default
{% content_for 'foo' %}
{% content_for 'foo', product: product %}
出典・ライセンス
- Source:
- Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/liquid-tag-content-for/fixed.liquid
- Repository:
- https://github.com/Shopify/theme-tools
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。
関連項目
🏗️ テーマ基盤中級
セクションスキーマのカスタムブロック定義
セクションの schema ブロック内でカスタムブロックタイプを定義する方法を示すサンプル。@theme と _private というプレフィックスで異なるブロック種別を宣言する。
📁 theme-tools·MIT·7 行
🏗️ テーマ基盤初級
セクション呼び出しのフォーマット
Liquid の section タグを複数行に記述する際の正しいフォーマット例。タグ名を改行で分割しても正しく認識される書き方を示す。
📁 theme-tools·MIT·7 行
🏗️ テーマ基盤初級
レイアウトテンプレートの指定
Liquid の `layout` タグを使い、テーマのレイアウトファイルを指定する構文。複数のレイアウト候補と whitespace 制御(ダッシュ記号)の使い方を示す。
📁 theme-tools·MIT·8 行
🏗️ テーマ基盤上級
Liquid フォーマッター互換のセクション表記
Prettier Liquid プラグインのテストケースで、セクションタグの様々な書式を検証する。異なる間隔・改行・ホワイトスペーストリミングの組み合わせでもセクション名が崩れないことを確認する。
📁 theme-tools·MIT·9 行
🏗️ テーマ基盤初級
基本的なHTMLレイアウト
Prettier Liquid プラグインのテスト用に作られた最小限の HTML テンプレート。DOCTYPE から body タグまでの基本的なドキュメント構造を示す。
📁 theme-tools·MIT·10 行
🏗️ テーマ基盤上級
layout タグのフォーマット
Liquid の layout タグの書式をコード品質ツール(Prettier)でフォーマットするテストケース。スペースや改行位置の違いを正規化し、レイアウト名が壊れないことを検証する。
📁 theme-tools·MIT·10 行