如何在AnQiCMS模板中使用for循环遍历数据并显示？

AnQiCMS以其灵活强大的模板系统，让内容的展示变得高效而富有表现力。对于网站运营者和开发者而言，掌握如何在模板中遍历和显示数据，是解锁其强大功能、让网站内容“活”起来的关键一步。今天，我们就来深入探讨如何在AnQiCMS模板中使用for循环，让你的动态数据轻松呈现。

AnQiCMS的模板引擎采用了类似Django的语法，这使得熟悉其他主流模板语言的用户也能快速上手。在模板中，当你需要展示一系列相同结构的数据时，比如文章列表、产品分类、导航菜单或图片集等，for循环便是你的得力助手。

循环的骨架：基础语法入门

for循环最基本的形式是遍历一个数据集合（如数组或列表），并对其中的每个元素执行相同的操作。它的语法非常直观：

{% for 变量名 in 集合 %}
    {# 在这里放置你希望对每个元素执行的代码 #}
    {{ 变量名.属性 }}
{% endfor %}

在这里，集合是你希望遍历的数据集，而变量名则是在每次循环中代表当前元素的临时名称。比如，如果你有一个名为archives的文章列表，你可以这样遍历它：

{% archiveList archives with type="list" limit="5" %}
    {% for article in archives %}
        <div class="article-item">
            <h2><a href="{{ article.Link }}">{{ article.Title }}</a></h2>
            <p>{{ article.Description }}</p>
            <span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% endfor %}
{% endarchiveList %}

这段代码会从archives集合中逐一取出文章数据，并在每次循环中，将当前文章的标题、链接、描述和发布日期显示出来。

处理空列表：{% empty %}的妙用

有时候，你遍历的数据集合可能为空。如果直接显示，页面可能会出现空白。AnQiCMS的for循环提供了一个{% empty %}子句，让你能够优雅地处理这种情况：

{% archiveList recentPosts with type="list" limit="3" %}
    {% for post in recentPosts %}
        <div class="post-card">
            <h3><a href="{{ post.Link }}">{{ post.Title }}</a></h3>
        </div>
    {% empty %}
        <p>暂时没有最新文章发布。</p>
    {% endfor %}
{% endarchiveList %}

如果recentPosts集合中有数据，它会正常显示文章卡片；如果没有，则会显示“暂时没有最新文章发布。”的提示，避免页面显得空洞。

增强循环功能：排序与倒序

AnQiCMS的for循环还支持一些实用的修饰符，让你能更灵活地控制数据的显示顺序。你可以在for标签后直接加上reversed来倒序遍历，或者使用sorted对数据进行排序（如果集合中的元素是可排序的数值类型）：

{# 倒序显示文章列表 #}
{% archiveList latestNews with type="list" limit="5" %}
    {% for news in latestNews reversed %}
        <div class="news-item">{{ news.Title }}</div>
    {% endfor %}
{% endarchiveList %}

{# 假设有一个数字列表`numberList`，对其进行排序 #}
{% for num in numberList sorted %}
    <span>{{ num }}</span>
{% endfor %}

这些修饰符可以帮助你在不改变原始数据获取逻辑的前提下，轻松调整数据在前端的展现方式。

洞察循环进度：forloop对象的实用属性

在for循环内部，你还可以访问一个特殊的forloop对象，它提供了关于当前循环状态的各种实用信息。其中最常用的是：

• forloop.Counter: 当前循环的迭代次数，从1开始计数。
• forloop.Revcounter: 当前循环剩余的迭代次数。
• forloop.First: 如果当前是循环的第一个元素，则为true。
• forloop.Last: 如果当前是循环的最后一个元素，则为true。

利用这些属性，你可以为列表中的特定元素添加独特的样式或行为：

{% archiveList products with type="list" limit="4" %}
    {% for product in products %}
        <div class="product-card {% if forloop.First %}first-item{% endif %} {% if forloop.Last %}last-item{% endif %}">
            <h3>{{ forloop.Counter }}. {{ product.Title }}</h3>
            <img src="{{ product.Thumb }}" alt="{{ product.Title }}">
        </div>
    {% endfor %}
{% endarchiveList %}

在这个例子中，第一个产品卡片会被添加first-item类，最后一个则被添加last-item类，并且每个产品会显示其在列表中的序号。

创造性展示：{% cycle %}标签

{% cycle %}标签允许你在循环中轮流输出不同的值。这对于实现斑马线效果（奇偶行不同背景色）、轮播图中的不同动画类等场景非常有用：

{% archiveList items with type="list" limit="6" %}
    {% for item in items %}
        <div class="item-row {% cycle 'bg-light' 'bg-dark' %}">
            <p>{{ item.Title }}</p>
        </div>
    {% endfor %}
{% endarchiveList %}

每次循环，item-row会交替获得bg-light和bg-dark类，从而轻松实现视觉上的交替效果。

实战演练：常见场景下的for循环应用

了解了基础和进阶用法后，让我们看看几个AnQiCMS中常见的for循环应用场景。

1. 动态导航菜单

一个典型的网站通常有多级导航，for循环可以很好地处理这种嵌套结构。navList标签可以获取导航数据，通过判断item.NavList是否存在，来实现二级甚至多级菜单的渲染。

<nav>
    <ul>
        {% navList mainNav with typeId=1 %}
            {% for item in mainNav %}
                <li {% if item.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %} {# 如果有子导航 #}
                        <ul class="submenu">
                            {% for subItem in item.NavList %}
                                <li {% if subItem.IsCurrent %}class="active"{% endif %}>
                                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

这里我们用一个外层for循环处理一级导航，再用一个内层for循环处理二级导航。item.IsCurrent可以帮你判断当前链接是否被选中，方便添加高亮样式。

2. 文章/产品列表展示

无论是首页的热门文章、分类页的产品列表，for循环都是核心。结合archiveList标签，你可以轻松展示包含图片、简介、日期的动态列表。

<div class="article-list">
    {% archiveList articles with type="list" moduleId="1" limit="10" order="views desc" %}
        {% for article in articles %}
            <article>
                {% if article.Thumb %}
                    <a href="{{ article.Link }}"><img src="{{ article.Thumb }}" alt="{{ article.Title }}"></a>
                {% endif %}
                <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
                <p>{{ article.Description|truncatechars:100 }}</p>
                <div class="meta">
                    <span>{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                    <span>阅读量：{{ article.Views }}</span>
                </div>
            </article>
        {% empty %}
            <p>很抱歉，当前没有找到相关内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

这里我们获取了浏览量最高的10篇文章，并利用article.Thumb判断是否有缩略图，article.Description|truncatechars:100对描述进行截断。

3. 展示图片组图或附件列表

在文章或产品详情页，如果内容模型中包含了图片组图或附件字段，通常它们也是以列表形式存储的。你可以直接遍历这些字段来展示。

”`twig {# 假设archive.Images是一个图片URL的数组 #}

{% archiveDetail currentImages with name="Images" %}
{% if currentImages %}
    {% for imageUrl in currentImages %}
        <a href="{{ imageUrl }}" data-lightbox="gallery">
            <img src="{{ imageUrl }}" alt="图片展示">
        </a>
    {% end