如何在AnQiCMS模板中使用`for`循环标签遍历并显示内容列表?

在AnQiCMS中,高效地展示内容列表是网站运营中的核心需求。无论是文章、产品、分类,还是自定义数据,我们都需要一套灵活的机制来遍历并呈现这些信息。AnQiCMS强大的模板引擎提供了for循环标签,它就像一个得力的助手,能帮助我们轻松实现这一目标。

认识AnQiCMS模板中的for循环标签

AnQiCMS的模板语法借鉴了Django模板引擎,因此对于熟悉类似Blade或Jinja2语法的用户来说,上手会非常快。for循环标签是其核心之一,用于遍历数组或切片(slice)等集合型数据,并对其中的每一个项目进行处理。

一个基本的for循环结构是这样的:

{% for item in collection %}
    {# 在这里处理每个“item”的信息 #}
{% endfor %}

在这里,item是一个临时变量,它在每次循环时都会被赋予collection中当前项目的值。collection则是您希望遍历的数据集合。当所有项目都被遍历完成后,循环就会结束。

处理空列表的情况

有时候,我们获取到的数据集合可能是空的。为了避免页面显示空白或报错,for循环提供了一个非常实用的{% empty %}标签,用于在集合为空时显示一段提示信息:

{% for item in collection %}
    {# 正常显示内容 #}
{% empty %}
    <p>抱歉,这里还没有内容。</p>
{% endfor %}

掌握循环的进度:forloop变量

for循环内部,AnQiCMS还提供了forloop变量,让您能够更好地控制循环的显示逻辑。其中最常用的包括:

  • forloop.Counter:表示当前循环的迭代次数,从1开始计数。这在需要为列表项添加序号或特定样式时非常有用。
  • forloop.Revcounter:表示当前循环剩余的迭代次数,从总数倒数开始计数。

例如,您可以这样使用它们:

{% for item in archives %}
    <li class="{% if forloop.Counter == 1 %}active{% endif %}">
        <span>第 {{ forloop.Counter }} 篇,剩余 {{ forloop.Revcounter }} 篇</span>
        <h3>{{ item.Title }}</h3>
    </li>
{% empty %}
    <p>没有找到任何文章。</p>
{% endfor %}

此外,for循环还支持reversedsorted修饰符,它们可以分别用来颠倒列表顺序或根据内部元素的默认排序规则进行排序。

for循环提供数据:内容列表标签

for循环本身只是一个处理逻辑,它需要“喂给”它数据才能发挥作用。在AnQiCMS中,这些数据通常由一系列专用的内容列表标签提供,它们会从数据库中查询并组织好数据,以集合(数组/切片)的形式返回。

常用的内容列表标签包括:

  • archiveList:用于获取文章、产品等文档列表。它功能强大,可以根据模型ID、分类ID、推荐属性、排序方式和显示数量等多种条件来筛选数据。
  • categoryList:用于获取分类列表,比如文章分类或产品分类。它支持获取顶级分类、子分类或兄弟分类。
  • pageList:用于获取单页列表,如“关于我们”、“联系方式”等页面。
  • tagDataList:用于获取指定Tag下的文档列表。
  • linkList:用于获取友情链接列表。
  • bannerList:用于获取首页Banner图列表。

这些标签在使用时,通常会将查询结果赋值给一个您指定的变量,然后这个变量就可以作为for循环的collection来使用了。

实践操作:如何展示您的内容列表

现在,让我们通过几个具体的例子,看看如何在AnQiCMS模板中使用for循环来遍历并显示内容列表。

示例一:展示最新发布的文章列表

假设您想在首页侧边栏展示最新的5篇文章。

{# 使用 archiveList 标签获取文章列表,类型为 "list",限制数量为 5 篇 #}
{% archiveList latestArticles with type="list" limit="5" order="id desc" %}
    <div class="latest-articles">
        <h2>最新文章</h2>
        <ul>
            {# 遍历 latestArticles 集合 #}
            {% for article in latestArticles %}
                <li>
                    <a href="{{ article.Link }}" title="{{ article.Title }}">
                        {% if article.Thumb %}
                            <img src="{{ article.Thumb }}" alt="{{ article.Title }}" class="article-thumb">
                        {% endif %}
                        <span class="article-title">{{ article.Title }}</span>
                        <span class="article-date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                    </a>
                </li>
            {% empty %}
                <li>暂无最新文章。</li>
            {% endfor %}
        </ul>
    </div>
{% endarchiveList %}

在这个例子中,latestArticles是我们用archiveList标签获取到的文章集合,然后for article in latestArticles会遍历这个集合。article.Linkarticle.Title等是每个文章项目所拥有的属性。stampToDate是一个实用的时间格式化过滤器,可以将时间戳转换为易读的日期格式。

示例二:展示带有子分类的导航菜单

许多网站都有多级分类导航,我们可以利用categoryList和嵌套的for循环来实现。

{# 获取文章模型的顶级分类 #}
{% categoryList mainCategories with moduleId="1" parentId="0" %}
    <nav class="main-navigation">
        <ul>
            {% for category in mainCategories %}
                <li class="nav-item {% if category.HasChildren %}has-dropdown{% endif %}">
                    <a href="{{ category.Link }}">{{ category.Title }}</a>
                    {# 判断是否有子分类,如果有则再进行一次循环 #}
                    {% if category.HasChildren %}
                        <ul class="dropdown-menu">
                            {# 获取当前分类的子分类 #}
                            {% categoryList subCategories with parentId=category.Id %}
                                {% for subCategory in subCategories %}
                                    <li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li>
                                {% endfor %}
                            {% endcategoryList %}
                        </ul>
                    {% endif %}
                </li>
            {% empty %}
                <li>暂无分类。</li>
            {% endfor %}
        </ul>
    </nav>
{% endcategoryList %}

这里我们首先获取顶级分类,然后在每个顶级分类的循环中,检查它是否拥有子分类(通过category.HasChildren)。如果存在,则再次使用categoryList获取其子分类,并通过内层for循环显示。

示例三:实现内容分页显示

对于需要大量内容展示的页面,如文章列表页,分页是不可或缺的。archiveList配合pagination标签可以轻松实现。

”`twig {# 获取当前分类下的文章分页列表,每页显示10篇 #} {% archiveList paginatedArchives with type=“page” limit=“10” %}

<div class="article-list">
    {% for item in paginatedArchives %}
        <article class="article-card">
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p class="description">{{ item.Description }}</p>
            <div class="meta">
                <span>发布于:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>