AnQiCMS如何利用“循环遍历标签(for)”在模板中显示动态数据列表?

网站内容需要不断更新,比如展示最新的文章、产品、用户评论或导航菜单等,这些动态数据往往以列表的形式呈现。在安企CMS中,利用其强大的模板引擎和直观的“循环遍历标签(for)”,我们可以轻松地将这些后台数据呈现在网站前端,让您的网站充满活力。

安企CMS的模板引擎借鉴了Django模板语法的简洁与高效,使得即使是初次接触的开发者也能快速上手。其中,“循环遍历标签(for)”就是我们用来处理动态数据列表的核心工具,它能帮助我们遍历各种集合类型的数据,并逐一展示其内容。

初识“循环遍历标签(for)”

“循环遍历标签(for)”的基础语法非常直观:

{% for item in collection %}
    {# 在这里显示每一个 item 的内容 #}
{% endfor %}

在这里,collection 指的是一个包含多项数据的集合,比如从后台获取的文章列表、产品列表或者分类列表。而 item 则代表了集合中的每一项独立数据,在循环的每一次迭代中,item 都会被赋值为集合中的下一个元素。通过这种方式,我们就可以访问 item 对象的各种属性,例如 {{ item.Title }}(文章标题)或 {{ item.Link }}(文章链接),并将其呈现在页面上。

举个简单的例子,如果我们要显示一个最新的文章列表,可能会这样写:

{% archiveList archives with type="list" limit="5" %}
    {% for article in archives %}
        <div class="latest-article">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>{{ article.Description }}</p>
        </div>
    {% endfor %}
{% endarchiveList %}

这段代码首先通过 archiveList 标签获取了最新的5篇文章,并将它们存储在 archives 变量中。随后,for 循环遍历 archives 中的每一篇文章,将其命名为 article,并在循环体内展示了每篇文章的标题、链接和简介。

进阶用法:让列表更智能

“循环遍历标签(for)”并非只能做简单的遍历,它还提供了多种灵活的选项,让您的列表展示更加智能和多样化。

巧妙处理空数据:{% empty %} 的温馨提示

有时候,我们获取的数据列表可能为空。这时,如果页面上没有任何提示,用户体验会大打折扣。for 循环的 {% empty %} 子句正是为此设计:

{% for item in archives %}
    <div class="item-display">{{ item.Title }}</div>
{% empty %}
    <p>抱歉,目前没有找到相关内容。</p>
{% endfor %}

archives 列表非空时,循环照常执行;如果 archives 为空,那么 {% empty %} 之间的内容就会被显示出来,给用户一个友好的反馈。

定制循环顺序:reversedsorted 的魔法

您可能希望列表数据以特定的顺序展示。for 循环支持 reversed(倒序)和 sorted(排序)修饰符:

  • reversed:将集合中的元素以相反的顺序进行遍历。例如,{% for item in archives reversed %}
  • sorted:通常用于对数字或字符串列表进行升序排序。例如,{% for item in numbers sorted %}

这使得您可以轻松控制内容的展示逻辑,比如最新的内容在顶部,或者按照浏览量从高到低排列。

数据交替显示:cycle 标签的色彩游戏

在设计表格或列表时,我们经常需要实现奇偶行交替显示不同样式(例如不同的背景色)。cycle 标签可以帮助您在每次循环中按顺序输出预设的值:

{% for item in archives %}
    <div class="row-{% cycle 'odd' 'even' %}">
        {{ item.Title }}
    </div>
{% endfor %}

每次循环,cycle 会依次输出 'odd''even',为您的列表增添视觉上的层次感。

获取循环信息:forloop.Counterforloop.Revcounter

在循环体内,您还可以访问一些特殊的变量来获取当前循环的状态:

  • forloop.Counter:表示当前迭代的次数,从 1 开始计数。
  • forloop.Revcounter:表示从当前迭代到循环结束还剩余多少次,从 总数 开始倒计数。

这在需要给列表项编号或者根据位置应用特定样式时非常有用:

{% for article in archives %}
    <div class="article-item {% if forloop.Counter == 1 %}featured{% endif %}">
        <span>{{ forloop.Counter }}.</span>
        <a href="{{ article.Link }}">{{ article.Title }}</a>
    </div>
{% endfor %}

这里,我们不仅为每篇文章添加了序号,还给第一篇文章额外加了一个 featured 类名。

实际案例:动态数据列表展示

安企CMS的“循环遍历标签(for)”与各种内容标签结合,可以灵活地构建各种动态列表。

文章列表:最常见的应用场景

除了上面展示的简单文章列表,我们还可以结合更多的文章字段,构建内容更丰富的列表:

{% archiveList articles with type="page" limit="10" categoryId="1" %}
    {% for item in articles %}
    <div class="post-card">
        {% if item.Thumb %}
        <a href="{{ item.Link }}" class="post-thumbnail">
            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
        </a>
        {% endif %}
        <div class="post-content">
            <h2 class="post-title"><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p class="post-excerpt">{{ item.Description|truncatechars:100 }}</p>
            <div class="post-meta">
                <span>发布于:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量:{{ item.Views }}</span>
                <span>分类:<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
            </div>
        </div>
    </div>
    {% empty %}
    <p>此分类下暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

这个例子展示了一个包含缩略图、标题、摘要、发布时间、阅读量和所属分类的文章列表。其中 archiveList 标签指定了要获取的分类ID为1,并开启了分页模式。

分类和导航:构建多层级菜单

对于网站的分类菜单,我们通常需要展示多层级的结构。通过嵌套使用 categoryList 标签和 for 循环,可以轻松实现:

{% categoryList mainCategories with moduleId="1" parentId="0" %}
    <ul class="main-menu">
    {% for mainCat in mainCategories %}
        <li>
            <a href="{{ mainCat.Link }}">{{ mainCat.Title }}</a>
            {% if mainCat.HasChildren %}
            <ul class="sub-menu">
                {% categoryList subCategories with parentId=mainCat.Id %}
                {% for subCat in subCategories %}
                    <li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
                {% endfor %}
                {% endcategoryList %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
    </ul>
{% endcategoryList %}

这里,外层循环遍历顶级分类,内层循环则判断每个顶级分类是否有子分类 (mainCat.HasChildren),如果有,就再获取并遍历其子分类,从而构建出清晰的多级导航结构。

其他动态数据:友情链接、Banner 等

for 循环的通用性意味着它能用于安企CMS中任何以列表形式提供的数据。例如,您可以利用 linkList 标签和 for 循环展示友情链接,或者用 bannerList 标签展示首页轮播图:

”`twig {# 友情链接列表 #}