如何在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-lightbg-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的数组 #}