如何在AnQiCMS模板中使用`for`循环遍历数据并显示内容?

在AnQiCMS模板开发中,我们经常需要展示一系列动态内容,例如最新的文章列表、产品分类、导航菜单项,甚至是自定义参数。这时,“for循环”就成为了我们遍历这些数据并将其展示在网页上的核心工具。理解并熟练运用for循环,将极大提升模板的灵活性和开发效率。

核心语法:遍历数据的基石

在AnQiCMS模板中,for循环的语法简洁直观,它借鉴了Django模板引擎的风格。基本的结构是使用 {% for item in collection %} 来开始循环,并用 {% endfor %} 来结束循环。这里的 collection 是你希望遍历的数据集合,而 item 则是一个临时的变量名,在每次循环中代表集合中的当前元素。

举个例子,假设我们希望展示最新的几篇文章。我们可以使用archiveList标签获取文章数据,然后通过for循环逐一展示:

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
        <div class="news-item">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>{{ article.Description }}</p>
            <span>发布日期:{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% endfor %}
{% endarchiveList %}

在这个例子中,archiveList标签将获取到的文章列表赋值给articles变量,然后{% for article in articles %}会依次将articles中的每个文章对象赋值给article变量。在循环体内部,我们就可以通过 {{ article.Title }}{{ article.Link }} 等方式访问当前文章的各项属性,比如标题、链接、描述和创建时间。

灵活掌控循环:特殊变量与实用技巧

AnQiCMS的for循环不仅限于简单地遍历数据,它还提供了一些特殊的内置变量和语法结构,帮助我们更好地控制循环的逻辑和展示效果。

当我们在循环中需要知道当前是第几次迭代时,forloop.Counter变量就派上用场了。它会返回当前循环的从1开始的索引值。如果您需要从列表末尾开始计数,forloop.Revcounter则会返回从集合总数倒序的从1开始的索引。例如,我们想给第一个文章项添加一个特殊的样式类:

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
        <div class="news-item {% if forloop.Counter == 1 %}featured-article{% endif %}">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>当前第{{ forloop.Counter }}篇,总共剩余{{ forloop.Revcounter }}篇未展示。</p>
        </div>
    {% endfor %}
{% endarchiveList %}

此外,如果您的数据集合可能为空,您不希望页面上出现空白区域,而是展示一个友好的提示信息,可以使用{% empty %}标签。这个标签必须紧跟在for循环体之后,{% empty %}中的内容只会在collection为空时显示。

{% archiveList articles with type="list" categoryId="10" limit="5" %}
    {% for article in articles %}
        <div class="product-card">
            <h4>{{ article.Title }}</h4>
            <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
        </div>
    {% empty %}
        <p>当前分类下还没有任何产品哦,敬请期待!</p>
    {% endfor %}
{% endarchiveList %}

实战演练:常见数据类型的遍历

接下来,让我们通过几个实际的场景,看看如何在AnQiCMS模板中有效地使用for循环遍历不同类型的数据。

遍历文章列表

正如前面提到的,遍历文章列表是最常见的需求之一。我们可以结合archiveList标签的各种参数,比如按分类ID、推荐属性或排序方式来获取不同文章集合,然后进行展示。

{# 假设我们想展示置顶推荐(flag="f")的文章,并按发布时间倒序排列 #}
<div class="featured-articles">
    <h2>特别推荐</h2>
    {% archiveList topArticles with type="list" flag="f" order="id desc" limit="3" %}
        {% for item in topArticles %}
            <div class="card">
                <img src="{{ item.Logo }}" alt="{{ item.Title }}">
                <h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
                <p>{{ item.Description|truncatechars:80 }}</p>
                <span>阅读量: {{ item.Views }}</span>
            </div>
        {% endfor %}
    {% empty %}
        <p>暂无推荐文章。</p>
    {% endarchiveList %}
</div>

遍历分类列表

在构建网站导航或分类模块时,经常需要遍历网站的分类数据。categoryList标签可以帮助我们获取分类,并支持获取多级分类。

{# 获取所有顶级分类(parentId="0"),并展示其名称和链接 #}
<ul class="main-categories">
    {% categoryList categories with moduleId="1" parentId="0" %}
        {% for category in categories %}
            <li>
                <a href="{{ category.Link }}">{{ category.Title }}</a>
                {# 如果当前分类有子分类,我们可以进一步嵌套循环展示 #}
                {% if category.HasChildren %}
                    <ul class="sub-categories">
                        {% categoryList subCategories with parentId=category.Id %}
                            {% for subCategory in subCategories %}
                                <li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    {% endcategoryList %}
</ul>

遍历导航菜单

网站的导航菜单通常需要动态生成,navList标签能够获取后台配置的导航数据。由于导航可能有多级,这里同样可以利用for循环嵌套来处理。

{# 遍历主导航菜单 #}
<nav class="main-nav">
    <ul>
        {% navList mainNavs with typeId=1 %} {# 假设 typeId=1 是主导航的ID #}
            {% for navItem in mainNavs %}
                <li class="{% if navItem.IsCurrent %}active{% endif %}">
                    <a href="{{ navItem.Link }}">{{ navItem.Title }}</a>
                    {% if navItem.NavList %} {# 如果有子导航 #}
                        <ul class="sub-nav">
                            {% for subNavItem in navItem.NavList %}
                                <li class="{% if subNavItem.IsCurrent %}active{% endif %}">
                                    <a href="{{ subNavItem.Link }}">{{ subNavItem.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

更进一步:进阶用法小瞥

AnQiCMS的for循环还支持一些修饰符,以实现更复杂的遍历需求:

  • reversed: 在for标签后面加上reversed可以反转遍历顺序。例如:{% for item in collection reversed %}
  • sorted: 默认情况下,如果collection是一个可排序的Go slice,加上sorted可以对其进行排序。例如:{% for item in collection sorted %}
  • cycle: cycle标签可以在每次循环中轮流输出预设的值,这对于实现斑马线效果或轮播图中的不同类名非常有用。例如:{% cycle 'odd' 'even' as rowClass %} 结合 class="{{ rowClass }}"

总结

for循环是AnQiCMS模板中处理列表数据不可或缺的工具。通过它,我们可以轻松地遍历文章、分类、导航等各类信息,并结合循环变量和条件判断,实现多样化的内容展示。掌握这些基本用法,将帮助您更高效、更灵活地构建和维护AnQiCMS网站模板。


常见问题 (FAQ)

  1. 问:如何在for循环中获取当前循环的索引(例如,判断是否是第一项或最后一项)? 答:您可以使用特殊的内置变量forloop.Counter来获取从1开始的当前循环索引,例如{% if forloop.Counter == 1 %}...{% endif %}。如果需要从列表末尾开始倒数,可以使用forloop.Revcounter

  2. 问:如果我遍历的数据集合可能为空,如何显示自定义提示信息而不是空白页面? 答:在{% for ... %}{% endfor %}标签之间,您可以插入一个{% empty %}标签。当数据集合为空时,{% empty %}标签内的内容就会被渲染出来,替代空的循环结果。

  3. **问:我如何在循环中访问文章的自定义