How to iterate over list data in a template and display it one by one?

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

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

Core loop syntax:{% for %}Tag

In AnQi CMS templates, the main tool for iterating over list data is:{% for ... in ... %}Loop tags. Their basic structure is very clear:

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

here,list_dataRepresents the list data source you need to iterate over, anditemis the temporary variable for the current list item in each iteration. You can name it anything you like, for exampleitem.article/product/categoryto enhance code readability.

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

Data source: the bridge from backend to template.

Our company's CMS provides various tags to obtain different types of data lists, they are{% for %}The data source in loop:

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

    HerearchivesIt is what we areforcan be used in the looplist_data.archiveListTags provide rich parameters for filtering and sorting data, such as:

    • moduleIdSpecify the content model ID (for example, article model ID is 1, product model ID is 2).
    • categoryIdFilter content based on category ID.
    • limitControl the number of displays, also can use."offset,limit"Skip the previous data in the form.
    • typeSpecify the list type,"list"Used for normal lists,"page"Used for paginated lists (to be used withpaginationtags).
    • orderSpecify the sorting method, such as"id desc"(Descending by ID, i.e., most recent).

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

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

    moduleIdused to specify the content model of the classification,parentId="0"Used to obtain the top-level category.

In addition to the above two, Anqi CMS also providespageList(Single-page list),tagList(Tag list),linkList(Friend links),navListtags such as (navigation list), which also follow{% SomeList list_var %} ... {% endSomeList %}structure, allowing you to easily obtain various data.

Retrieve and display the details of the list item

Once you pass{% for item in list_data %}Enter the loop,itemThe variable represents the current list item being processed. You can access.by using the operatoritemVarious properties (fields). These fields are usually related 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 }}: Displays the link of the current item.
  • {{ item.Description }}: Display the current item's introduction.
  • {{ item.Thumb }}or{{ item.Logo }}: Display the thumbnail or cover image of the current item.
  • {{ item.Views }}: Display the number of views of the current item.
  • {{ item.CreatedTime }}: Display the creation time of the current item.

It is worth noting that,CreatedTimeThis timestamp field is provided by Anqi CMSstampToDateA filter that can format it into a more readable date and time. For example, to format a timestamp into the format “Year-Month-Day”, 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 the HTML in an article detail), in order to ensure that these HTML is parsed correctly rather than displayed as plain text, you need to use|safeFilter:{{ item.Content|safe }}

Handle empty data:{% empty %}The Art of Elegance

Imagine if your list data source is empty due to certain conditions, but you don't want the page to be left blank. At this point,{% for %}label's{% empty %}The clause comes in handy. It allows you to display a friendly prompt when the list is empty:

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

Practical case: Build a content list

Below, let's go through a common article list example 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 show:

  • How