巧用Django模板语法:让AnQiCMS内容展示更灵活的条件判断与循环
AnQiCMS的强大之处,不仅在于其高效稳定的后端架构,更在于它为我们内容运营者提供了极大的前端内容展示灵活性。其中,深度集成Django模板引擎的语法,让我们能够像搭积木一样,通过简单的条件判断和循环显示,轻松控制网站内容的呈现方式,打造更智能、更贴合用户需求的动态页面。
这篇文章,我们就来一起深入了解,如何在AnQiCMS中巧妙运用Django模板引擎的条件判断({% if %})和循环显示({% for %})功能,让网站内容焕发活力。
理解条件判断:让内容“看人下菜碟”
想象一下,你希望某个内容只在特定条件下才出现,比如只对VIP用户显示、或者当文章带有“推荐”标签时才高亮显示,又或者在某个特定节日才展示专属的促销信息。这时,{% if %} 标签就成了我们的得力助手,它能根据你设定的条件,决定是否渲染某段HTML代码。
在AnQiCMS的模板中,条件判断的语法非常直观,通常以 {% if 条件 %} 开始,以 {% endif %} 结束。
基本用法:单一条件判断
最简单的条件判断,是根据一个布尔值(True或False)来决定。例如,我们想判断一篇文章是否有缩略图,如果有,就显示它:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% endif %}
这里,archive.Thumb 如果有值(非空),条件就为真,图片就会被显示。
多重选择:{% else %} 和 {% elif %}
如果希望在条件不满足时提供一个替代方案,我们可以引入 {% else %}。比如,文章没有缩略图时,显示一个默认的占位图:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% else %}
<img src="/static/images/default-thumb.png" alt="默认缩略图" />
{% endif %}
当情况更加复杂,需要判断多个互斥条件时,{% elif %}(else if的缩写)就能派上用场。例如,根据文章的推荐属性(Flag)显示不同的提示:
{% if archive.Flag == "h" %}
<span class="badge badge-hot">头条</span>
{% elif archive.Flag == "c" %}
<span class="badge badge-recommend">推荐</span>
{% else %}
<!-- 其他情况,不显示标签 -->
{% endif %}
这里,我们通过比较 archive.Flag 的值来决定显示“头条”或“推荐”的标签。值得注意的是,条件判断支持各种比较运算符,例如 == (等于), != (不等于), > (大于), < (小于), >= (大于等于), <= (小于等于),以及 in (包含) 和 not (非) 等逻辑操作符,这让我们可以构建非常复杂的判断逻辑。比如,判断某个ID是否在某个列表中:{% if item.Id in selectedIds %}。
掌握循环显示:高效呈现大量信息
当我们需要展示一系列内容,比如最新文章列表、产品分类或者图片画廊时,挨个手动编写显然不现实也不高效。这时,{% for %} 循环标签就成了我们的得力助手,它能遍历AnQiCMS通过各种标签(如 archiveList, categoryList, navList 等)获取到的数组或列表数据,并逐一显示。
基本用法:遍历列表数据
在AnQiCMS中,我们通常会先用一个标签获取数据列表,然后用 {% for %} 标签来遍历。例如,获取最新的10篇文章并显示它们的标题和链接:
{% archiveList articles with type="list" limit="10" %}
<ul>
{% for article in articles %}
<li>
<a href="{{ article.Link }}">{{ article.Title }}</a>
</li>
{% endfor %}
</ul>
{% endarchiveList %}
这里,articles 是 archiveList 标签返回的文章列表,article 是每次循环时当前文章的变量。
处理空列表:{% empty %}
在处理列表数据时,我们常常会遇到列表为空的情况。为了避免页面出现空白或不友好的提示,{% empty %} 标签提供了一个优雅的解决方案。当 {% for %} 循环的数据为空时,{% empty %} 中的内容就会被渲染:
{% archiveList products with type="list" categoryId=currentCategory.Id limit="8" %}
<ul>
{% for product in products %}
<li>
<a href="{{ product.Link }}">{{ product.Title }}</a>
</li>
{% empty %}
<li>抱歉,该分类下暂无产品。</li>
{% endfor %}
</ul>
{% endarchiveList %}
增强循环控制:forloop 变量、reversed 和 cycle
{% for %} 标签内部提供了一些特殊的 forloop 变量,能帮助我们更好地控制循环:
forloop.Counter: 当前循环的序号,从1开始计数。forloop.Revcounter: 当前循环的倒序序号,从总数开始倒数。forloop.First: 布尔值,如果当前是循环的第一项,则为True。forloop.Last: 布尔值,如果当前是循环的最后一项,则为True。
利用这些变量,我们可以实现很多实用的效果,比如给列表项添加序号,或者高亮显示第一篇文章:
{% archiveList articles with type="list" limit="5" %}
<ol>
{% for article in articles %}
<li {% if forloop.First %}class="highlight-first"{% endif %}>
{{ forloop.Counter }}. <a href="{{ article.Link }}">{{ article.Title }}</a>
</li>
{% endfor %}
</ol>
{% endarchiveList %}
另外,我们还可以使用 {% for item in list reversed %} 来倒序遍历列表,或者利用 {% cycle 'odd' 'even' %} 标签实现列表项的奇偶行样式交替。
结合使用:构建更智能的动态页面
真正的强大之处在于将条件判断和循环显示结合起来,构建出高度动态和智能化的页面。
例如,在构建多级导航菜单时,你可以先循环一级分类,然后在每个一级分类内部使用 {% if item.HasChildren %} 判断是否有子分类,如果有,则继续循环子分类:
{% navList mainNavs %}
<ul class="main-menu">
{% for item in mainNavs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 判断是否有下级导航 #}
<ul class="sub-menu">
{% 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 %}
</ul>
{% endnavList %}
在这个例子中,我们不仅循环显示了主导航,还通过 {% if item.NavList %} 判断了是否有子导航,并进行了嵌套循环。这极大地提升了导航的灵活性和可维护性。
再比如,在文章详情页显示相关推荐,并根据文章是否有封面图决定是否显示图片:
”`twig