How to judge whether the current item is the first or last item in the `for` loop in AnQiCMS templates?

In the template development of AnQiCMS, we often encounter situations where we need to loop through and display data in lists, such as article lists, product categories, and navigation menus.In these loops, sometimes we need to perform special handling on the first or last item of the list, such as adding unique CSS styles, displaying different content, or cleverly handling the separators between list items.AnQiCMS uses syntax similar to Django template engine, providing us with very intuitive and powerful tools to solve such common template logic problems.

Core Mechanism:forloopObject

In AnQiCMS,forthe system will automatically generate a special one for each iteration,forloopobject.forloopThe object contains detailed information about the current loop state, where the most commonly used and crucial attribute for determining the start and end items isforloop.Counterandforloop.Revcounter.

• forloop.CounterThis property indicates the current iteration of the loop, its count starts from1. If you need an index starting from 0, you can adjust it yourself.
• forloop.RevcounterThis property indicates how many items are left from the current item to the end of the loop.In other words, it counts the number of current items and all subsequent items.RevcounterIt is 5, the second item is 4, and so on, the last item'sRevcounterthen1.

After understanding these two properties, determining the first and last items in the loop becomes very simple.

determine the first item

To determine if the current item being traversed is the first item in the loop, we just need to checkforloop.Counterif it is equal to1. This is a very direct and efficient method.

For example, we might want to add a special background color to the first item in the list:

{% archiveList articles with type="list" limit="5" %}
    {% for item in articles %}
        {% if forloop.Counter == 1 %}
            <div class="article-card first-highlight">
        {% else %}
            <div class="article-card">
        {% endif %}
                <h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
                <p>{{ item.Description|truncatechars:100 }}</p>
            </div>
    {% empty %}
        <p>暂时没有文章可供显示。</p>
    {% endfor %}
{% endarchiveList %}

In this example, when the loop reaches the first article, it will receive an extrafirst-highlightThis CSS class is convenient for us to distinguish styles, thereby highlighting the first item in the list visually.

Determine the last item

We can use the attribute to determine if the current item is the last one in the loop.forloop.RevcounterAs explained earlier, when the value offorloop.Revcounteris equal to1When, it means that we are dealing with the last item in the list.

This is especially useful when handling separators between list items. We often want a separator after each item except the last one:

{% categoryList categories with moduleId="1" parentId="0" %}
    <nav class="category-nav">
        {% for category in categories %}
            <a href="{{ category.Link }}">{{ category.Title }}</a>
            {% if forloop.Revcounter != 1 %}
                <span class="category-separator"> / </span>
            {% endif %}
        {% endfor %}
    </nav>
{% empty %}
    <p>没有找到任何分类。</p>
{% endcategoryList %}

This example demonstrates a common scenario: adding separators between navigation links. By judgingforloop.Revcounter != 1We ensure that the separator is only displayed when it is not the last item, avoiding unnecessary separators after the last category, making the page layout cleaner.

Comprehensive Example

To better understand the actual application of these two properties, let's look at an example that combines head and tail item judgment, while also showingforloopother convenient information:

`twig

{% archiveList latestArchives with type="list" limit="6" order="CreatedTime desc" %}
    {% for article in latestArchives %}
        <div class="list-item
            {% if forloop.Counter == 1 %} is-first {% endif %}
            {% if forloop.Revcounter == 1 %} is-last {% endif %}"
        >
            <h3 class="item-title">
                <a href="{{ article.Link }}">{{ article.Title }}</a>
            </h3>
            <p class="item-meta">
                发布于：{{ stampToDate(article.CreatedTime, "2006-01-02