在安企CMS的模板制作中,灵活控制内容的显示方式是提升网站用户体验和管理效率的关键。无论是根据不同条件展示特定信息,还是实现更复杂的个性化布局,条件判断都是不可或缺的工具。今天,我们就来深入了解如何在安企CMS模板中运用强大的if/else条件判断来精准控制内容的呈现。
安企CMS的模板引擎采用了类似Django模板语法的标记,这让熟悉Web开发的朋友能够很快上手。其中,if/else逻辑判断标签以其直观的语法,成为实现动态内容展示的核心。
理解 if/else 的基本语法
在安企CMS模板中,if/else条件判断的基本结构与常见的编程语言类似,主要分为以下几种形式:
1. 简单的 if 判断
当您只需要在满足某个条件时显示内容,不满足时则不显示,可以使用最简单的 if 结构。
{% if 条件 %}
<!-- 满足条件时显示的内容 -->
{% endif %}
2. if-else 二选一判断
当您需要在两种情况下选择显示不同的内容时,if-else结构非常实用。
{% if 条件 %}
<!-- 满足条件时显示的内容 -->
{% else %}
<!-- 不满足条件时显示的内容 -->
{% endif %}
3. if-elif-else 多条件判断
面对更复杂的场景,需要判断多个互斥条件时,if-elif-else(其中elif是“else if”的缩写)结构能帮助您 elegantly 地处理。
{% if 条件1 %}
<!-- 满足条件1时显示的内容 -->
{% elif 条件2 %}
<!-- 满足条件2时显示的内容 -->
{% else %}
<!-- 所有条件都不满足时显示的内容 -->
{% endif %}
在这些条件语句中,您可以使用各种比较运算符(== 等于, != 不等于, < 小于, > 大于, <= 小于等于, >= 大于等于)以及逻辑运算符(and 并且, or 或者, not 非)来构建复杂的判断表达式。此外,判断一个变量是否存在或是否为空,也可以直接将其作为条件使用,例如 {% if 变量名 %}。
实际应用场景与代码示例
现在,让我们通过几个实际的场景,来看看if/else在安企CMS模板中的具体运用。
场景一:根据内容是否存在来控制显示
这是最常见的应用之一。例如,在文档列表中,我们可能只希望当文章有缩略图时才显示图片,否则就跳过。
{# 在文章列表循环中,item 代表当前文章对象 #}
{% for item in archives %}
<div class="article-item">
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumbnail">
{% else %}
<img src="/public/static/images/default-thumb.png" alt="无图替代" class="article-thumbnail-default">
{% endif %}
<p>{{ item.Description|truncatechars:100 }}</p>
</a>
</div>
{% empty %}
<p>抱歉,目前没有可展示的文章。</p>
{% endfor %}
这里我们利用 {% if item.Thumb %} 来判断 item.Thumb 字段是否有值。如果图片存在,就显示它;否则,就显示一个默认的占位图。另外,{% empty %} 是 for 循环中非常实用的一个特性,当循环的集合为空时,它会自动显示其中的内容,省去了额外的 if archives 判断。
场景二:根据特定属性值实现个性化展示
安企CMS支持为文档设置“推荐属性”(如头条、推荐、幻灯等)。我们可以利用这些属性来控制不同文章在页面上的样式或显示区域。
假设我们想把“头条”文章(Flag 为 “h”)显示得更醒目:
{# 在文章列表循环中 #}
{% for item in archives %}
<div class="article-card {% if item.Flag == 'h' %}highlight-headline{% endif %}">
{% if item.Flag == 'h' %}
<span class="badge">头条</span>
{% elif item.Flag == 'c' %}
<span class="badge">推荐</span>
{% endif %}
<h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
<p>发布日期:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
</div>
{% endfor %}
这段代码通过 {% if item.Flag == 'h' %} 和 {% elif item.Flag == 'c' %} 来检查文章的推荐属性,从而动态添加CSS类或显示不同的标签。
再比如,在导航菜单中,我们希望当前访问的页面链接能高亮显示:
{# 导航列表标签 navList #}
{% navList navs %}
<ul class="main-nav">
{% for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 如果有子导航 #}
<ul class="sub-nav">
{% for subItem in item.NavList %}
<li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
item.IsCurrent 是一个布尔值,当当前导航项与用户访问的页面匹配时,其值为 true。我们利用 {% if item.IsCurrent %} 来动态添加 active 类,实现高亮效果。
场景三:根据模型类型展示不同布局
安企CMS支持灵活的内容模型。如果您的网站在同一个页面上可能混合展示不同模型(如文章、产品)的内容,并且需要为它们提供不同的显示布局,就可以通过模型ID进行判断。
{# 假设在一个综合内容区块中循环所有文档,item 代表文档对象 #}
{% archiveList archives with type="list" limit="5" %}
{% for item in archives %}
{% if item.ModuleId == 1 %} {# 如果是文章模型 #}
<div class="content-article">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<span class="date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% elif item.ModuleId == 2 %} {# 如果是产品模型 #}
<div class="content-product">
<img src="{{ item.Logo }}" alt="{{ item.Title }}" class="product-image">
<h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
<p class="price">售价:¥{{ item.Price }}</p>
</div>
{% else %} {# 其他未知模型 #}
<div class="content-generic">
<a href="{{ item.Link }}">{{ item.Title }} (通用内容)</a>
</div>
{% endif %}
{% endfor %}
{% endarchiveList %}
通过 item.ModuleId,我们可以为不同的内容模型分配特定的展示模板和样式,实现更加精细化的页面控制。
场景四:展示自定义的联系方式信息
在网站底部或联系我们页面,可能需要根据后台配置情况,有条件地显示不同的联系方式。例如,如果管理员填写了WhatsApp,就显示WhatsApp,否则显示常规的电话。
”`twig
{% contact whatsapp with name="WhatsApp" %}
{% contact phone with name="Cellphone" %}
{% if whatsapp %}
<p>WhatsApp: <a href="https://wa.me/{{ whatsapp }}" target="_blank" rel="nofollow">{{