How to use a loop (for tag) to iterate and display a content list?

In Anqi CMS, we frequently deal with content lists whether it is displaying article lists, product catalogs, navigation menus, or friend links.To dynamically display this content on the website front-end, powerful looping functions are indispensable.forTag) to iterate and display your content list.

forThe core syntax of Tag: Make content dynamic

The template syntax of Anqi CMS is similar to Django and Blade, very intuitive. When you need to handle a set of data, forTags are your helpful assistant. Its basic structure is very simple:

{% for item in collection %}
    {# 在这里显示每个item的详细信息 #}
{% endfor %}

Here,collectionrefers to the set of content you want to iterate over, such as througharchiveListorcategoryListthe article list or category list obtained by tags.itemIt represents the current element in the collection in each iteration, you can accessitemto display specific content.

For example, suppose you want to display the latest few article titles and links:

{% archiveList latestArticles with type="list" limit="5" %}
    <ul class="article-list">
    {% for article in latestArticles %}
        <li>
            <a href="{{ article.Link }}">{{ article.Title }}</a>
        </li>
    {% endfor %}
    </ul>
{% endarchiveList %}

In this example,latestArticlesis througharchiveListto get the list of articles in the tag.forin the loop,articleThe variable represents an article in each iteration. We can accessarticle.Linkthe article link througharticle.Titleaccess the article title and display it on the webpage.

Traverse content list: take document list as an example

Document list is one of the most common dynamic content on a website. ThrougharchiveListTags, we can easily obtain document data under articles, products, and other models, and then display them in a loop.forLoop to display.

For example, you want to display a list of documents under a category, including title, introduction, and publish time:

{% archiveList documents with categoryId="1" type="list" limit="10" %}
    <div class="documents-section">
    {% for doc in documents %}
        <div class="document-item">
            <h3><a href="{{ doc.Link }}">{{ doc.Title }}</a></h3>
            <p>{{ doc.Description }}</p>
            <p class="meta">发布时间：{{ stampToDate(doc.CreatedTime, "2006-01-02") }}</p>
            {% if doc.Thumb %}
                <img src="{{ doc.Thumb }}" alt="{{ doc.Title }}" class="document-thumbnail">
            {% endif %}
        </div>
    {% endfor %}
    </div>
{% empty %}
    <p>当前分类下没有可用的文档。</p>
{% endarchiveList %}

Here, we usearchiveListGot 10 documents with category ID 1 infor doc in documentsthe loop:

  • doc.Linkanddoc.TitleThe document link and title are provided.
  • doc.DescriptionUsed to display the document summary.
  • doc.CreatedTimeIs a timestamp, we coordinate it withstampToDatetags to format it into a readable date.
  • doc.ThumbThe thumbnail of the document is displayed, andifcheck if the image exists by label.

Useful tips in the loop

To make your content display more flexible and beautiful, the Anqi CMS'sforLabels also provide some practical auxiliary functions.

  1. Handling empty list:emptytagsWhen your content collection may be empty,emptylabels can be useful. Ifforthere is nothing to iterate over in the loopitemso thatemptyThe content within the tag will be displayed, avoiding blank pages or errors.

    {% for item in someList %}
    {# 列表内容 #}
{% empty %}
    <p>暂时没有相关内容可供显示。</p>
{% endfor %}

  2. Get loop number:forloop.Counterandforloop.RevcounterInside the loop,forloop.CounterCan get the current loop number (starting from 1),forloop.RevcounterThen get the remaining number of items in the current loop until the end. This is very useful when you need to apply different styles to specific items (such as the first item or the last item).

    {% for item in documents %}
    <div class="document-item {% if forloop.Counter == 1 %}first-item{% endif %}">
        <span class="item-number">{{ forloop.Counter }}.</span>
        <h3>{{ item.Title }}</h3>
    </div>
{% endfor %}

  3. Adjust the traversal order:reversedandsortedSometimes you may need to display content in a different order.reversedKeywords allow you to iterate over a collection in reverse.sortedKeywords can sort a collection (applies to sortable types).

    {# 倒序显示文章 #}
{% for article in latestArticles reversed %}
    ...
{% endfor %}


{# 排序显示文章（通常结合后台排序参数更常用） #}
{% for article in latestArticles sorted %}
    ...
{% endfor %}

    However, in AnQi CMS, we usually specify the sorting method througharchiveListof the tagsorderparameters, which is more direct and efficient.

  4. to display different content at intervals:cycletagsIf you want to alternate values in a loop, such as setting different background colors for odd and even rows of a list,cycleTags are a good choice.

    {% for item in documents %}
    <div class="document-item {% cycle "odd" "even" %}">
        {# ... 内容 ... #}
    </div>
{% endfor %}

    then the first item will getodda class, the second item getsevena class, and the third item goes back toodd. Continue in this manner.

  5. Clean code: Remove unnecessary blank linesTo maintain the simplicity of generated HTML, you can utilize{%-and-}Remove extra blank lines before and after the tag. This is especially useful when generating a large number of elements in a loop.

    {% for item in documents -%}
    <div class="document-item">
        {# ... 内容 ... #}
    </div>
{%- endfor %}

Nested loops: handling multi-level data

When dealing with multi-level categories or complex data structures, nested loops are indispensable.For example, you can first traverse the top-level categories, and then traverse the subcategories or documents belonging to each top-level category within them.

{% categoryList mainCategories with moduleId="1" parentId="0" %}
    <nav class="main-nav">
    {% for mainCat in mainCategories %}
        <div class="main-category">
            <h4><a href="{{ mainCat.Link }}">{{ mainCat.Title }}</a></h4>
            {% if mainCat.HasChildren %}
                <ul class="sub-category-list">
                {% categoryList subCategories with parentId=mainCat.Id %}
                    {% for subCat in subCategories %}
                        <li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
                    {% endfor %}
                {% endcategoryList %}
                </ul>
            {% endif %}
        </div>
    {% endfor %}
    </nav>
{% endcategoryList %}

This example demonstrates how