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

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

Core mechanism:forloopobject

at AnQiCMS'sforDuring the loop, the system will automatically generate a specialforloopobject. thisforloopobject that contains detailed information about the current loop state, among which the most commonly used and crucial property 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 the current item and all subsequent items.For example, if a list has a total of 5 items, the first item isRevcounterIs 5, the second item is 4, and so on, the last item isRevcounteris1.

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

Judge the first item

To determine if the current item being traversed is the first item in the loop, we just need to checkforloop.Counterwhether 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 additionalfirst-highlightThis CSS class, convenient for us to differentiate styles, thereby highlighting the first item in the list visually.

Determine the last item

Determine if the current item is the last one in the loop, we can useforloop.Revcounterproperty. As explained before, whenforloop.Revcounterthe value is equal to1It means that we are dealing with the last item in the list.

This is particularly useful when handling separators between list items. We often want there to be 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 more tidy.

Comprehensive example

In order to better understand the practical application of these two properties, let's look at an example that combines head and tail item judgments and also showsforloopother some 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