如何在 AnQiCMS 模板中遍历数组或切片,并循环显示其中的元素?

在安企CMS的模板世界里,动态地展示内容是构建一个活跃且功能丰富的网站的关键。无论是文章列表、产品展示、导航菜单,还是图片画廊,我们都需要一种机制来遍历数据集合,并将每个元素呈现在页面上。幸运的是,安企CMS的模板引擎提供了直观易用的循环结构,让我们能够轻松实现这一目标。

轻松掌握 for 循环:动态内容展示的基石

安企CMS的模板引擎采用了类似Django的语法,它通过 {% for ... in ... %} 标签来实现对数组或切片的遍历。这个标签允许我们逐一访问数据集合中的每个元素,并根据需要显示它们的内容。

想象一下,你有一组最新的文章或者一系列产品需要展示。通过 for 循环,你可以让模板自动处理这些数据,无需手动逐条添加。基本用法非常简洁明了:

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

在这里,collection 是一个包含多个元素的数组或切片,而 item 则是一个临时变量,它在每次循环中都会被赋值为 collection 中的当前元素。接下来,我们将通过几个实际场景,深入了解如何在安企CMS模板中灵活运用 for 循环。

场景一:构建文章或产品列表

这是最常见的动态内容展示需求。假设我们要在一个页面上显示最新的文章。安企CMS提供了 archiveList 标签来获取文章数据。我们可以这样结合使用:

{% 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 %}

在这个例子中,archiveList 标签获取了最新的5篇文章,并将它们赋值给了 latestArticles 变量。随后,我们使用 {% for article in latestArticles %} 来遍历这个文章集合。在循环内部,article 变量代表每一篇文章,我们可以通过 article.Linkarticle.Titlearticle.Descriptionarticle.CreatedTimearticle.Thumb 等属性,轻松访问并显示文章的标题、链接、简介、发布时间以及缩略图。stampToDate 过滤器则帮助我们将时间戳格式化成易读的日期。

场景二:实现多级导航菜单

网站的导航菜单通常包含多个层级,例如主菜单下有子菜单。安企CMS的 navList 标签可以获取导航数据,并且其返回的每个导航项可能包含一个 NavList 属性,表示其子菜单。这正是嵌套 for 循环大显身手的地方:

{% 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 %}

这里,外层循环遍历所有顶级导航项,而内层循环则在 {% if item.NavList %} 条件判断为真时,遍历当前顶级导航项的子导航。这种嵌套结构使得我们能够灵活地构建任意深度的多级导航菜单,完美地适配网站的结构需求。

场景三:展示图片组图或画廊

在很多情况下,一个文章或产品会关联多张图片,形成一个组图或画廊。安企CMS中的 archiveDetailcategoryDetail 标签,在通过 name="Images" 参数获取时,可以直接返回一个图片URL的切片。遍历这个切片,即可轻松构建图片展示:

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

在这里,productImages 变量直接包含了图片URL的切片。我们无需额外的处理,直接使用 {% for imageUrl in productImages %} 即可逐个取出图片链接,并渲染成 <img> 标签,从而实现一个简洁的图片画廊。

掌握 for 循环的附加技巧

除了基本的遍历功能,安企CMS的 for 循环还提供了一些实用的辅助特性,让内容展示更加灵活:

  • 处理空数据:{% empty %} 当你的数据集合可能为空时,使用 {% empty %} 标签可以优雅地显示一条提示信息,