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

在AnQiCMS模板中，动态地展示列表数据是构建丰富网站内容的核心操作之一。无论是展示最新的文章、热门产品、分类列表，还是任何自定义的内容集合，for循环标签都是您的得力助手。它让您能够轻松遍历数据，并根据需求定制每一项的显示方式。

理解for循环标签的基础

for循环标签是AnQiCMS模板引擎中用于遍历集合数据的一种控制结构。它的基本语法非常直观：

{% for 变量名 in 集合 %}
    <!-- 在这里编写您希望重复显示的内容 -->
{% endfor %}

在这里，集合是您要遍历的列表数据，而变量名是在每次循环中代表当前数据项的临时名称。例如，如果您有一个文章列表archives，您可以这样使用for循环：

{% for article in archives %}
    <h3>{{ article.Title }}</h3>
    <p>{{ article.Description }}</p>
{% endfor %}

在每次循环中，article变量会依次指向archives列表中的每一篇文章数据，您可以利用{{ article.字段名 }}的语法来访问当前文章的各项属性，比如标题（Title）和描述（Description）。

获取列表数据：for循环的基石

在AnQiCMS中，for循环能够遍历的数据通常来自各种列表标签，例如archiveList（文档列表）、categoryList（分类列表）、pageList（单页列表）和tagDataList（标签关联文档列表）等。这些标签负责从后台获取和组织数据，然后将结果传递给for循环进行渲染。

以archiveList（文档列表）为例，它提供了丰富的参数来帮助您精确地筛选和排序数据。一些常用的参数包括：

  • moduleId：指定要获取哪个内容模型（如文章模型或产品模型）的文档。
  • categoryId：指定要获取哪个分类下的文档。如果您希望获取所有子分类的文档，可以保持默认值；如果只想获取当前分类的文档，可以明确指定child=false。
  • limit：控制返回的文档数量，例如limit="10"将只显示10条。
  • order：定义排序规则，比如order="id desc"（按ID倒序，即最新发布）、order="views desc"（按浏览量倒序，即最热门）。
  • type：指定列表类型，type="list"用于不分页的固定数量列表，type="page"用于需要分页的列表（通常结合pagination标签使用）。

在使用for循环之前，您需要先用这些标签获取到数据集合。例如，要获取最新的10篇文章列表，您可以这样写：

{% archiveList archives with moduleId="1" order="id desc" limit="10" %}
    <!-- 这里的archives变量就是for循环的数据源 -->
    {% for item in archives %}
        <!-- 循环显示文章内容 -->
    {% endfor %}
{% endarchiveList %}

在这个例子中，archives就是我们通过archiveList标签获取到的文章数据集合，随后被for循环用来遍历。

遍历并显示列表数据：实战演练

现在我们结合archiveList和for循环，来展示如何显示一个文章列表。假设我们需要在网站首页展示最新的5篇文章，包括它们的标题、链接、发布时间、缩略图和摘要。

<div class="latest-articles">
    <h2>最新文章</h2>
    <ul>
        {% archiveList articles with moduleId="1" order="id desc" limit="5" %}
            {% for item in articles %}
                <li>
                    <a href="{{ item.Link }}">
                        {% if item.Thumb %}
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                        {% endif %}
                        <h3>{{ item.Title }}</h3>
                    </a>
                    <p class="summary">{{ item.Description }}</p>
                    <p class="meta">
                        发布于：{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}
                        浏览量：{{ item.Views }}
                    </p>
                </li>
            {% empty %}
                <p>暂无最新文章。</p>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

在这个例子中：

  • 我们使用archiveList获取了文章列表，并将其命名为articles。
  • {% for item in articles %}开始循环，item代表当前文章。
  • {{ item.Link }}、{{ item.Title }}、{{ item.Thumb }}分别获取文章的链接、标题和缩略图。
  • {% if item.Thumb %}用于判断是否存在缩略图，避免空图片标签。
  • {{ item.Description }}显示文章摘要。
  • {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}则使用了AnQiCMS提供的stampToDate函数来格式化文章的发布时间戳。
  • {{ item.Views }}显示文章的浏览量。
  • {% empty %}块在articles列表为空时提供友好的提示。

提升用户体验：for循环的进阶用法

for循环不仅仅能简单遍历数据，它还内置了一些特殊的变量和修饰符，帮助您实现更精细的控制。

循环状态变量

在for循环内部，有一些特殊的变量可以帮助您了解当前循环的状态：

  • forloop.Counter：表示当前循环的索引，从1开始计数。
  • forloop.Revcounter：表示当前循环从末尾开始的索引，从1开始计数。

这在需要为列表中的第一个、最后一个或特定位置的元素添加特殊样式时非常有用。

{% for item in articles %}
    <li {% if forloop.Counter == 1 %}class="first-item"{% endif %}>
        <!-- 内容 -->
        <p>这是第 {{ forloop.Counter }} 篇文章，距离末尾还有 {{ forloop.Revcounter }} 篇。</p>
    </li>
{% endfor %}

循环修饰符

您还可以对for循环的遍历方式进行修饰：

  • reversed：以相反的顺序遍历集合。
  • sorted：对集合进行排序后再遍历（适用于可排序的集合，如数字或字符串列表）。
<!-- 按发布时间从旧到新显示 -->
{% archiveList articles with moduleId="1" order="id asc" limit="5" %}
    {% for item in articles %}
        <!-- 内容 -->
    {% endfor %}
{% endarchiveList %}

<!-- 如果数据集合本身是无序的，但您想在模板中进行反向遍历 -->
{% for item in some_other_list reversed %}
    <!-- 内容 -->
{% endfor %}

处理空数据：{% empty %}块

当您获取的数据集合可能为空时，使用{% empty %}块可以优雅地处理这种情况，而不是显示空白页面或错误。

”`html {% archiveList search_results with moduleId=“1” q=“关键字” type=“list” limit=“10” %}

{% for item in search_results %}
    <p>搜索结果：{{ item.Title }}</p>
{% empty %}
    <p>抱歉，没有找到符合您条件的文章。</p