How to iterate over an array or slice in AnQiCMS template and loop through its elements?

In the world of AnQi CMS templates, 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.lucky enough, Anqi CMS's template engine provides an intuitive and easy-to-use loop structure, allowing us to easily achieve this goal.

Master it easilyforLoop: The Foundation of Dynamic Content Display

The Anqi CMS template engine uses a syntax similar to Django, it goes through{% for ... in ... %}Tags are 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. ThroughforLoop, you can let the template automatically handle these data without manually adding them one by one. The basic usage is very simple and clear:

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

Here, collectionIt is an array or slice containing multiple elements, anditemThis is a temporary variable, which is assigned a value in each loopcollectionOf the current element. Next, we will delve deeper into how to flexibly use the Anqi CMS template through several real-life scenariosforLoop.

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 webpage. Anqi CMS providesarchiveListThe tag 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,archiveListThe tag got the latest 5 articles and assigned them to:latestArticlesthe variable. Subsequently, we use{% for article in latestArticles %}To iterate over the article collection. Inside the loop,articleThe variable represents each article, we can access and display the title, link, summary, publication time, and thumbnail of the article througharticle.Link/article.Title/article.Description/article.CreatedTimeandarticle.Thumbthese properties, easily accessing and displaying the title, link, summary, publication 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. Anqi CMS'snavListLabels can retrieve navigation data, and each returned navigation item may contain aNavListattribute indicating its submenu. This is where nestedfor loops really come into play:

{% 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 %}When the condition is true, traverse the sub-navigation of the current top-level navigation item.This nested structure allows us to flexibly build multi-level navigation menus of any depth, perfectly adapting to the structural requirements of the website.

Scenario three: display a group of images or a gallery

In many cases, an article or product may be associated with multiple images to form a collage or gallery. In AnQi CMS,archiveDetailorcategoryDetailtags are used to filter byname="Images"When obtaining parameters, you can directly return a slice of an image URL. Traverse this slice to easily build an image display:

{% 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 picture URL slice. We do not need any additional processing, just use{% for imageUrl in productImages %}We can extract the picture links one by one and render them into<img>Tags to achieve a simple image gallery.

MasterforAdditional techniques for loops

In addition to the basic traversal functions, the Anqi CMS'sforLoops also provide some practical auxiliary features to make content display more flexible:

• Handle empty data:{% empty %}When your data set may be empty, use:{% empty %}Labels can elegantly display a tip message,