迭代标签

Iteration tags 反复执行代码块。

for

对数组中的每个元素渲染表达式。

for 循环每次最多迭代 50 次。如果需要迭代超过 50 个元素，请使用 paginate tag 将元素分散到多个页面。

📘 提示

每个 for 循环都有一个关联的 forloop object，包含该循环的相关信息。

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

• variable：数组中的当前元素。
• array：要迭代的数组。
• expression：每次迭代时要渲染的表达式。

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}

Fit 3 Denim Shirt
Ace Cashmere Beanie
Oriental Intense EDP
Boiler Jumpsuit

for tag 参数

limit

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

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

{% for product in collection.products limit: 2 %}
  {{ product.title }}
{% endfor %}

{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}

Fit 3 Denim Shirt
Ace Cashmere Beanie

offset

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

您可以使用 offset 参数指定从基于 1 的索引处开始迭代。

{% for product in collection.products offset: 2 %}
  {{ product.title }}
{% endfor %}

{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}

Oriental Intense EDP
Boiler Jumpsuit

range

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

您可以指定数值范围来进行迭代，而不是迭代数组中的特定元素。

📘 注意

您可以使用字面量值和变量值来定义范围。

{% for i in (1..5) %}
  {{ i }}
{% endfor %}

{% assign lower_limit = 2 %}
{% assign upper_limit = 5 %}

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

1
2
3
4
5

2
3
4
5

reversed

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

您可以使用 reversed 参数以倒序进行迭代。

{% for product in collection.products reversed %}
  {{ product.title }}
{% endfor %}

{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}

Boiler Jumpsuit
Oriental Intense EDP
Ace Cashmere Beanie
Fit 3 Denim Shirt

forloop

关于父级 for loop 的信息。

属性	类型	描述
first	boolean	若当前迭代是第一次则返回 true，否则返回 false。
last	boolean	若当前迭代是最后一次则返回 true，否则返回 false。
index	number	当前迭代的基于 1 的索引。
index0	number	当前迭代的基于 0 的索引。
length	number	循环的总迭代次数。
rindex	number	当前迭代的基于 1 的反向索引。
rindex0	number	当前迭代的基于 0 的反向索引。

{
  "first": true,
  "last": false,
  "index": 1,
  "index0": 0,
  "rindex": 4,
  "rindex0": 3,
  "length": 4
}

使用 forloop object

{% for i in (1..5) %}
  {% if forloop.length > 0 %}
    {{ i }}{% unless forloop.last %},{% endunless %}
  {% endif %}
{% endfor %}

1, 2, 3, 4, 5

else

允许您指定当 for loop 长度为零时执行的默认表达式。

{% for variable in array %}
  first_expression
{% else %}
  second_expression
{% endfor %}

• variable：数组中的当前元素。
• array：要迭代的数组。
• first_expression：每次迭代时要渲染的表达式。
• second_expression：循环长度为零时要渲染的表达式。

{% for product in collection.products %}
  {{ product.title }}
{% else %}
  There are no products in this collection.
{% endfor %}

{
  "collection": {
    "products": []
  }
}

There are no products in this collection.

break

停止 for loop 的迭代。

{% break %}

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

1
2

continue

使 for loop 跳到下一次迭代。

{% continue %}

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

1
2
4
5

cycle

循环遍历一组字符串，并在 for loop 的每次迭代中依次输出它们。

cycle tag 必须在 for 循环内使用。

📘 提示

使用 cycle tag 以可预测的模式输出文本。例如，为表格中的行应用奇/偶类名。

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

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

one
two
three
one
two

创建唯一的 cycle 组

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

如果在同一 template 中包含多个具有相同参数的 cycle tags，则每组 tags 将被视为同一组。这意味着 cycle tag 可能输出所提供字符串中的任意一个，而不总是从第一个字符串开始。为此，您可以为每个 cycle tag 指定组名。

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

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

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

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

<!-- 迭代 1 -->
one
two
three
one
two

<!-- 迭代 2 -->
three
one
two
three
one

<!-- 迭代 3 -->
one
two
three
one
two

