How to use loop (for) tags in AnQiCMS templates to iterate and display content lists?

In AnQiCMS template, use efficientlyforLoop tags to display content lists, which is an essential core skill for building dynamic websites. By using flexiblyforLoop, we can easily iterate through various types of data collections and present them in a customized style on the website page, whether it is a news list, product display, category navigation, or any other repetitive content block,forLoops can always give you a helping hand.

Next, we will delve into how to use AnQiCMS templatesforLoop tags, from basic usage to advanced techniques, to help you better organize and display website content.

AnQiCMS Template Basics Review

AnQiCMS's template system borrows the syntax of Django template engine, which is overall simple and efficient. In the template files, we mainly encounter two types of tags:

  • Variable output:Use double curly braces{{ 变量名称 }}to display data content. For example,{{ item.Title }}will output the title of the list item.
  • Tag control:Use single curly braces and percent signs{% 标签名称 参数 %}Perform logical control, such as conditional judgment, loop traversal, etc. All control tags must have a corresponding end tag, such as{% if ... %}Corresponding{% endif %},{% for ... %}Corresponding{% endfor %}.

Understanding these basic syntax is essential for usingforThe premise of the loop.

forThe core function of the loop tag.

forThe role of the loop tag is to iterate over an iterable object (such as an array, slice, or list), and in each iteration, to assign the current element to a specified variable for accessing and displaying the properties of the element within the loop body.This allows us to dynamically render multiple contents with a single template code.

Its basic structure is usually like this:

{% for item in collection %}
    {# 在这里，你可以使用 item 变量来访问当前遍历到的数据项的属性 #}
    {{ item.Property1 }}
    {{ item.Property2 }}
{% endfor %}

Here,collectionIt is a list that contains multiple data items.itemIt is a temporary variable representing the current data item in each loop.

forThe basic usage and examples of loops

In AnQiCMS, various content list tags (such asarchiveListDocument list,categoryListCategory list,pageListsingle-page lists, etc.) will return a可供forThe data collection for loop iteration. Let's take a common requirement as an example: displaying the list of the latest released documents.

Firstly, we need to usearchiveListLabel to get the document collection. Suppose we want to get the latest 5 documents under the category with ID 1:

{% archiveList documents with type="list" categoryId="1" limit="5" %}
    {% for doc in documents %}
        <div>
            <h3><a href="{{ doc.Link }}">{{ doc.Title }}</a></h3>
            <p>{{ doc.Description }}</p>
            <p>发布时间: {{ stampToDate(doc.CreatedTime, "2006-01-02") }}</p>
            <img src="{{ doc.Thumb }}" alt="{{ doc.Title }}">
        </div>
    {% endfor %}
{% endarchiveList %}

In this example:

  • {% archiveList documents with ... %}Got a nameddocumentsdocument collection.
  • {% for doc in documents %}Start traversing this collection, each iteration assigns the current document todoca variable.
  • Within the loop, we use{{ doc.Link }}/{{ doc.Title }}/{{ doc.Description }}/{{ doc.Thumb }}to access the current document's link, title, description, and thumbnail.
  • {{ stampToDate(doc.CreatedTime, "2006-01-02") }}to demonstrate how to usestampToDateThe auxiliary label formats the document's creation timestamp into a readable date.

EnhancedforPractical tips for loops

forThe loop is not limited to simple iteration, it also provides some very useful auxiliary functions and advanced usage, making your content display more flexible.

1. Handle empty list (emptystatement block)

When the data set may be empty,forLoopingemptythe statement block can provide friendly prompt information instead of displaying a blank area. This is crucial for enhancing user experience.

{% archiveList documents with type="list" categoryId="999" limit="5" %}
    {% for doc in documents %}
        <div>
            <h3><a href="{{ doc.Link }}">{{ doc.Title }}</a></h3>
            <p>...</p>
        </div>
    {% empty %}
        <p>抱歉，当前分类下暂无文档。</p>
    {% endfor %}
{% endarchiveList %}

IfdocumentsThe collection is empty, and the page will display the prompt “Sorry, there are no documents under the current category.”.

2. Get the loop index and reverse index (forloopvariable)

Inside the loop, the system will automatically provide a specialforloopvariable that contains some useful information about the current loop:

  • forloop.Counter: The sequence number of the current iteration, starting from 1.
  • forloop.Revcounter: The reverse order index starting from the total number of iterations in the set.

This is used when you need to add numbers to list items or apply different styles to even/odd rows.