How to use the (for) loop tag in AnQiCMS template to traverse and display the content list?

Use efficiently in AnQiCMS templateforDisplaying content list with loop tags, which is an indispensable core skill for building dynamic websites. By using it flexiblyforLoop, we can easily traverse various types of data collections and display them on the website page in a customized style, whether it is a news list, product display, category navigation, or any other repetitive content block, ...forEvery loop can help you a hand.

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

AnQiCMS template basic review

AnQiCMS's template system draws on the syntax of the Django template engine, which is simple and efficient as a whole. In the template file, we mainly encounter two types of tags:

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

Understanding these basic syntax is to useforthe premise of the loop.

forThe core function of the loop tag

forThe loop tag is used to iterate over an iterable object (such as an array, slice, or list), and in each iteration, the current element is assigned to a specified variable so that its properties can be accessed and displayed within the loop body.This allows us to use a template code to dynamically render multiple contents.

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,itemwhich 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 list, etc.) will return a可供forThe collection of data to be traversed. Let's take a common requirement as an example: displaying the list of the latest released documents.

First, we need to usearchiveListTag 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 todocVariable.
  • In the loop body, we use{{ doc.Link }}/{{ doc.Title }}/{{ doc.Description }}/{{ doc.Thumb }}Access the link, title, description, and thumbnail of the current document.
  • {{ stampToDate(doc.CreatedTime, "2006-01-02") }}demonstrates how to usestampToDateThe auxiliary label formats the document's creation timestamp into a readable date.

EnhanceforPractical tips for loops

forLoops are not limited to simple iteration, they also provide some very useful auxiliary functions and advanced usage, making your content display more flexible.

1. Handling an empty list (emptyblock statement)

When the data set may be empty,forrepeatedlyemptythe statement block can provide friendly prompt information rather than displaying a blank area. This is crucial for enhancing the 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, the page will display the prompt

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

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

  • forloop.Counter: The serial number of the current iteration starting from 1.
  • forloop.Revcounter: The reverse order index starting from the total number of the collection currently iterated over.

This is needed when adding numbers to list items, or applying different styles to even/odd rows.