How to iterate over an array or slice in AnQiCMS template and display the elements in a loop?

In the template world of AnQi CMS, dynamically displaying content is the key to building an active and feature-rich website.Whether it is an article list, product display, navigation menu, or image gallery, we need a mechanism to traverse the data set and display each element on the page.It is fortunate that the template engine of Anqi CMS provides an intuitive and easy-to-use loop structure, allowing us to easily achieve this goal.

Easy to masterforLoop: The Foundation of Dynamic Content Display

The template engine of AnQi CMS adopts a syntax similar to Django, it is through{% for ... in ... %}The tag is used to iterate over arrays or slices. This tag allows us to access each element in the data collection one by one and display their content as needed.

Imagine you have a set of the latest articles or a series of products to display.forThe loop allows you to let the template automatically handle these data, without manually adding each one. The basic usage is very simple and clear:

{% for item in collection %}
    {# 在这里，'item' 代表'collection'中的每一个元素 #}
    {# 我们可以通过 'item.属性名' 来访问元素的具体数据 #}
    <p>{{ item.Title }}</p>
{% endfor %}

Here,collectionis an array or slice containing multiple elements, whileitemis a temporary variable, it is assigned a value in each loopcollectionThe current element. Next, we will delve into several practical scenarios to understand how to flexibly use them in the Anqi CMS template.forLoop.

Scenario one: Building article or product lists

This is the most common dynamic content display requirement. Suppose we want to display the latest articles on a page. AnQi CMS providesarchiveListTag to get article data. We can use it like this:

{% archiveList latestArticles with type="list" limit="5" %}
    <ul class="article-list">
        {% for article in latestArticles %}
            <li>
                <a href="{{ article.Link }}" title="{{ article.Title }}">
                    <h3>{{ article.Title }}</h3>
                    <p>{{ article.Description }}</p>
                    <span>发布于：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                </a>
                {% if article.Thumb %}
                    <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endarchiveList %}

In this example,archiveListTag got the latest 5 articles and assigned them to:latestArticlesthe variable. Then, we use{% for article in latestArticles %}To iterate through this article collection.articleThe variable represents each article, and we can access and display the title, link, introduction, publish time, and thumbnail of the article.article.Link/article.Title/article.Description/article.CreatedTimeandarticle.ThumbEtc. properties, easily access and display the title, link, introduction, publish time, and thumbnail of the article.stampToDateThe filter helps us format timestamps into readable dates.

Scenario two: Implementing a multi-level navigation menu.

The website's navigation menu usually contains multiple levels, such as submenus under the main menu. The Anqi CMS'snavListLabels can retrieve navigation data, and each navigation item returned may contain oneNavListattribute representing its submenu. This is where the nested loop shinesforto its full potential:

{% navList mainNav %}
    <nav class="main-navigation">
        <ul>
        {% for item in mainNav %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.NavList %} {# 检查当前导航项是否有子导航 #}
                    <ul class="sub-menu">
                    {% for subItem in item.NavList %}
                        <li class="{% if subItem.IsCurrent %}active{% endif %}">
                            <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                        </li>
                    {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
        </ul>
    </nav>
{% endnavList %}

Here, the outer loop traverses all top-level navigation items, while the inner loop{% if item.NavList %}The condition is true, traverse the child navigation of the current top-level navigation item.This nested structure allows us to flexibly build multi-level navigation menus of any depth, perfectly fitting the structural needs of the website.

Scene three: Display a group of images or a gallery

In many cases, an article or product may be associated with multiple images, forming a set of photos or gallery. In the Ante CMS,archiveDetailorcategoryDetailtags, in passing,name="Images"Parameters can be directly returned as a slice of an image URL. Traverse this slice to easily build an image display: English

{% archiveDetail productImages with name="Images" %}
    {% if productImages %} {# 确保有图片数据 #}
        <div class="product-gallery">
            {% for imageUrl in productImages %}
                <img src="{{ imageUrl }}" alt="产品图片展示">
            {% endfor %}
        </div>
    {% endif %}
{% endarchiveDetail %}

Here,productImagesThe variable directly contains the image URL slice. No additional processing is required, just use{% for imageUrl in productImages %}to extract each image link one by one and render it.<img>Tag, thus to achieve a simple image gallery.

MasterforAdditional techniques for the loop

In addition to the basic iteration function, the Aiqi CMS'sforLoop also provides some practical auxiliary features to make content display more flexible:

• Handle empty data:{% empty %}Use it when your dataset may be empty:{% empty %}Tags can elegantly display a prompt message,