如何在安企CMS模板中使用if/else条件判断来控制内容的显示?

在安企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">{{