在现代网站设计中，列表内容的视觉呈现方式对用户体验有着重要影响。无论是文章列表、产品展示还是评论区，通过赋予列表项不同的样式，例如隔行变色或根据特定条件应用不同类名，都能显著提升页面的可读性和美观度。AnQiCMS 强大的模板引擎提供了灵活的工具来实现这些动态样式需求，其中 for 循环中的 cycle 标签和 add 过滤器便是我们的得力助手。

理解循环中的动态样式需求

想象一下，当你浏览一个长长的文章列表时，如果每篇文章的背景色都相同，眼睛很容易疲劳，也难以区分相邻的条目。这时，如果列表能实现“隔行变色”，即一行是浅色，下一行是深色，阅读体验就会立刻变得流畅许多。

除了简单的隔行变色，有时候我们还需要更精细的控制。例如，给列表中的第一项添加一个特殊的“first-item”类名，或者根据某个数据（比如文章ID、阅读量）动态地生成一个包含数字的类名（如“post-id-123”）。这些需求都指向了一个核心功能：在循环遍历数据时，能够灵活地为每个列表项拼接出独一无二或具有特定规律的 CSS 类名。

AnQiCMS 的模板语言借鉴了 Django 模板引擎的语法，让我们可以轻松地在 HTML 结构中嵌入逻辑控制和数据输出。接下来，我们就来看看如何在 for 循环中实现这些动态样式。

AnQiCMS 模板中的循环基础

在 AnQiCMS 模板中，我们通常使用 {% for item in list %} 标签来遍历数据集，例如文章列表（archiveList）或分类列表（categoryList）。在这个循环内部，系统提供了几个非常有用的特殊变量，帮助我们获取当前循环的状态：

  • forloop.Counter: 当前循环的迭代次数，从 1 开始计数。
  • forloop.Revcounter: 当前循环中剩余元素的数量，从总数倒序计数。

一个简单的文章列表循环可能看起来是这样：

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
    <li>
        <span>这是第 {{ forloop.Counter }} 篇文章</span>
        <a href="{{item.Link}}">{{item.Title}}</a>
    </li>
    {% endfor %}
{% endarchiveList %}

这里 forloop.Counter 会分别输出 1, 2, 3, 4, 5，为我们提供了动态控制样式的基本数字依据。

使用 cycle 标签实现隔行变色

对于最常见的隔行变色需求，AnQiCMS 提供了 cycle 标签，它能让您在循环中按照预设的顺序重复输出一组值。这比手动判断 forloop.Counter 的奇偶性要简洁得多。

假设我们定义了两个 CSS 类名 even 和 odd 来分别表示奇数行和偶数行的样式。使用 cycle 标签，我们可以这样实现：

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <li class="{% cycle 'even' 'odd' %}">
        <a href="{{item.Link}}">{{item.Title}}</a>
        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
    </li>
    {% endfor %}
{% endarchiveList %}

在这段代码中，{% cycle 'even' 'odd' %} 会在每次循环时交替输出 'even' 和 'odd' 字符串。第一篇文章会得到 even 类，第二篇是 odd，第三篇又是 even，以此类推，完美实现了隔行变色的效果。您甚至可以提供更多值给 cycle，让它在更长的序列中重复：{% cycle 'class-a' 'class-b' 'class-c' %}。

巧用 add 过滤器进行类名动态拼接

cycle 标签非常适合重复模式，但当我们需要更灵活、基于数字或混合内容的类名时，add 过滤器就派上用场了。add 过滤器主要用于数字或字符串的相加（追加）。在模板中，它能够将不同的值（包括数字和字符串）连接起来，生成新的字符串。这对于动态拼接 CSS 类名非常有用。

add 过滤器使用 {{ obj|add:obj2 }} 的形式，可以将 obj 和 obj2 的值进行追加。如果它们是数字，则进行数学加法；如果其中一方或双方是字符串，则进行字符串拼接。

场景一：为列表项生成带序号的类名

例如，我们想为每篇文章生成一个类似 post-item-1、post-item-2 的类名，以方便 JavaScript 或更精细的 CSS 控制。

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
    <li class="post-item-{{ forloop.Counter|add:'' }}">
        <a href="{{item.Link}}">{{item.Title}}</a>
    </li>
    {% endfor %}
{% endarchiveList %}

这里，forloop.Counter 会输出数字（1, 2, 3…），我们将其与空字符串 '' 进行 add 操作，目的是为了确保 forloop.Counter 被视为字符串进行拼接，从而生成 post-item-1、post-item-2 等类名。当然，根据 AnQiCMS add 过滤器的灵活性，即使直接 {{ 'post-item-'|add:forloop.Counter }} 也会自动将数字转换为字符串进行拼接，效果是一样的。

场景二：结合多个条件和数据拼接复杂类名

我们还可以将 add 过滤器与 if 逻辑判断和 cycle 标签结合起来，创建更复杂的动态类名。

假设我们的需求是：

  1. 所有列表项都有一个基础类 list-item。
  2. 列表中的第一项额外有 is-first 类。
  3. 列表项隔行变色，使用 dark 和 light 类。
  4. 每项还有一个基于其在循环中序号的类，如 item-num-1。

我们可以这样编写模板代码：

”`twig {% archive