Iteration Tags

Iteration tags are used to run/render a block of code repeatedly.

for cycle tablerow

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.

Code
{% for child_page in page.children %}
  <a href="{{ child_page.url }}">{{ child_page.title }}</a>
{% endfor %}
Output
<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.

Code
{% for child_page in page.children limit:2 %}
  <a href="{{ child_page.url }}">{{ child_page.title }}</a>
{% endfor %}
Output
<a href="/parent/child1/">Child 1</a>
<a href="/parent/child2/">Child 2</a>

offset

Starts the loop at given index.

Code
{% for child_page in page.children offset:1 %}
  <a href="{{ child_page.url }}">{{ child_page.title }}</a>
{% endfor %}
Output
<a href="/parent/child2/">Child 2</a>
<a href="/parent/child3/">Child 3</a>

range

Defines a range of numbers to loop through.

Code
{% assign n = 4 %}
{% for i in (2..n) %}
  {{ i }}
{% endfor %}

{% for i in (10..14) %}
  {{ i }}
{% endfor }}
Output
2 3 4
10 11 12 14

reversed

Iterates through the loop in reverse order, starting from the last item.

Code
{% for child_page in page.children reversed %}
  <a href="{{ child_page.url }}">{{ child_page.title }}</a>
{% endfor %}
Output
<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.

Code
{% for item in items %}
  <div class="{% cycle 'red', 'green', 'blue' %}"> {{ item }} </div>
{% end %}
Output
<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.

Code
<table>
  {% tablerow child_page in page.children cols: 4 %}
    {{ child_page.title }}
  {% endtablerow %}
</table>
Output
<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 tablerowcan be used alone, or in combination.

cols

This parameter is required. Dictates how many rows the generated table should have.

Code
<table>
  {% tablerow child_page in page.children cols:2 %}
    {{ child_page.title }}
  {% endtablerow %}
</table>
Output
<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.

Code
<table>
  {% tablerow child_page in page.children limit:2 %}
    {{ child_page.title }}
  {% endtablerow %}
</table>
Output
<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.

Code
<table>
  {% tablerow child_page in page.children offset:2 %}
    {{ child_page.title }}
  {% endtablerow %}
</table>
Output
<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.

Code
<table>
  {% tablerow i in (1..3) %}
    {{ i }}
  {% endtablerow %}
</table>