How to use the `for` loop tag in AnQiCMS template to iterate and display content list?

In AnQiCMS, efficiently displaying content lists is a core requirement for website operation.Whether it is articles, products, categories, or custom data, we need a flexible mechanism to traverse and present this information.forLoop tags, it's like a helpful assistant that can help us easily achieve this goal.

Get to know the AnQiCMS template inforLoop tags

AnQiCMS's template syntax is based on the Django template engine, so it will be very quick for users familiar with similar syntaxes like Blade or Jinja2.forLoop tags are one of the core features, used to iterate over collections such as arrays or slices and process each item.

A basicforThis is how the loop structure looks:

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

Here, itemIt is a temporary variable, which is assignedcollectionthe value of the current item in it.collectionThe collection you want to iterate through. The loop will end once all items have been traversed.

Handling the case of an empty list.

Sometimes, the dataset we get may be empty. To avoid the page from displaying blank or crashing,forLoop provides a very practical{% empty %}Label used to display a prompt when the collection is empty:

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

Progress of mastering the loop:forloopVariable

InforInside the loop, AnQiCMS also provides:forloopVariables, allowing you to better control the display logic of loops. The most commonly used include:

• forloop.Counter: Represents the current iteration of the loop, starting from 1. This is very useful when you need to add numbers or specific styles to list items.
• forloop.RevcounterIt indicates the remaining number of iterations in the current loop, counting from the total backwards.

For example, you can use them like this:

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

Furthermore,forLoops also supportreversedandsortedModifiers, they can be used separately to reverse the order of the list or to sort according to the default sorting rules of the internal elements.

WithforLoop to provide data: content list label

forThe loop itself is just a processing logic, it needs to be "fed" data to work.In AnQiCMS, this data is usually provided by a series of dedicated content list tags, which query and organize the data from the database and return it as a collection (array/slice).

Common content list tags include:

• archiveList: Used to retrieve a list of documents such as articles, products, etc.It is powerful and can filter data based on various conditions such as model ID, category ID, recommendation attributes, sorting method, and display quantity.
• categoryListUsed to get category lists, such as article categories or product categories. It supports getting top-level categories, subcategories, or sibling categories.
• pageListUsed to retrieve a single-page list, such as 'About Us', 'Contact Information', and other pages.
• tagDataListUsed to retrieve the document list under a specified Tag.
• linkListUsed to retrieve the list of friendship links.
• bannerList: Used to get the list of home page banner images.

These tags, when used, usually assign the query results to a variable you specify, and then this variable can be used asforrepeatedlycollectionUsed.

Practice operation: How to display your content list

Now, let's look at how to use the AnQiCMS template through several specific examples.forLoop to traverse and display the content list.

Example one: Display the list of the latest published articles.

Suppose you want to display the latest 5 articles in the home page sidebar.

{# 使用 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 %}

In this example,latestArticlesWe usearchiveListThe collection of articles obtained by the tag, thenfor article in latestArticlesIt will iterate over this collection.article.Link/article.TitleAre the properties owned by each article item.stampToDateIt is a practical time formatting filter that can convert timestamps into readable date formats.

Example two: Display a navigation menu with subcategories.

Many websites have multi-level category navigation, we can utilizecategoryListand nestedforcycles to achieve.

{# 获取文章模型的顶级分类 #}
{% 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 %}

We first obtain the top-level category, then in each loop of the top-level category, check if it has a subcategory (throughcategory.HasChildren). If it exists, use it againcategoryListGet its subcategory and display through the inner layerforDisplay in a loop.

Example three: Implement content pagination display

Pagination is indispensable for pages that require a large amount of content display, such as article list pages.archiveListcooperatepaginationTags can be easily implemented.

”`twig {# Get the pagination list of articles under the current category, with 10 articles per page #} {% 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>