AnQiCMS模板如何循环遍历数组或对象来显示列表数据？

在安企CMS的模板系统中，要循环遍历数组或对象并显示列表数据，核心在于理解其Django-like的模板语法，特别是for循环标签的运用。这一机制让动态内容的呈现变得直观而高效，无论是文章列表、分类导航还是产品展示，都能灵活应对。

核心机制：for 循环的运用

安企CMS模板中的数据遍历，主要依赖于{% for ... in ... %}这一结构。当您从后台获取到一组数据（无论是文章集合、分类数组还是自定义的列表），它们通常会作为数组或可迭代的对象传递给模板。

例如，如果您通过某个标签（如archiveList或categoryList）获取了一组名为 items 的数据，您可以这样开始您的遍历之旅：

{% for item in items %}
    {# 在这里，您可以访问当前循环中的每个“item”的属性 #}
    <p>数据标题：{{ item.Title }}</p>
    <a href="{{ item.Link }}">查看详情</a>
{% endfor %}

在上述代码中：

  • items 是您从后端获取到的数据集合（数组或切片）。
  • item 是一个临时变量，代表了当前循环迭代中的单个数据元素。在每次循环中，item 都会自动更新为items中的下一个元素。
  • {{ item.Title }} 和 {{ item.Link }} 则是访问当前item对象所包含的Title和Link属性。这些属性的名称通常与您在安企CMS后台配置时所定义的字段名相对应。

常见应用场景与标签实践

安企CMS提供了丰富的标签来获取不同类型的数据列表，这些标签获取到的数据都非常适合用for循环来遍历显示：

  1. 显示文章或产品列表 (archiveList) archiveList标签是获取文章、产品等内容列表的利器。您可以指定分类、排序、数量等参数。例如，获取某个分类下的最新文章列表：

    {% archiveList latestArticles with categoryId="1" order="id desc" limit="5" %}
    {% for article in latestArticles %}
        <div class="article-item">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>{{ article.Description | truncatechars:100 }}</p> {# 截取前100个字符作为简介 #}
            <small>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }} 阅读量：{{ article.Views }}</small>
        </div>
    {% endfor %}
{% endarchiveList %}

    这里，article.Description可能包含HTML，使用|truncatechars:100过滤器可以安全地截取文本，并避免破坏HTML结构。stampToDate过滤器则将时间戳格式化为易读的日期。

  2. 显示分类导航 (categoryList) 构建网站的导航菜单或侧边栏分类列表时，categoryList标签非常有用。它支持多级分类的获取：

    <ul class="main-nav">
    {% categoryList topCategories with moduleId="1" parentId="0" %} {# 获取文章模块的顶级分类 #}
        {% for category in topCategories %}
            <li {% if category.IsCurrent %}class="active"{% endif %}>
                <a href="{{ category.Link }}">{{ category.Title }}</a>
                {% if category.HasChildren %} {# 判断是否有子分类 #}
                    <ul class="sub-nav">
                        {% categoryList subCategories with parentId=category.Id %} {# 获取当前分类的子分类 #}
                            {% for subCategory in subCategories %}
                                <li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    {% endcategoryList %}
</ul>

    在这个例子中，我们展示了如何通过嵌套for循环来构建多级导航，并利用category.IsCurrent来为当前所在分类添加样式。

  3. 显示站点导航菜单 (navList) 后台“网站导航设置”中配置的菜单，可以通过navList标签获取并遍历：

    <nav>
    {% navList mainNav with typeId="1" %} {# 假设typeId=1是主导航 #}
        <ul>
            {% for navItem in mainNav %}
                <li {% if navItem.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ navItem.Link }}">{{ navItem.Title }}</a>
                    {% if navItem.NavList %} {# 如果有子菜单 #}
                        <ul class="dropdown-menu">
                            {% for subNavItem in navItem.NavList %}
                                <li><a href="{{ subNavItem.Link }}">{{ subNavItem.Title }}</a></li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endnavList %}
</nav>

  4. 显示自定义字段或图片集合 当您的内容模型中包含自定义的图片集合字段（例如在文章详情页中用于展示多图）或需要在页面上显示特定的参数列表时，同样可以使用for循环：

    {# 假设文章有一个名为“galleryImages”的自定义多图字段 #}
{% archiveDetail currentArchive with name="galleryImages" %}
    {% if currentArchive.galleryImages %}
        <div class="image-gallery">
            {% for image in currentArchive.galleryImages %}
                <img src="{{ image }}" alt="图集图片">
            {% endfor %}
        </div>
    {% endif %}
{% endarchiveDetail %}


{# 循环显示文章的自定义参数 #}
{% archiveParams customParams %}
    <ul class="article-params">
        {% for param in customParams %}
            <li>{{ param.Name }}：{{ param.Value }}</li>
        {% endfor %}
    </ul>
{% endarchiveParams %}

    在这里，currentArchive.galleryImages直接是一个图片URL的数组，archiveParams则返回一个包含Name和Value属性的对象数组，方便您统一展示。

增强列表显示：条件判断与辅助功能

在遍历数据的过程中，您可能会遇到一些特殊需求，例如根据条件显示不同内容、对列表项进行编号或处理空列表：

  • 条件判断 (if)：通过{% if ... %}标签，您可以根据数据项的某个属性值来决定是否渲染特定内容，或者应用不同的样式。

    {% for item in articles %}
    {% if forloop.Counter == 1 %} {# 为列表中的第一个元素添加特殊样式 #}
        <li class="featured-article">
    {% else %}
        <li>
    {% endif %}
            <a href="{{ item.Link }}">{{ item.Title }}</a>
        </li>
{% endfor %}

    forloop.Counter是循环内部的特殊变量，表示当前循环的序号（从1开始）。类似地，forloop.Revcounter表示从末尾开始的