How to iterate over a list of data in a template and display each item sequentially?

Manage and display content in AnQi CMS is one of its core advantages.When we need to present dynamic list data on the website front-end, such as the latest articles, popular products, and content collections under categories, understanding how to efficiently iterate through these data and display them one by one is an indispensable skill for website operators and template developers.

The template system of Anqi CMS adopts syntax similar to Django, which is intuitive and powerful, making the transformation of technical information and practical application extremely convenient.

Core loop syntax:{% for %}tags

The main tool for iterating over list data in the AnQi CMS template is{% for ... in ... %}Loop tags. Its basic structure is very clear:

{% for item in list_data %}
    {# 在这里放置你想要为每个列表项显示的内容 #}
    {{ item.Field1 }}
    {{ item.Field2 }}
    {# ...更多字段... #}
{% endfor %}

Here,list_datarepresented the list data source you want to iterate over,itemis a temporary variable for the current list item in each loop. You can name it anything you like,itemlike, for example,article/product/categoryEnglish, to improve the readability of the code.

This loop label must be followed by{% endfor %}to indicate the end of the loop block.

Data source: The bridge from the background to the template

Auto CMS provides various tags to obtain lists of different types of data, they are.{% for %}Loop data source:

  1. Document list (archiveList)： This is the most commonly used one, used to obtain document data such as articles, products, etc. For example, to display the latest 10 articles, you can get the data like this:

    {% archiveList archives with type="list" limit="10" order="id desc" %}
    {# 在这里遍历 'archives' 变量 #}
{% endarchiveList %}

    Here are thearchivesis what we areforThe loop can uselist_data.archiveListLabels provide rich parameters for filtering and sorting data, such as:

    • moduleId：Specify the content model ID (for example, article model ID is 1, product model ID is 2).
    • categoryId：Filter content by category ID.
    • limit：Control the number of items displayed, can also be used"offset,limit"The form to skip the preceding data.
    • type: Specifies the list type,"list"Used for ordinary lists,"page"Used for paginated lists (to be used with)paginationTag).
    • order: Specifies the sorting method, such as"id desc"（Sorted by ID in descending order, i.e., the most recently published）.

  2. Category list (categoryList)： If you need to display the classification structure of the website, such as the navigation menu or the sidebar of the classification page,categoryListtags are very useful:

    {% categoryList categories with moduleId="1" parentId="0" %}
    {# 在这里遍历 'categories' 变量 #}
{% endcategoryList %}

    moduleIdUsed to specify the content model belonging to the category.parentId="0"Used to get the top-level category.

In addition to the above two, Anqi CMS also providespageList(Single-page list),tagList(Tag list)、linkList(Friendship link)、navList(navigation list) and other tags, which also follow{% SomeList list_var %} ... {% endSomeList %}The structure allows you to easily retrieve various data.

Get and display the detailed information of the list items.

Once you have passed through{% for item in list_data %}Enter the loop,itemThe variable represents the current list item being processed. You can use it to.Operators to accessitemThe various properties (fields). These fields are usually corresponding to the fields you fill in when managing content in the background, for example:

  • {{ item.Title }}: Displays the title of the current item.
  • {{ item.Link }}：显示当前项的链接。
  • {{ item.Description }}：显示当前项的简介。
  • {{ item.Thumb }}or{{ item.Logo }}：显示当前项的缩略图或封面图。
  • {{ item.Views }}：显示当前项的浏览量。
  • {{ item.CreatedTime }}：显示当前项的创建时间。

It is worth noting that forCreatedTimethese timestamp fields, AnQi CMS providesstampToDateFilter, it can be formatted into a more readable date and time. For example, to format a timestamp into the “year-month-day” format, you can write it like this:{{ stampToDate(item.CreatedTime, "2006-01-02") }}

If a field in a list item may contain HTML content (such as part of an article detail), to ensure that these HTML is correctly parsed and not displayed as plain text, you need to use|safeFilter:{{ item.Content|safe }}

Handle empty data:{% empty %}the elegant way

Imagine if your list data source is empty due to some conditions, but you don't want to leave a blank page on the screen. At this time,{% for %}Tags{% empty %}The clause can be put to use. It allows you to display a friendly prompt when the list is empty:

{% for item in archives %}
    {# 列表有数据时显示的内容 #}
{% empty %}
    <p>抱歉，目前没有相关内容可供显示。</p>
{% endfor %}

Practice Case: Build a content list

Below, let's look at a common example of an article list to see how these concepts can be combined:

<div class="article-list">
    {% archiveList latestArticles with type="list" moduleId="1" limit="5" order="id desc" %}
        {% for article in latestArticles %}
        <div class="article-item">
            <a href="{{ article.Link }}" title="{{ article.Title }}">
                {% if article.Thumb %} {# 判断是否有缩略图 #}
                <img src="{{ article.Thumb }}" alt="{{ article.Title }}" class="article-thumb">
                {% endif %}
                <h3>{{ article.Title|truncatechars:30 }}</h3> {# 截取标题到30个字符 #}
            </a>
            <p class="article-description">
                {{ article.Description|truncatewords:50 }} {# 截取简介到50个单词 #}
            </p>
            <div class="article-meta">
                <span>发布于: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量: {{ article.Views }}</span>
                {% comment %} 假设Category是另一个需要获取详情的标签 {% endcomment %}
                <span>分类: <a href="{% categoryDetail with name='Link' id=article.CategoryId %}">{% categoryDetail with name='Title' id=article.CategoryId %}</a></span>
            </div>
        </div>
        {% empty %}
        <p>目前还没有任何文章发布。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

In this example, we demonstrate:

  • How