How to loop through a list of data in a template and display it (using for loop), supporting counting and reversing?

In Anqi CMS template, efficiently displaying list data is an indispensable part of website content operation.Whether it is displaying the latest articles, product lists, category catalogs, or custom data sets, flexibly iterating through these data and performing fine-grained control can greatly enhance the performance and user experience of the website.The AnQi CMS provides a powerful and easy-to-use template engine, itsforThe loop tag is feature-rich, supporting not only basic traversal but also easily achieving counting, reversal, and more advanced operations.

Core Concept:forBasic usage of the loop

In the Anqi CMS template,forThe syntax of loops is very similar to the Django template engine, making it easy for users familiar with this type of syntax to get started quickly. Its basic structure is{% for item in collection %}...{% endfor %}. Here,collectionRepresents the collection of data you want to iterate over (for example, througharchiveList/categoryListdata obtained using tags), whileitemis the temporary variable representing the current data item in each iteration.

For example, if you want to display a list of recent articles that have been published, you would usually usearchiveListTag to get data, then throughforLoop through:

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
        <div class="article-item">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>{{ article.Description }}</p>
            <span>发布日期: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% endfor %}
{% endarchiveList %}

In this example,articleswe go througharchiveListthe collection of articles obtained,articleThis represents the variable for the current article object in each loop. You can rename it to any name that is easy to understand, as long as you keeparticlethe same meaning.forUse this variable within the statement.

Utility tools in loops: counting and status.

When traversing data in a loop, we often need to know which iteration we are currently in, or how many items are left. Anqi CMS'sforloops provide built-in variablesforloopIt includes the details of the current loop state, among which the most commonly used isforloop.Counterandforloop.Revcounter.

• forloop.CounterThis variable starts from 1 and increments with each loop iteration, indicating the current item.This is very useful when you need to add numbering, ranking, or special treatment to the first item, last item, or any item in the list.
• forloop.Revcounter: Similar toCounterOn the contrary,RevcounterStarting from the total number of items in the list, it indicates how many items (including the current item) are left to the end of the list. For example, if the list has 5 items,RevcounterIt is 5 in the first loop, 4 in the second, and so on, until the last item is 1.

CombineifLogic judgment tag, you can easily implement various conditional display effects. For example, add a special style to the first item in the list:

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
        <div class="article-item {% if forloop.Counter == 1 %}is-first{% endif %}">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>这是第 {{ forloop.Counter }} 篇文章，还剩下 {{ forloop.Revcounter - 1 }} 篇。</p>
        </div>
    {% endfor %}
{% endarchiveList %}

Byforloop.CounterYou can clearly know the progress of the current loop and adjust the presentation of the content accordingly.

Flexible control of order: flip and sort

Sometimes, we may need to display list data in different orders, such as displaying the latest content in reverse order or sorting by a certain attribute. Anqi CMS'sforLoops also provide a concise modifier for this:reversedandsorted.

• reversed: This modifier will simply traverse the data collection in reverse order. If the data you retrieve from the database is sorted in descending order by time, but you want to display it in ascending order in the template, you can usereversed.
• sorted: This modifier will perform a default sort on the dataset (usually in the natural order of the elements, such as numerical size or alphabetical order). Please note,sortedUsed to sort simple collections.
• Combine usage:reversed sorted: You can combine these two modifiers. In this case, the list will be sorted first, and then reversed.

The following is usedreversedExample of displaying article list in reverse order:

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles reversed %} {# 这里添加 reversed 翻转顺序 #}
        <div class="article-item">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>（倒序显示）发布日期: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</p>
        </div>
    {% endfor %}
{% endarchiveList %}

It should be noted that,sortedModifiers may not have the default sorting behavior you expect when handling complex collections of objects. For more complex sorting requirements, you may need to specify the sorting method when querying data on the backend, orforPerform data preprocessing outside the loop.

Handle empty list:emptyTag

When you try to iterate over a potentially empty list, you usually worry about blank areas or errors on the page. Anqi CMS'sforprovided a loopemptyThe label is used to display alternative content when the collection is empty, avoiding additionalifJudgment makes the template code more concise:

{% archiveList articles with type="list" categoryId="999" %} {# 假设分类ID 999下没有文章 #}
    {% for article in articles %}
        <div class="article-item">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
        </div>
    {% empty %} {# 当 articles 集合为空时，显示以下内容 #}
        <p class="no-content">当前分类下暂无文章，敬请期待！</p>
    {% endfor %}
{% endarchiveList %}

This way, even if there is no content under a certain category for the time being, your website can friendly prompt the visitor instead of displaying a blank.

Advanced技巧：neat output and nested loops

Remove logic label blank line

During template rendering,forLoop orifThe logic tags may cause unnecessary blank lines in the final HTML output, affecting the neatness of the HTML code. Anq CMS provides a trick to solve this problem: add a hyphen at the beginning or end of the tag-.

• {%- for ... %}Remove whitespace before the tag.
• {% endfor -%}Remove whitespace after the tag.

This minor change can make the generated HTML source code more compact.

<ul>
{%- archiveList articles with type="list" limit="3" %}
    {%- for article in articles %}
    <li>
        <a href="{{ article.Link }}">{{ article.Title }}</a>
    </li>
    {%- endfor %}
{%- endarchiveList %}
</ul>

Nested loop

For multi-level data structures, such as categories (first-level list) containing articles (second-level list), you can use nestedforloops to display. Anqi CMS'scategoryListandarchiveListLabels used together can achieve this effect:

`twig {% categoryList categories with moduleId=“1” parentId=“0” %}

{% for category in categories %}
    <div class="category-section">
        <h2><a href="{{ category.Link }}">{{ category.Title }}</a></h2>
        <ul>
            {% archiveList articles with type="list" categoryId=category.Id limit