Master the list loop in AnQiCMS template: A clever trick to identify the first and last items easily

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.

AnQiCMS is an enterprise-level content management system developed based on the Go language, which provides great convenience for content operation teams with its efficient and customizable features.Its template engine inherits the concise syntax of Django templates, making developers and operators able to quickly get started.Today, let's delve deeply into a very practical skill in AnQiCMS template creation: how to accurately judge whether the current item in the list loop is the first or the last one.

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

In AnQiCMS template, we usually use{% for item in collection %}such a structure to iterate over the dataset.collectioncan bearchiveList/categoryList/pageListany list data returned by the tags. ThisforThe power of loops lies not only in their ability to iterate over data but also in some special built-in featuresforloopVariables, they provide context information for the current loop, which is the key to implementing the judgment of the first and last items.

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

1. Determine if the current item is the first: Useforloop.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 item being traversed is the first item in the list.

We can cooperate{% if %}With conditional 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 whether the current item is the last one by usingforloop.Revcounter

withforloop.Counterdifferent,forloop.RevcounterThe variable returns how many more items are left to the end of the list, including the current item. This means that whenforloop.RevcounterWhen the value is 1, the current item being traversed 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 item of the list,last-itemThe CSS class, the code will be like this:

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

Combine the example, flexibly use the first and last item judgment

After understanding these two core variables, let's look at some practical application scenarios to feel their practical value.

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

Assume 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 accurately add or modify properties for the first and last items dynamically, making the page visual effects more rich without having to manipulate the DOM with JavaScript.

Scenario two: Insert separators between list items, but avoid them after the last item

This is a very common requirement, such as the Tag tag list, we usually use commas or vertical bars to separate, but there should be no separator after 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 %}

The logic is that, as long as the current item is not the last one (i.e.forloop.Revcounteris not 1), a comma and a space is added to the end.

Scenario three: Special content is displayed only on the first item, such as the "new" badge

In the news or blog list, we may want to highlight the first article published most recently 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 the value is 1, the "New!" badge will be displayed, providing users with a direct guide.