Liquid Snippets by ALSEL
🏗️ テーマ基盤初級

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

Liquid の `layout` タグを使い、テーマのレイアウトファイルを指定する構文。複数のレイアウト候補と whitespace 制御(ダッシュ記号)の使い方を示す。

用途
theme.liquid 以外のカスタムレイアウトファイルを作成して、複数のテンプレートで共有したいとき。ヘッダー・フッター・CSS を一元管理する。
設置場所
layouts/ ディレクトリ配下のレイアウトファイル(例: layouts/custom.liquid)の先頭行に `{% layout 'layoutName' %}` を記述するか、templates/ 配下のテンプレートファイルでレイアウト指定として使う。
注意点
レイアウト名はシングルクォート内で指定し、ファイル拡張子の .liquid は含めない。`{% layout none %}` でレイアウトを無効にできるが、その場合 doctype や <html> タグは自分で記述する必要がある。Prettier や linter の整形時に whitespace 制御(ダッシュ)が誤動作しないよう、ダッシュを含むレイアウトタグは単独行で記述すると安全。
タグ:layouttheme-structurewhitespace-controlliquid-tag

コード

8 行 / liquid
It should never break a name
printWidth: 1
{% layout 'layoutName' %}
{% layout 'layoutName' %}
{% layout 'layoutName' %}
{%- layout 'layoutName' -%}
{%- layout none -%}

出典・ライセンス

License:
MIT

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

関連項目

🏗️ テーマ基盤中級

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

セクションの schema ブロック内でカスタムブロックタイプを定義する方法を示すサンプル。@theme と _private というプレフィックスで異なるブロック種別を宣言する。

📁 theme-tools·MIT·7
🏗️ テーマ基盤初級

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

Liquid の section タグを複数行に記述する際の正しいフォーマット例。タグ名を改行で分割しても正しく認識される書き方を示す。

📁 theme-tools·MIT·7
🏗️ テーマ基盤上級

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
🏗️ テーマ基盤初級

DOCTYPE宣言の構文サンプル

HTML5 と過去の DOCTYPE 宣言パターンを網羅したリファレンス。Prettier による Liquid フォーマッタが複数行 DOCTYPE に対応することを示すテストコード。

📁 theme-tools·MIT·12