📘 公式リファレンス🏷️ リファレンス/タグ初級
cycle タグ(ループ内で文字列を順番に出力)
for ループ内で複数の文字列を順番に繰り返し出力するタグ。1回目は第1文字列、2回目は第2文字列というようにサイクルする。
用途
テーブル行に odd/even クラスを交互に付与したり、商品一覧を3列レイアウトで表示する際に、行の開始・終了タグを順番に挿入したりする場合に使う。
設置場所
for ループ内で `{% cycle 'one', 'two', 'three' %}` の形で記述する。同じパラメータの cycle タグが複数ある場合、グループ名を指定して分離する。
注意点
同一テンプレート内で同じパラメータを持つ cycle タグが複数あると、それらは同じカウンタを共有してしまい、期待と異なる出力になる。この場合は `{% cycle 'group_name': 'one', 'two', 'three' %}` のようにグループ名を明示して、複数のカウンタを独立させる必要がある。cycle は for ループの外では動作しない。
仕様
33 行 / json{
"category": "iteration",
"deprecated": false,
"deprecation_reason": "",
"description": "The `cycle` tag must be used inside a `for` loop.\n\n> Tip:\n> Use the `cycle` tag to output text in a predictable pattern. For example, to apply odd/even classes to rows in a table.",
"parameters": [],
"summary": "Loops through a group of strings and outputs them one at a time for each iteration of a [`for` loop](/docs/api/liquid/tags/for).",
"name": "cycle",
"syntax": "{% cycle string, string, ... %}",
"syntax_keywords": [],
"examples": [
{
"name": "",
"description": "",
"syntax": "",
"path": "/",
"raw_liquid": "{% for i in (1..4) -%}\n {% cycle 'one', 'two', 'three' %}\n{%- endfor %}",
"parameter": false,
"display_type": "text",
"show_data_tab": true
},
{
"name": "Create unique cycle groups",
"description": "If you include multiple `cycle` tags with the same parameters, in the same template, then each set of tags is treated as the same group. This means that it's possible for a `cycle` tag to output any of the provided strings, instead of always starting at the first string.\nTo account for this, you can specify a group name for each `cycle` tag.\n",
"syntax": "{% cycle string: string, string, ... %}",
"path": "/",
"raw_liquid": "<!-- Iteration 1 -->\n{% for i in (1..4) -%}\n {% cycle 'one', 'two', 'three' %}\n{%- endfor %}\n\n<!-- Iteration 2 -->\n{% for i in (1..4) -%}\n {% cycle 'one', 'two', 'three' %}\n{%- endfor %}\n\n<!-- Iteration 3 -->\n{% for i in (1..4) -%}\n {% cycle 'group_1': 'one', 'two', 'three' %}\n{%- endfor %}\n\n<!-- Iteration 4 -->\n{% for i in (1..4) -%}\n {% cycle 'group_2': 'one', 'two', 'three' %}\n{%- endfor %}",
"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 行