AnQiCMS如何利用“循环遍历标签（for）”在模板中显示动态数据列表？

网站内容需要不断更新，比如展示最新的文章、产品、用户评论或导航菜单等，这些动态数据往往以列表的形式呈现。在安企CMS中，利用其强大的模板引擎和直观的“循环遍历标签（for）”，我们可以轻松地将这些后台数据呈现在网站前端，让您的网站充满活力。

安企CMS的模板引擎借鉴了Django模板语法的简洁与高效，使得即使是初次接触的开发者也能快速上手。其中，“循环遍历标签（for）”就是我们用来处理动态数据列表的核心工具，它能帮助我们遍历各种集合类型的数据，并逐一展示其内容。

初识“循环遍历标签（for）”

“循环遍历标签（for）”的基础语法非常直观：

{% for item in collection %}
    {# 在这里显示每一个 item 的内容 #}
{% endfor %}

在这里，collection 指的是一个包含多项数据的集合，比如从后台获取的文章列表、产品列表或者分类列表。而 item 则代表了集合中的每一项独立数据，在循环的每一次迭代中，item 都会被赋值为集合中的下一个元素。通过这种方式，我们就可以访问 item 对象的各种属性，例如 {{ item.Title }}（文章标题）或 {{ item.Link }}（文章链接），并将其呈现在页面上。

举个简单的例子，如果我们要显示一个最新的文章列表，可能会这样写：

{% archiveList archives with type="list" limit="5" %}
    {% for article in archives %}
        <div class="latest-article">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>{{ article.Description }}</p>
        </div>
    {% endfor %}
{% endarchiveList %}

这段代码首先通过 archiveList 标签获取了最新的5篇文章，并将它们存储在 archives 变量中。随后，for 循环遍历 archives 中的每一篇文章，将其命名为 article，并在循环体内展示了每篇文章的标题、链接和简介。

进阶用法：让列表更智能

“循环遍历标签（for）”并非只能做简单的遍历，它还提供了多种灵活的选项，让您的列表展示更加智能和多样化。

巧妙处理空数据：{% empty %} 的温馨提示

有时候，我们获取的数据列表可能为空。这时，如果页面上没有任何提示，用户体验会大打折扣。for 循环的 {% empty %} 子句正是为此设计：

{% for item in archives %}
    <div class="item-display">{{ item.Title }}</div>
{% empty %}
    <p>抱歉，目前没有找到相关内容。</p>
{% endfor %}

当 archives 列表非空时，循环照常执行；如果 archives 为空，那么 {% empty %} 之间的内容就会被显示出来，给用户一个友好的反馈。

定制循环顺序：reversed 和 sorted 的魔法

您可能希望列表数据以特定的顺序展示。for 循环支持 reversed（倒序）和 sorted（排序）修饰符：

• reversed：将集合中的元素以相反的顺序进行遍历。例如，{% for item in archives reversed %}。
• sorted：通常用于对数字或字符串列表进行升序排序。例如，{% for item in numbers sorted %}。

这使得您可以轻松控制内容的展示逻辑，比如最新的内容在顶部，或者按照浏览量从高到低排列。

数据交替显示：cycle 标签的色彩游戏

在设计表格或列表时，我们经常需要实现奇偶行交替显示不同样式（例如不同的背景色）。cycle 标签可以帮助您在每次循环中按顺序输出预设的值：

{% for item in archives %}
    <div class="row-{% cycle 'odd' 'even' %}">
        {{ item.Title }}
    </div>
{% endfor %}

每次循环，cycle 会依次输出 'odd' 和 'even'，为您的列表增添视觉上的层次感。

获取循环信息：forloop.Counter 和 forloop.Revcounter

在循环体内，您还可以访问一些特殊的变量来获取当前循环的状态：

• forloop.Counter：表示当前迭代的次数，从 1 开始计数。
• forloop.Revcounter：表示从当前迭代到循环结束还剩余多少次，从 总数 开始倒计数。

这在需要给列表项编号或者根据位置应用特定样式时非常有用：

{% for article in archives %}
    <div class="article-item {% if forloop.Counter == 1 %}featured{% endif %}">
        <span>{{ forloop.Counter }}.</span>
        <a href="{{ article.Link }}">{{ article.Title }}</a>
    </div>
{% endfor %}

这里，我们不仅为每篇文章添加了序号，还给第一篇文章额外加了一个 featured 类名。

实际案例：动态数据列表展示

安企CMS的“循环遍历标签（for）”与各种内容标签结合，可以灵活地构建各种动态列表。

文章列表：最常见的应用场景

除了上面展示的简单文章列表，我们还可以结合更多的文章字段，构建内容更丰富的列表：

{% archiveList articles with type="page" limit="10" categoryId="1" %}
    {% for item in articles %}
    <div class="post-card">
        {% if item.Thumb %}
        <a href="{{ item.Link }}" class="post-thumbnail">
            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
        </a>
        {% endif %}
        <div class="post-content">
            <h2 class="post-title"><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p class="post-excerpt">{{ item.Description|truncatechars:100 }}</p>
            <div class="post-meta">
                <span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量：{{ item.Views }}</span>
                <span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
            </div>
        </div>
    </div>
    {% empty %}
    <p>此分类下暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

这个例子展示了一个包含缩略图、标题、摘要、发布时间、阅读量和所属分类的文章列表。其中 archiveList 标签指定了要获取的分类ID为1，并开启了分页模式。

分类和导航：构建多层级菜单

对于网站的分类菜单，我们通常需要展示多层级的结构。通过嵌套使用 categoryList 标签和 for 循环，可以轻松实现：

{% categoryList mainCategories with moduleId="1" parentId="0" %}
    <ul class="main-menu">
    {% for mainCat in mainCategories %}
        <li>
            <a href="{{ mainCat.Link }}">{{ mainCat.Title }}</a>
            {% if mainCat.HasChildren %}
            <ul class="sub-menu">
                {% categoryList subCategories with parentId=mainCat.Id %}
                {% for subCat in subCategories %}
                    <li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
                {% endfor %}
                {% endcategoryList %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
    </ul>
{% endcategoryList %}

这里，外层循环遍历顶级分类，内层循环则判断每个顶级分类是否有子分类 (mainCat.HasChildren)，如果有，就再获取并遍历其子分类，从而构建出清晰的多级导航结构。

其他动态数据：友情链接、Banner 等

for 循环的通用性意味着它能用于安企CMS中任何以列表形式提供的数据。例如，您可以利用 linkList 标签和 for 循环展示友情链接，或者用 bannerList 标签展示首页轮播图：

”`twig {# 友情链接列表 #}

{% linkList links %}
    {% for link in links %}
        <a href