tag：迭代-Iteration

迭代-Iteration

• break
• continue
• cycle
• for
• tablerow

break

停止for循环迭代(跳出循环)

语法：

{% break %}

代码：

{% for i in (1..5) -%}
  {%- if i == 4 -%}
    {% break %}
  {%- else -%}
    {{ i }}
  {%- endif -%}
{%- endfor %}

输出：

1
2
3

continue

让for循环跳至下一次迭代

• 停止当前逻辑，进入下一次循环，而不是跳出循环

语法：

{% continue %}

代码：

{% for i in (1..5) -%}
  {%- if i == 4 -%}
    {% continue %}
  {%- else -%}
    {{ i }}
  {%- endif -%}
{%- endfor %}

输出：

1
2
3
5

cycle

cycle标签必须在循环内使用for。

• for循环遍历一组字符串，并在循环的每次迭代中一次输出一个。

1.常规方式

语法：

{% cycle string, string, ... %}

举例：

{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

输出：

one
two
three
one

2.创建独特的循环组

• 如果您在同一模板中包含多个cycle具有相同参数的标签，则每组标签都会被视为同一组。这意味着标签可以cycle输出任何提供的字符串，而不必总是从第一个字符串开始。
• 为了解决这个问题，您可以为每个cycle标签指定一个组名。

语法：

{% cycle string: string, string, ... %}

举例：

<!-- Iteration 1 -->
{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 2 -->
{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 3 -->
{% for i in (1..4) -%}
  {% cycle 'group_1': 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 4 -->
{% for i in (1..4) -%}
  {% cycle 'group_2': 'one', 'two', 'three' %}
{%- endfor %}

输出：

<!-- Iteration 1 -->
one
two
three
one


<!-- Iteration 2 -->
two
three
one
two


<!-- Iteration 3 -->
one
two
three
one


<!-- Iteration 4 -->
one
two
three
one

for

循环

一：常规使用

语法：

{% for variable in array %}
  expression
{% endfor %}

举例：

// 1.数据
{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}


// 2.代码
{% for product in collection.products -%}
  {{ product.title }}
{%- endfor %}


// 3.输出
Draught of Immortality
Glacier ice
Health potion
Invisibility potion

二：for tag 参数

1.limit

语法：

• 您可以使用参数limit限制迭代次数

{% for variable in array limit: number %}
  expression
{% endfor %}

举例：

// 1.数据
{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}


// 2.代码
{% for product in collection.products limit: 2 -%}
  {{ product.title }}
{%- endfor %}


// 3.输出
Draught of Immortality
Glacier ice

2.offset

• 您可以指定一个基于 1 的索引, 从offset参数值位置开始迭代

语法：

{% for variable in array offset: number %}
  expression
{% endfor %}

举例：

// 1.数据
{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}


// 2.代码
{% for product in collection.products offset: 2 -%}
  {{ product.title }}
{%- endfor %}


// 3.输出
Health potion
Invisibility potion

3.range

• 您可以指定要迭代的数字范围，而不是迭代数组中的特定项目。

语法：

{% for variable in (number..number) %}
  expression
{% endfor %}

举例：

// 1.代码
{% for i in (1..3) -%}
  {{ i }}
{%- endfor %}

{%- assign lower_limit = 2 -%}
{%- assign upper_limit = 4 -%}

{% for i in (lower_limit..upper_limit) -%}
  {{ i }}
{%- endfor %}


// 2.输出
1
2
3

2
3
4

三：forloop

Liquid 中，每个 for 循环都有一个内置对象叫 forloop，它包含了很多有用的信息

• forloop.index 当前循环的索引（从 1 开始）
• forloop.index0 当前循环的索引（从 0 开始）
• forloop.rindex 从循环末尾算起的索引（从 1 开始）
• forloop.rindex0 从循环末尾算起的索引（从 0 开始）
• forloop.first 是否是第一个元素（true/false）
• forloop.last 是否是最后一个元素（true/false）
• forloop.length 循环的总长度

例子：

{% assign fruits = "apple,orange,banana,grape" | split: "," %}

<ul>
{% for fruit in fruits %}
  <li>
    水果名称: {{ fruit }} <br>
    索引（从1开始）: {{ forloop.index }} <br>
    索引（从0开始）: {{ forloop.index0 }} <br>
    从末尾算起索引（从1开始）: {{ forloop.rindex }} <br>
    从末尾算起索引（从0开始）: {{ forloop.rindex0 }} <br>
    是否第一个: {{ forloop.first }} <br>
    是否最后一个: {{ forloop.last }} <br>
    总长度: {{ forloop.length }}
  </li>
{% endfor %}
</ul>

输出:

水果名称: apple
索引（从1开始）: 1
索引（从0开始）: 0
从末尾算起索引（从1开始）: 4
从末尾算起索引（从0开始）: 3
是否第一个: true
是否最后一个: false
总长度: 4

水果名称: orange
索引（从1开始）: 2
索引（从0开始）: 1
从末尾算起索引（从1开始）: 3
从末尾算起索引（从0开始）: 2
是否第一个: false
是否最后一个: false
总长度: 4

水果名称: banana
索引（从1开始）: 3
索引（从0开始）: 2
从末尾算起索引（从1开始）: 2
从末尾算起索引（从0开始）: 1
是否第一个: false
是否最后一个: false
总长度: 4

水果名称: grape
索引（从1开始）: 4
索引（从0开始）: 3
从末尾算起索引（从1开始）: 1
从末尾算起索引（从0开始）: 0
是否第一个: false
是否最后一个: true
总长度: 4

tablerow

tablerow

• 为数组中的每个项目生成 HTML 表行。
• 标签tablerow必须包裹在 HTML和标签中。

语法：

{% tablerow variable in array %}
  expression
{% endtablerow %}

举例：

// 1.数据
{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}


// 2.代码
<table>
  {% tablerow product in collection.products %}
    {{ product.title }}
  {% endtablerow %}
</table>


// 3.输出
<table>
  <tr class="row1">
    <td class="col1">Draught of Immortality</td>
    <td class="col2">Glacier ice</td>
    <td class="col3">Health potion</td>
    <td class="col4">Invisibility potion</td>
  </tr>
</table>

fecify对该标签进行了支持，但是没有使用tablerow

• 这个标签实用性不强
• 更多参看shopify的文档了解详细：https://shopify.dev/docs/api/liquid/tags/tablerow