How does the AnQiCMS template loop through arrays or objects to display list data?

In AnQi CMS template system, the core lies in understanding the Django-like template syntax, especiallyforThe application of loop tags. This mechanism makes the presentation of dynamic content intuitive and efficient, whether it is for article lists, category navigation, or product display, it can respond flexibly.

Core mechanism:forThe use of loops

Data traversal in AnQi CMS template mainly relies on{% for ... in ... %}This structure.When you get a set of data from the backend (whether it's a collection of articles, a category array, or a custom list), they are usually passed to the template as an array or an iterable object.

For example, if you get a group named by a tag such asarchiveListorcategoryList)itemsThe data, you can start your traversal like this:

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

In the above code:

  • itemsThe collection of data (array or slice) you get from the backend.
  • itemis a temporary variable that represents the individual data element in the current loop iteration. In each loop,itemis automatically updated toitemsthe next element in it.
  • {{ item.Title }}and{{ item.Link }}is to access the currentitemobject that contains theTitleandLinkProperties. These property names are usually consistent with the field names you define in the Anqi CMS backend.

Common application scenarios and tag practices

The Anqi CMS provides rich tags to retrieve different types of data lists, and the data obtained by these tags is very suitable for useforloop to iterate and display:

  1. Display article or product list (archiveList) archiveListTags are a powerful tool for retrieving lists of articles, products, and other content. You can specify categories, sorting, and quantity parameters. For example, you can retrieve a list of the latest articles under a specific category: 

    {% 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 %}

    here,article.DescriptionMay contain HTML, using|truncatechars:100The filter can safely extract text and avoid destroying the HTML structure.stampToDateThe filter then formats the timestamp into a readable date.

  2. Display category navigation (categoryList)When building the navigation menu or sidebar category list of a website,categoryListtags are very useful. It supports the acquisition of multi-level categories:

    <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>

    In this example, we show how to build multi-level navigation by nestingforand use loopscategory.IsCurrentto add styles to the current category.

  3. Display the site navigation menu (navList)The menu configured in the "Website Navigation Settings" can be accessed throughnavListLabel and traverse:

    <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. Display custom fields or image collectionsWhen your content model includes a custom image collection field (such as for displaying multiple images on an article detail page) or when you need to display a specific parameter list on the page, you can also useforLoop:

    {# 假设文章有一个名为“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 %}

    Here, currentArchive.galleryImagesIt is an array of image URLs directly,archiveParamsThen return an array containing properties,NameandValueFor unified display. An array of objects with properties,

Enhanced list display: conditional judgment and auxiliary functions

During the traversal of data, you may encounter some special requirements, such as displaying different content based on conditions, numbering list items, or handling empty lists:

  • Conditional judgment (if): Pass{% if ... %}Label, you can decide whether to render specific content or apply different styles based on the value of a certain attribute of a data item.

    {% 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.CounterIs a special variable inside the loop, indicating the current loop number (starting from 1). Similarly,forloop.RevcounterMeans starting from the end.