反覆項目標籤
反覆項目標籤是用來重複執行/轉譯程式碼區塊。
的
重複執行程式碼區塊。 最常用來反覆查詢陣列或字典中的項目。
在 for 標籤區塊內,可以使用 forloop 物件。
代碼
{% for child_page in page.children %}
<a href={{ child_page.url }}>{{ child_page.title }}</a>
{% endfor %}
輸出
<a href=/parent/child1/>Child 1</a>
<a href=/parent/child2/>Child 2</a>
<a href=/parent/child3/>Child 3</a>
參數
for 的這些參數可以單獨使用,也可以組合使用。
limit
在特定項目數之後結束迴圈。
代碼
{% for child_page in page.children limit:2 %}
<a href={{ child_page.url }}>{{ child_page.title }}</a>
{% endfor %}
輸出
<a href=/parent/child1/>Child 1</a>
<a href=/parent/child2/>Child 2</a>
offset
從特定索引處開始迴圈。
代碼
{% for child_page in page.children offset:1 %}
<a href={{ child_page.url }}>{{ child_page.title }}</a>
{% endfor %}
輸出
<a href=/parent/child2/>Child 2</a>
<a href=/parent/child3/>Child 3</a>
range
定義要循環的數字範圍。
代碼
{% assign n = 4 %}
{% for i in (2..n) %}
{{ i }}
{% endfor %}
{% for i in (10..14) %}
{{ i }}
{% endfor }}
輸出
2 3 4
10 11 12 14
reversed
反向逐一查詢迴圈,從最後一項開始。
代碼
{% for child_page in page.children reversed %}
<a href={{ child_page.url }}>{{ child_page.title }}</a>
{% endfor %}
輸出
<a href=/parent/child3/>Child 3</a>
<a href=/parent/child2/>Child 2</a>
<a href=/parent/child1/>Child 1</a>
cycle
循環一組字串,並依字串傳遞做為參數的順序將其輸出。 每次呼叫 cycle 時,做為參數傳遞的下一個字串就會輸出。
代碼
{% for item in items %}
<div class={% cycle 'red', 'green', 'blue' %}> {{ item }} </div>
{% end %}
輸出
<div class=red> Item one </div>
<div class=green> Item two </div>
<div class=blue> Item three </div>
<div class=red> Item four </div>
<div class=green> Item five</div>
tablerow
產生 HTML 表格。 必須包裝在開始 <table> 和結束 </table> HTML 標籤中。
在 tablerow 標籤區塊內,tablerowloop 可以使用。
代碼
<table>
{% tablerow child_page in page.children %}
{{ child_page.title }}
{% endtablerow %}
</table>
輸出
<table>
<tr class=row1>
<td class=col1>
Child Page 1
</td>
<td class=col2>
Child Page 2
</td>
<td class=col3>
Child Page 3
</td>
<td class=col4>
Child Page 4
</td>
</tr>
</table>
參數
tablerow 的這些參數可以單獨使用,也可以組合使用。
輸出
<table>
<tr class=row1>
<td class=col1>
Child Page 1
</td>
<td class=col2>
Child Page 2
</td>
</tr>
<tr class=row2>
<td class=col3>
Child Page 3
</td>
<td class=col4>
Child Page 4
</td>
</tr>
</table>
代碼
<table>
{% tablerow child_page in page.children cols:2 %}
{{ child_page.title }}
{% endtablerow %}
</table>
描述產生的表格應有多少列。
cols
limit
在特定項目數之後結束迴圈。
代碼
<table>
{% tablerow child_page in page.children limit:2 %}
{{ child_page.title }}
{% endtablerow %}
</table>
輸出
<table>
<tr class=row1>
<td class=col1>
Child Page 1
</td>
<td class=col2>
Child Page 2
</td>
</tr>
</table>
offset
從特定索引處開始迴圈。
代碼
<table>
{% tablerow child_page in page.children offset:2 %}
{{ child_page.title }}
{% endtablerow %}
</table>
輸出
<table>
<tr class=row1>
<td class=col1>
Child Page 3
</td>
<td class=col2>
Child Page 4
</td>
</tr>
</table>
range
定義要循環的數字範圍。
代碼
<table>
{% tablerow i in (1..3) %}
{{ i }}
{% endtablerow %}
</table>