掌握AnQiCMS模板中的列表循环：轻松识别首尾项的妙招

在网站内容运营中，动态地展示数据列表是再常见不过的需求了。无论是文章列表、产品展示，还是图片画廊，我们都希望能通过独特的视觉效果或逻辑处理，让信息更具吸引力。有时候，这意味着我们需要为列表中的第一项或最后一项应用特殊的样式，比如在首篇文章上加一个“最新”标签，或者在列表末尾的图片不显示右边框。

AnQiCMS作为一款基于Go语言开发的企业级内容管理系统，凭借其高效、可定制的特点，为内容运营团队提供了极大的便利。其模板引擎沿袭了Django模板的简洁语法，使得开发者和运营者都能快速上手。今天，我们就来深入探讨一个在AnQiCMS模板制作中非常实用的技巧：如何在列表循环中精准判断当前项是否是第一条或最后一条。

AnQiCMS列表循环的基础：for 标签与内置变量

在AnQiCMS模板中，我们通常使用{% for item in collection %}这样的结构来循环遍历数据集。collection可以是archiveList、categoryList、pageList等标签返回的任何列表数据。这个for循环的强大之处，不仅在于能迭代数据，更在于它内置了一些特殊的forloop变量，它们能提供当前循环的上下文信息，正是我们实现首尾项判断的关键。

其中，最核心的两个变量就是forloop.Counter和forloop.Revcounter。

1. 判断当前项是否是第一条：利用 forloop.Counter

forloop.Counter变量会返回当前循环的次数，它是一个从1开始计数的整数。因此，当forloop.Counter的值为1时，我们就可以确定当前遍历到的就是列表中的第一条数据。

我们可以配合{% if %}条件判断标签来轻松实现这一点：

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

例如，如果您想给列表的第一项添加一个first-item的CSS类，可以这样操作：

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

2. 判断当前项是否是最后一条：利用 forloop.Revcounter

与forloop.Counter不同，forloop.Revcounter变量返回的是从当前项到列表末尾还剩下多少条数据（包括当前项本身）。这意味着，当forloop.Revcounter的值为1时，当前遍历到的就是列表中的最后一条数据。

同样，我们使用{% if %}标签来判断：

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

如果您希望给列表的最后一项添加一个last-item的CSS类，代码会是这样：

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

结合实例，灵活运用首尾项判断

理解了这两个核心变量后，我们来看几个实际应用场景，感受它们的实用价值。

场景一：为首尾项添加独特的CSS样式

假设我们有一个文章列表，希望第一篇文章的标题加粗，最后一篇文章的背景色变浅。

{% 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 %}

通过这样的方式，我们能够精确地为首尾项动态添加或修改属性，让页面视觉效果更加丰富，而无需通过JavaScript来操作DOM。

场景二：在列表项之间插入分隔符，但避免在最后一项后出现

这是一个非常常见的需求，比如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 %}

这里的逻辑是，只要当前项不是最后一项（即forloop.Revcounter不为1），就在后面添加一个逗号和空格。

场景三：只在第一项显示特殊内容，如“最新”徽章

在新闻或博客列表里，我们可能希望把最新发布的第一篇文章用醒目的方式标记出来。

{% 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 %}

只有当forloop.Counter等于1时，“最新!”的徽章才会显示，为用户提供直观的指引。