Liquid Snippets by ALSEL
📘 公式リファレンス🏷️ リファレンス/タグ初級

cycle タグ(ループ内で文字列を順番に出力)

for ループ内で複数の文字列を順番に繰り返し出力するタグ。1回目は第1文字列、2回目は第2文字列というようにサイクルする。

用途
テーブル行に odd/even クラスを交互に付与したり、商品一覧を3列レイアウトで表示する際に、行の開始・終了タグを順番に挿入したりする場合に使う。
設置場所
for ループ内で `{% cycle 'one', 'two', 'three' %}` の形で記述する。同じパラメータの cycle タグが複数ある場合、グループ名を指定して分離する。
注意点
同一テンプレート内で同じパラメータを持つ cycle タグが複数あると、それらは同じカウンタを共有してしまい、期待と異なる出力になる。この場合は `{% cycle 'group_name': 'one', 'two', 'three' %}` のようにグループ名を明示して、複数のカウンタを独立させる必要がある。cycle は for ループの外では動作しない。
タグ:cycleiterationfor-looprepetitionconditional-output

仕様

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
    }
  ]
}

出典・ライセンス

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