AnQiCMS以其灵活强大的模板系统,让内容的展示变得高效而富有表现力。对于网站运营者和开发者而言,掌握如何在模板中遍历和显示数据,是解锁其强大功能、让网站内容“活”起来的关键一步。今天,我们就来深入探讨如何在AnQiCMS模板中使用for循环,让你的动态数据轻松呈现。
AnQiCMS的模板引擎采用了类似Django的语法,这使得熟悉其他主流模板语言的用户也能快速上手。在模板中,当你需要展示一系列相同结构的数据时,比如文章列表、产品分类、导航菜单或图片集等,for循环便是你的得力助手。
循环的骨架:基础语法入门
for循环最基本的形式是遍历一个数据集合(如数组或列表),并对其中的每个元素执行相同的操作。它的语法非常直观:
{% for 变量名 in 集合 %}
{# 在这里放置你希望对每个元素执行的代码 #}
{{ 变量名.属性 }}
{% endfor %}
在这里,集合是你希望遍历的数据集,而变量名则是在每次循环中代表当前元素的临时名称。比如,如果你有一个名为archives的文章列表,你可以这样遍历它:
{% archiveList archives with type="list" limit="5" %}
{% for article in archives %}
<div class="article-item">
<h2><a href="{{ article.Link }}">{{ article.Title }}</a></h2>
<p>{{ article.Description }}</p>
<span>发布日期:{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</div>
{% endfor %}
{% endarchiveList %}
这段代码会从archives集合中逐一取出文章数据,并在每次循环中,将当前文章的标题、链接、描述和发布日期显示出来。
处理空列表:{% empty %}的妙用
有时候,你遍历的数据集合可能为空。如果直接显示,页面可能会出现空白。AnQiCMS的for循环提供了一个{% empty %}子句,让你能够优雅地处理这种情况:
{% archiveList recentPosts with type="list" limit="3" %}
{% for post in recentPosts %}
<div class="post-card">
<h3><a href="{{ post.Link }}">{{ post.Title }}</a></h3>
</div>
{% empty %}
<p>暂时没有最新文章发布。</p>
{% endfor %}
{% endarchiveList %}
如果recentPosts集合中有数据,它会正常显示文章卡片;如果没有,则会显示“暂时没有最新文章发布。”的提示,避免页面显得空洞。
增强循环功能:排序与倒序
AnQiCMS的for循环还支持一些实用的修饰符,让你能更灵活地控制数据的显示顺序。你可以在for标签后直接加上reversed来倒序遍历,或者使用sorted对数据进行排序(如果集合中的元素是可排序的数值类型):
{# 倒序显示文章列表 #}
{% archiveList latestNews with type="list" limit="5" %}
{% for news in latestNews reversed %}
<div class="news-item">{{ news.Title }}</div>
{% endfor %}
{% endarchiveList %}
{# 假设有一个数字列表`numberList`,对其进行排序 #}
{% for num in numberList sorted %}
<span>{{ num }}</span>
{% endfor %}
这些修饰符可以帮助你在不改变原始数据获取逻辑的前提下,轻松调整数据在前端的展现方式。
洞察循环进度:forloop对象的实用属性
在for循环内部,你还可以访问一个特殊的forloop对象,它提供了关于当前循环状态的各种实用信息。其中最常用的是:
forloop.Counter: 当前循环的迭代次数,从1开始计数。forloop.Revcounter: 当前循环剩余的迭代次数。forloop.First: 如果当前是循环的第一个元素,则为true。forloop.Last: 如果当前是循环的最后一个元素,则为true。
利用这些属性,你可以为列表中的特定元素添加独特的样式或行为:
{% archiveList products with type="list" limit="4" %}
{% for product in products %}
<div class="product-card {% if forloop.First %}first-item{% endif %} {% if forloop.Last %}last-item{% endif %}">
<h3>{{ forloop.Counter }}. {{ product.Title }}</h3>
<img src="{{ product.Thumb }}" alt="{{ product.Title }}">
</div>
{% endfor %}
{% endarchiveList %}
在这个例子中,第一个产品卡片会被添加first-item类,最后一个则被添加last-item类,并且每个产品会显示其在列表中的序号。
创造性展示:{% cycle %}标签
{% cycle %}标签允许你在循环中轮流输出不同的值。这对于实现斑马线效果(奇偶行不同背景色)、轮播图中的不同动画类等场景非常有用:
{% archiveList items with type="list" limit="6" %}
{% for item in items %}
<div class="item-row {% cycle 'bg-light' 'bg-dark' %}">
<p>{{ item.Title }}</p>
</div>
{% endfor %}
{% endarchiveList %}
每次循环,item-row会交替获得bg-light和bg-dark类,从而轻松实现视觉上的交替效果。
实战演练:常见场景下的for循环应用
了解了基础和进阶用法后,让我们看看几个AnQiCMS中常见的for循环应用场景。
1. 动态导航菜单
一个典型的网站通常有多级导航,for循环可以很好地处理这种嵌套结构。navList标签可以获取导航数据,通过判断item.NavList是否存在,来实现二级甚至多级菜单的渲染。
<nav>
<ul>
{% navList mainNav with typeId=1 %}
{% for item in mainNav %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 如果有子导航 #}
<ul class="submenu">
{% for subItem in item.NavList %}
<li {% if subItem.IsCurrent %}class="active"{% endif %}>
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
这里我们用一个外层for循环处理一级导航,再用一个内层for循环处理二级导航。item.IsCurrent可以帮你判断当前链接是否被选中,方便添加高亮样式。
2. 文章/产品列表展示
无论是首页的热门文章、分类页的产品列表,for循环都是核心。结合archiveList标签,你可以轻松展示包含图片、简介、日期的动态列表。
<div class="article-list">
{% archiveList articles with type="list" moduleId="1" limit="10" order="views desc" %}
{% for article in articles %}
<article>
{% if article.Thumb %}
<a href="{{ article.Link }}"><img src="{{ article.Thumb }}" alt="{{ article.Title }}"></a>
{% endif %}
<h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
<p>{{ article.Description|truncatechars:100 }}</p>
<div class="meta">
<span>{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
<span>阅读量:{{ article.Views }}</span>
</div>
</article>
{% empty %}
<p>很抱歉,当前没有找到相关内容。</p>
{% endfor %}
{% endarchiveList %}
</div>
这里我们获取了浏览量最高的10篇文章,并利用article.Thumb判断是否有缩略图,article.Description|truncatechars:100对描述进行截断。
3. 展示图片组图或附件列表
在文章或产品详情页,如果内容模型中包含了图片组图或附件字段,通常它们也是以列表形式存储的。你可以直接遍历这些字段来展示。
”`twig {# 假设archive.Images是一个图片URL的数组 #}
{% archiveDetail currentImages with name="Images" %}
{% if currentImages %}
{% for imageUrl in currentImages %}
<a href="{{ imageUrl }}" data-lightbox="gallery">
<img src="{{ imageUrl }}" alt="图片展示">
</a>
{% end