Iteration Tags
Các tag Interation được sử dụng để chạy một khối mã lặp đi lặp lại.
for
Thi hành một khối mã lặp đi lặp lại. Để xem một danh sách đầy đủ các thuộc tính sẵn có bên trong một vòng lặp for, hãy xem Vòng lặp for (Đối tượng)
Vòng lặp chỉ có thể xuất ra tối đa 50 kết quả mỗi trang. Trong những trường hợp có nhiều hơn 50 kết quả, sử dụng tag paginate để chia chúng thành nhiều trang
Input
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
Output
hat shirt pants
giới hạn
Thoát khỏi vòng lặp tại một chỉ số nhất định
Input
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
{{ item }}
{% endfor %}
Output
1 2
Offset - Độ lệch
Khởi động vòng lặp tại một chỉ số nhất định
Input
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
{{ item }}
{% endfor %}
Output
3 4
Range - Biên độ
Xác định biên độ của vòng lặp. Biên độ này có thể được xác định bởi cả biến chữ và biến số
Input
{% assign num = 4 %}
{% for i in (1..num) %}
{{ i }}
{% endfor %}
{% for i in (3..5) %}
{{ i }}
{% endfor %}
Output
1 2 3 4
3 4 5
reversed - Đảo ngược
Đảo ngược thứ tự của vòng lặp
Input
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
{{ item }}
{% endfor %}
Output
6 5 4 3 2 1
Cycle - Chu trình
Vòng lặp xuyên suốt một nhóm các chuỗi và xuất chúng theo trình tự chuyển thành các tham số. Mỗi lần cycle được gọi, chuỗi tiếp theo sẽ được chuyển thành một tham số để xuất ra.
cycle phải được sử dụng bên trong khối mã của vòng lặp for
Input
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
Output
one
two
three
one
Uses for cycle include:
Những ứng dụng dùng cho cycle bao gồm
áp dụng vào các lớp lẻ/chẵn cho các hàng trong table
áp dụng vào một lớp riêng biệt cho hình ảnh cuối cùng trong một hàng
Tham số của cycle
cycle chấp nhận một tham số được gọi là cycle group trong trong trường hợp bạn cần nhiều khối mã cycle trong một template. Nếu không có tên nào được cung cấp cho cycle group, nó sẽ được xem như gọi nhiều tham số giống nhau trong một nhóm.
Ví dụ dưới đây chỉ ra tại sao những cycle group là cần thiết khi có quá nhiều nhóm chu trình cá biệt trong khối cycle .
Details
<ul>
{% for product in collections.collection-1.products %}
<li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
</a>
</li>
{% endfor %}
</ul>
<ul>
{% for product in collections.collection-2.products %}
<li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
</a>
</li>
{% endfor %}
</ul>
Trong khối mã phía trên, nếu bộ sưu tập đầu tiên chỉ có hai sản phẩm, thì vòng lặp trong bộ sưu tập thứ hai sẽ tiếp tục cycle nơi bộ sưu tập thứ nhất kết thúc. Điều này sẽ dẫn đến kết quả Output không mong muốn như sau:
Details
<ul style="clear:both">
<li></li>
</ul>
<ul>
<li></li>
<li class="last"></li>
<li style="clear:both"></li>
<li></li>
</ul>
Để tránh điều này, cycle groups được sử dụng cho mỗi khối cycle như sau:
Details
<ul>
{% for product in collections.collection-1.products %}
<li{% cycle 'group1': ' style="clear:both;"', '', '', ' class="last"' %}>
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
</a>
</li>
{% endfor %}
</ul>
<ul>
{% for product in collections.collection-2.products %}
<li{% cycle 'group2': ' style="clear:both;"', '', '', ' class="last"' %}>
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
</a>
</li>
{% endfor %}
</ul>
Với khối mã bên trên, hai khối cycle độc lập với nhau. Kết quả được trình bày bên dưới:
Details
<ul>
<li style="clear:both"></li>
<li></li>
</ul>
<!-- new cycle group starts! -->
<ul>
<li style="clear:both"></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
tablerow
Tạo ra một cấu trúc <table> HTML. Được đặt trong những tag HTML mở đầu là <table> và kết thúc bởi </table>. Để biết danh sách đầy đủ các thuộc tính khả dụng bên trong một vòng lặp tablerow, vui lòng xem tablerow (Đối tượng).
Input
<table>
{% tablerow product in collection.products %}
{{ product.title }}
{% endtablerow %}
</table>
Output
Details
<table>
<tr class="row1">
<td class="col1">
Cool Shirt
</td>
<td class="col2">
Alien Poster
</td>
<td class="col3">
Batman Poster
</td>
<td class="col4">
Bullseye Shirt
</td>
<td class="col5">
Another Classic Vinyl
</td>
<td class="col6">
Awesome Jeans
</td>
</tr>
</table>
Tham số của tablerow
cols
Xác định có bao nhiêu cột trong một bảng.
Input
{% tablerow product in collection.products cols:2 %}
{{ product.title }}
{% endtablerow %}
Output
Details
<table>
<tr class="row1">
<td class="col1">
Cool Shirt
</td>
<td class="col2">
Alien Poster
</td>
</tr>
<tr class="row2">
<td class="col1">
Batman Poster
</td>
<td class="col2">
Bullseye Shirt
</td>
</tr>
<tr class="row3">
<td class="col1">
Another Classic Vinyl
</td>
<td class="col2">
Awesome Jeans
</td>
</tr>
</table>
limit - Giới hạn
Thoát khỏi tablerow sau một chỉ số nhất định.
{% tablerow product in collection.products cols:2 limit:3 %}
{{ product.title }}
{% endtablerow %}
offset - độ trễ
Bắt đầu một tablerow sau một chỉ số nhất định.
{% tablerow product in collection.products cols:2 offset:3 %}
{{ product.title }}
{% endtablerow %}
range - Phạm vi
Xác định phạm vi vòng lặp. Phạm vi có thể được xác định bằng cả biến chữ lẫn biến số .
<!--variable number example-->
{% assign num = 4 %}
<table>
{% tablerow i in (1..num) %}
{{ i }}
{% endtablerow %}
</table>
<!--literal number example-->
<table>
{% tablerow i in (3..5) %}
{{ i }}
{% endtablerow %}
</table>