网站内容需要不断更新,比如展示最新的文章、产品、用户评论或导航菜单等,这些动态数据往往以列表的形式呈现。在安企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 %} 之间的内容就会被显示出来,给用户一个友好的反馈。
定制循环顺序:reversed 和 sorted 的魔法
您可能希望列表数据以特定的顺序展示。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.Counter 和 forloop.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 {# 友情链接列表 #}
{% linkList links %}
{% for link in links %}
<a href