📘 公式リファレンス🏷️ リファレンス/タグ初級
capture タグ(変数に複雑な文字列を格納)
Liquid ロジックと変数を組み合わせた複雑な文字列を新しい変数に格納する。条件分岐やフィルター処理の結果を1つの変数にまとめて、後で何度も再利用できる。
用途
商品タイトルの大文字・小文字変換結果、条件付きで生成されたメッセージ、複数行にわたるHTML片など、処理結果をテンプレート内で複数回出力したいとき。
設置場所
{% capture 変数名 %}...{% endcapture %} の形でテンプレート内に直接書き、後続の行で {{ 変数名 }} として出力・参照する。
注意点
同じ名前の定義済み Liquid オブジェクト(product、shop など)が存在する場合、capture の変数で上書きされる。意図しないオブジェクト破棄を避けるため、変数名は `_captured_` や `temp_` のような接頭辞を付けるとよい。capture 内の改行や空白もそのまま格納されるため、必要に応じて capture 前後の {%- や -%} で余分な空白を削除する。
仕様
32 行 / json{
"category": "variable",
"deprecated": false,
"deprecation_reason": "",
"description": "You can create complex strings with Liquid logic and variables.\n\n> Caution:\n> Predefined Liquid objects can be overridden by variables with the same name.\n> To make sure that you can access all Liquid objects, make sure that your variable name doesn't match a predefined object's name.",
"parameters": [],
"summary": "Creates a new variable with a string value.",
"name": "capture",
"syntax": "{% capture variable %}\n value\n{% endcapture %}",
"syntax_keywords": [
{
"keyword": "variable",
"description": "The name of the variable being created."
},
{
"keyword": "value",
"description": "The value you want to assign to the variable."
}
],
"examples": [
{
"name": "",
"description": "",
"syntax": "",
"path": "/products/health-potion",
"raw_liquid": "{%- assign up_title = product.title | upcase -%}\n{%- assign down_title = product.title | downcase -%}\n{%- assign show_up_title = true -%}\n\n{%- capture title -%}\n {% if show_up_title -%}\n Upcase title: {{ up_title }}\n {%- else -%}\n Downcase title: {{ down_title }}\n {%- endif %}\n{%- endcapture %}\n\n{{ title }}",
"parameter": false,
"display_type": "text",
"show_data_tab": true
}
]
}出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-liquid-docs
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。
関連項目
📘 公式リファレンス🏷️ リファレンス/タグ中級
doc タグ(テンプレートの注釈・ドキュメント)
Liquid テンプレート内にドキュメンテーションコメントを埋め込むタグ。`{% doc %}` ~ `{% enddoc %}` に囲まれたコンテンツは画面に出力されず、内部の Liquid コードは解析されるが実行されない。コード補完、リンティング、インラインドキュメント機能の実装を支援する。
📁 theme-liquid-docs·MIT·12 行
📘 公式リファレンス🏷️ リファレンス/タグ初級
include タグ(スニペットを埋め込む)
スニペットファイルを Liquid テンプレート内に埋め込んでレンダリングする。埋め込み先の変数にアクセス・変更できるため、親テンプレートと子スニペット間でデータを直接共有する。
📁 theme-liquid-docs·MIT·17 行
📘 公式リファレンス🏷️ リファレンス/タグ中級
javascript タグ(セクション・ブロック内のコード)
セクション、ブロック、スニペット内に JavaScript コードを記述するタグ。このタグ内に書いた JavaScript は Shopify のテーマビルドシステムにより自動的に読み込まれて実行される。
📁 theme-liquid-docs·MIT·17 行
📘 公式リファレンス🏷️ リファレンス/タグ初級
sections タグ(セクショングループを描画)
セクショングループをテーマのレイアウト内で描画するタグ。レイアウトファイル内に配置して、複数のセクションをグループ化した内容を出力する。
📁 theme-liquid-docs·MIT·17 行
📘 公式リファレンス🏷️ リファレンス/タグ初級
stylesheet タグ(CSS定義)
セクション、ブロック、スニペット内で CSS スタイルを定義するタグ。各ファイルにつき1つだけ記述でき、定義した CSS はそのコンポーネント固有の外側スコープで読み込まれて実行される。
📁 theme-liquid-docs·MIT·17 行
📘 公式リファレンス🏷️ リファレンス/タグ初級
break タグ(ループの中断)
for ループの反復処理を途中で停止するタグ。指定した条件に達したら以降の反復をスキップして、ループを抜ける。
📁 theme-liquid-docs·MIT·23 行