Iteration Tags
Iteration tags are used to run/render a block of code repeatedly.
for
Executes a block of code repeatedly. It is most commonly used to iterate over the items in an array or dictionary.
Within the for
tag block, the forloop object is available.
{% 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>
Parameters
These parameters of for
can be used alone, or in combination.
limit
Exits the loop after a given number of items.
{% 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
Starts the loop at given index.
{% 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
Defines a range of numbers to loop through.
{% 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
Iterates through the loop in reverse order, starting from the last item.
{% 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
Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time cycle is called, the next string that was passed as a parameter is output.
{% 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
Generates an HTML table. Must be wrapped in an opening <table>
and closing </table>
HTML tags.
Within the tablerow
tag block, the tablerowloop object is available.
<table> {% tablerow child_page in page.children cols: 4 %} {{ 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>
Parameters
These parameters of tablerow
can be used alone, or in combination.
cols
This parameter is required. Dictates how many rows the generated table should have.
<table> {% tablerow child_page in page.children cols: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> <tr class="row2"> <td class="col3"> Child Page 3 </td> <td class="col4"> Child Page 4 </td> </tr> </table>
limit
Exits the loop after a given number of items.
<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
Starts the loop at given index.
<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
Defines a range of numbers to loop through.
<table> {% tablerow i in (1..3) %} {{ i }} {% endtablerow %} </table>