在安企CMS模板中,高效地展示列表数据是网站内容运营不可或缺的一部分。无论是展示最新文章、产品列表、分类目录,还是自定义的数据集合,灵活地循环遍历这些数据并进行精细化控制,都能极大地提升网站的表现力和用户体验。安企CMS提供了强大且易于上手的模板引擎,其for循环标签功能丰富,不仅支持基本的遍历,还能轻松实现计数、翻转以及更多高级操作。

核心概念:for 循环的基础用法

在安企CMS模板中,for循环的语法与Django模板引擎非常相似,让熟悉这类语法的用户能够迅速上手。它的基本结构是{% for item in collection %}...{% endfor %}。这里的collection代表您想要遍历的数据集合(例如,通过archiveListcategoryList等标签获取到的数据),而item则是在每次循环中代表当前数据项的临时变量。

例如,如果您想展示最近发布的几篇文章列表,通常会使用archiveList标签获取数据,然后通过for循环进行遍历:

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
        <div class="article-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 %}

在这个例子中,articles是我们通过archiveList获取到的文章集合,article则是在每次循环中代表当前文章对象的变量。您可以根据自己的喜好,将article替换为任何易于理解的变量名,只要保持for语句内部使用该变量即可。

循环中的实用工具:计数与状态

在循环遍历数据时,我们常常需要知道当前是第几次循环,或者还剩下多少项。安企CMS的for循环提供了内置的变量forloop,它包含了当前循环状态的详细信息,其中最常用的是forloop.Counterforloop.Revcounter

  • forloop.Counter: 这个变量会从1开始,随着每次循环递增,表示当前是第几项。这在需要为列表项添加序号、排名或对第一项、最后一项进行特殊处理时非常有用。
  • forloop.Revcounter: 与Counter相反,Revcounter从列表的总项数开始递减,表示当前项距离列表末尾还有多少项(包括当前项)。例如,如果列表中有5项,Revcounter在第一次循环时是5,第二次是4,依此类推,直到最后一项是1。

结合if逻辑判断标签,您可以轻松实现各种条件显示效果。例如,给列表中的第一项添加一个特殊的样式:

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
        <div class="article-item {% if forloop.Counter == 1 %}is-first{% endif %}">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>这是第 {{ forloop.Counter }} 篇文章,还剩下 {{ forloop.Revcounter - 1 }} 篇。</p>
        </div>
    {% endfor %}
{% endarchiveList %}

通过forloop.Counter,您可以清楚地知道当前循环的进度,并据此灵活地调整内容的呈现。

灵活控制顺序:翻转与排序

有时候,我们可能需要以不同的顺序来展示列表数据,比如倒序显示最新内容,或者按某个属性进行排序。安企CMS的for循环也对此提供了简洁的修饰符:reversedsorted

  • reversed: 这个修饰符会简单地将数据集合以相反的顺序进行遍历。如果您从数据库中获取的数据是按时间降序排列的,但您希望在模板中以升序显示,就可以使用reversed
  • sorted: 这个修饰符会对数据集合进行默认的排序(通常是按元素的自然顺序,如数字大小或字母顺序)。请注意,sorted通常用于对简单的集合进行排序。
  • 组合使用:reversed sorted:您可以将这两个修饰符组合使用。在这种情况下,列表会首先被排序,然后再进行翻转。

以下是使用reversed来倒序显示文章列表的示例:

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles reversed %} {# 这里添加 reversed 翻转顺序 #}
        <div class="article-item">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>(倒序显示)发布日期: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</p>
        </div>
    {% endfor %}
{% endarchiveList %}

需要注意的是,sorted修饰符在处理复杂对象集合时,其默认排序行为可能不是您所期望的。对于更复杂的排序需求,您可能需要在后端查询数据时就指定好排序方式,或者在for循环之外进行数据预处理。

处理空列表:empty 标签

当您尝试遍历一个可能为空的列表时,通常会担心页面上出现空白区域或错误。安企CMS的for循环提供了一个empty标签,用于在集合为空时显示备用内容,避免了额外的if判断,使模板代码更加简洁:

{% archiveList articles with type="list" categoryId="999" %} {# 假设分类ID 999下没有文章 #}
    {% for article in articles %}
        <div class="article-item">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
        </div>
    {% empty %} {# 当 articles 集合为空时,显示以下内容 #}
        <p class="no-content">当前分类下暂无文章,敬请期待!</p>
    {% endfor %}
{% endarchiveList %}

这样,即使某个分类下暂时没有内容,您的网站也能友好地提示访问者,而不是显示空白。

高级技巧:整洁的输出与嵌套循环

移除逻辑标签的空行

在模板渲染过程中,for循环或if判断等逻辑标签可能会在最终的HTML输出中产生不必要的空行,影响HTML代码的整洁度。安企CMS提供了一个小技巧来解决这个问题:在标签的开头或结尾添加一个连字符-

  • {%- for ... %}: 移除标签前面的空白。
  • {% endfor -%}: 移除标签后面的空白。

这个小小的改动可以让生成的HTML源码更加紧凑:

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

嵌套循环

对于多级数据结构,比如分类(一级列表)下包含文章(二级列表),您可以使用嵌套的for循环来展示。安企CMS的categoryListarchiveList标签配合使用就能实现这种效果:

”`twig {% categoryList categories with moduleId=“1” parentId=“0” %}

{% for category in categories %}
    <div class="category-section">
        <h2><a href="{{ category.Link }}">{{ category.Title }}</a></h2>
        <ul>
            {% archiveList articles with type="list" categoryId=category.Id limit