<!-- 迭代 4 -->
one
two
three
one
two

tablerow

为数组中的每个元素生成 HTML 表格行。

tablerow tag 必须包裹在 HTML <table> 和 </table> tags 内。

📘 提示

每个 tablerow 循环都有一个关联的 tablerowloop object，包含该循环的相关信息。

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

• variable：数组中的当前元素。
• array：要迭代的数组。
• expression：要渲染的表达式。

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

{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}

<table>
  <tbody>
    <tr class="row1">
      <td class="col1">Fit 3 Denim Shirt</td>
      <td class="col2">Ace Cashmere Beanie</td>
      <td class="col3">Oriental Intense EDP</td>
      <td class="col4">Boiler Jumpsuit</td>
    </tr>
  </tbody>
</table>

tablerow tag 参数

cols

{% tablerow variable in array cols: number %}
  expression
{% endtablerow %}

您可以使用 cols 参数定义表格应有多少列。

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

{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}

<table>
  <tbody>
    <tr class="row1">
      <td class="col1">Fit 3 Denim Shirt</td>
      <td class="col2">Ace Cashmere Beanie</td>
    </tr>
    <tr class="row2">
      <td class="col1">Oriental Intense EDP</td>
      <td class="col2">Boiler Jumpsuit</td>
    </tr>
  </tbody>
</table>

limit

{% tablerow variable in array limit: number %}
  expression
{% endtablerow %}

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

<table>
  {% tablerow product in collection.products limit: 3 %}
    {{ product.title }}
  {% endtablerow %}
</table>

{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}

<table>
  <tbody>
    <tr class="row1">
      <td class="col1">Fit 3 Denim Shirt</td>
      <td class="col2">Ace Cashmere Beanie</td>
      <td class="col3">Oriental Intense EDP</td>
    </tr>
  </tbody>
</table>

offset

{% tablerow variable in array offset: number %}
  expression
{% endtablerow %}

您可以使用 offset 参数指定从基于 1 的索引处开始迭代。

<table>
  {% tablerow product in collection.products offset: 1 %}
    {{ product.title }}
  {% endtablerow %}
</table>

{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}

<table>
  <tbody>
    <tr class="row1">
      <td class="col1">Ace Cashmere Beanie</td>
      <td class="col2">Oriental Intense EDP</td>
      <td class="col3">Boiler Jumpsuit</td>
    </tr>
  </tbody>
</table>

tablerowloop

关于父级 tablerow loop 的信息。

属性	类型	描述
first	number	若当前迭代是第一次则返回 1，否则返回 0。
last	number	若当前迭代是最后一次则返回 1，否则返回 0。
index	number	当前迭代的基于 1 的索引。
index0	number	当前迭代的基于 0 的索引。
length	number	循环的总迭代次数。
rindex	number	当前迭代的基于 1 的反向索引。
rindex0	number	当前迭代的基于 0 的反向索引。

{
  "first": 1,
  "last": 0,
  "index": 1,
  "index0": 0,
  "rindex": 4,
  "rindex0": 3,
  "length": 4
}

paginate

将数组的元素分散到多个页面。

由于 for loops 每页限制 50 次迭代，如果需要迭代超过 50 个元素的数组，则需要使用 paginate tag。以下数组支持分页：

• blog.articles
• collection.products
• search.results.products

在 paginate tag 内，您可以访问 paginate object，用它来构建页面导航。

{% paginate array by page_size %}
  {% for item in array %}
    forloop_content
  {% endfor %}
{% endpaginate %}

• array：要循环的数组。
• page_size：每页包含的数组元素数量，介于 1 到 50 之间。
• item：正在循环的数组中的一个元素。
• forloop_content：每次循环迭代的内容。

{% paginate collection.products by 8 %}
  {% for product in collection.products %}
    {{ product.title }}
  {% endfor %}
{% endpaginate %}

{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ],
    "products_count": 16
  }
}

Fit 3 Denim Shirt
Ace Cashmere Beanie
Oriental Intense EDP
Boiler Jumpsuit