Master the list loop in AnQiCMS templates: Tips for easily identifying first and last items

In website content operation, dynamically displaying data lists is a very common requirement.Whether it is an article list, product display, or image gallery, we hope to make the information more attractive through unique visual effects or logical processing.Sometimes, this means we need to apply special styles to the first or last item in the list, such as adding a 'new' tag to the first article or not displaying the right border on the image at the end of the list.

Basic list loop in AnQiCMS:forTags and built-in variables

In AnQiCMS templates, we usually use{% for item in collection %}this structure to iterate through datasets.collectionIt can bearchiveList/categoryList/pageListAny list data returned by tags like this.forThe power of loops lies not only in their ability to iterate over data but also in the special features they have built-in.forloopVariables, they provide context information about the current loop, which is the key to implementing the first and last item judgment.

Among them, the two core variables areforloop.Counterandforloop.Revcounter.

1. Determine if the current item is the first one: usingforloop.Counter

forloop.CounterThe variable will return the current loop count, which is an integer starting from 1. Therefore, whenforloop.CounterWhen the value is 1, we can determine that the current traversal is the first data in the list.

We can cooperate with{% if %}condition judgment tags to easily achieve this:

{% if forloop.Counter == 1 %}
    {# 这是列表中的第一条数据，可以应用专属样式或逻辑 #}
{% endif %}

For example, if you want to add a CSS class to the first item in the list:first-itemYou can do it like this:

<div class="{% if forloop.Counter == 1 %}first-item{% endif %}">
    <!-- 列表项内容 -->
</div>

2. Determine if the current item is the last one: usingforloop.Revcounter

Withforloop.Counterdifferent,forloop.RevcounterThe variable returns how many data items are left from the current item to the end of the list, including the current item itself. This means that whenforloop.RevcounterThe value is 1 when, the current traversal is the last item in the list.

Similarly, we use{% if %}tags to judge:

{% if forloop.Revcounter == 1 %}
    {# 这是列表中的最后一条数据，可以应用专属样式或逻辑 #}
{% endif %}

If you want to add an item to the last of the listlast-itemThe CSS class, the code will be like this:

<div class="{% if forloop.Revcounter == 1 %}last-item{% endif %}">
    <!-- 列表项内容 -->
</div>

Combine with examples, flexibly use the first and last item judgment

Understood these two core variables, let's look at some practical application scenarios and feel their practical value.

Scenario one: Add unique CSS styles to the first and last items

The article list has an English translation of "We have a list of articles, and we want the title of the first article to be bold, and the background color of the last article to be lightened."

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
        <div class="article-item {% if forloop.Counter == 1 %}first-article{% endif %} {% if forloop.Revcounter == 1 %}last-article{% endif %}">
            <h3 class="{% if forloop.Counter == 1 %}font-bold{% endif %}">
                <a href="{{ article.Link }}">{{ article.Title }}</a>
            </h3>
            <p>{{ article.Description|truncatechars:100 }}</p>
            {% if forloop.Revcounter == 1 %}
                <p class="text-muted">—— 本系列文章已完结 ——</p>
            {% endif %}
        </div>
    {% endfor %}
{% endarchiveList %}

By this means, we can precisely add or modify attributes for the first and last items dynamically, making the page visual effects richer without operating the DOM through JavaScript.

Scene two: Insert separators between list items but avoid them at the end of the last item

This is a very common requirement, such as Tag tag list, we usually use commas or vertical lines to separate, but there should be no separator at the end of the last tag.

{% tagList tags with itemId=currentArchive.Id limit="5" %}
    {% for tag in tags %}
        <a href="{{ tag.Link }}">{{ tag.Title }}</a>{% if forloop.Revcounter != 1 %}, {% endif %}
    {% endfor %}
{% endtagList %}

Here is the logic, as long as the current item is not the last item (i.e.,forloop.Revcounternot equal to 1), add a comma and a space after it.

Scene three: Display special content only for the first item, such as the "New" badge

In the news or blog list, we may want to highlight the latest published article in a prominent way.

{% archiveList news with type="list" limit="3" order="CreatedTime desc" %}
    {% for item in news %}
        <div class="news-entry">
            {% if forloop.Counter == 1 %}
                <span class="badge new-badge">最新!</span>
            {% endif %}
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            <span class="publish-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% endfor %}
{% endarchiveList %}

Only whenforloop.CounterWhen equal to 1, the "Latest!" badge will be displayed, providing users with intuitive guidance.