如何在模板中使用if/for标签控制内容的条件显示和循环遍历显示?

在构建和运营网站时,内容的动态展示和灵活管理是提升用户体验和运营效率的关键。安企CMS(AnQiCMS)深知这一点,因此其模板引擎提供了强大而直观的条件判断 (if) 和循环遍历 (for) 标签,让您能够轻松控制内容的显示逻辑,实现高度定制化的页面布局。

安企CMS的模板语法借鉴了Django模板引擎的简洁风格,学习成本非常低。通过掌握这些核心标签,您将能够让网站内容根据特定条件灵活呈现,或者以高效的方式重复展示列表数据,而无需编写复杂的后端代码。接下来,我们一起深入了解如何在模板中运用这些标签,让您的网站内容焕发活力。

条件显示:掌握 if 标签的灵活运用

if 标签是您在模板中进行条件判断的利器。它允许您根据某个表达式的真假来决定是否显示一段内容,或者在多种可能性中选择一种来显示。这在很多场景下都非常实用,例如根据文章是否有缩略图来显示图片,或者根据用户权限显示不同的操作按钮。

最基础的if用法是判断一个条件:

{% if archive.Thumb %}
    <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% endif %}

这段代码的含义是,如果当前文档 (archive) 存在缩略图 (Thumb),那么就显示这张图片。如果 archive.Thumb 为空或假值,则图片部分不会被渲染到页面上。

当您需要处理多个互斥的条件时,可以使用elif(else if)和else标签,这和我们常见的编程语言逻辑非常相似:

{% if archive.Views > 1000 %}
    <span class="hot-badge">热门</span>
{% elif archive.Views > 500 %}
    <span class="popular-badge">受欢迎</span>
{% else %}
    <span class="normal-badge">普通</span>
{% endif %}

这里,我们会根据文档的浏览量 (archive.Views) 来显示不同的徽章。如果浏览量超过1000,显示“热门”;如果介于501到1000之间,显示“受欢迎”;否则,显示“普通”。

if标签不仅可以用于判断变量是否存在或数值大小,还可以配合其他操作符进行更复杂的逻辑判断,例如判断一个变量是否不等于某个值,或者判断一个集合中是否包含某个元素。

{# 检查分类是否有子分类,决定显示子分类列表还是直接显示文档 #}
{% if category.HasChildren %}
    <!-- 显示子分类导航 -->
    <ul class="sub-category-list">
        {% categoryList subCategories with parentId=category.Id %}
        {% for subCat in subCategories %}
            <li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
        {% endfor %}
        {% endcategoryList %}
    </ul>
{% else %}
    <!-- 显示当前分类下的文章列表 -->
    <ul class="article-list">
        {% archiveList articles with categoryId=category.Id limit="10" %}
        {% for article in articles %}
            <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
        {% endfor %}
        {% endarchiveList %}
    </ul>
{% endif %}

在这个例子中,if category.HasChildren 会检查当前分类是否有下级分类。如果有,就展示子分类列表;如果没有,则展示该分类下的文章列表。这种条件判断极大地提高了模板的复用性和动态性。

循环遍历:驾驭 for 标签的强大功能

当您需要展示一系列重复的内容,比如文章列表、产品列表、导航菜单或者图片画廊时,for 标签就是您的不二选择。它能够迭代遍历一个数组或集合中的每一个元素,并对每个元素执行相同的模板代码。

for 循环的基本语法非常简单:

{% for item in archives %}
    <div class="article-item">
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
        <p>{{ item.Description }}</p>
    </div>
{% endfor %}

这里,archives 是一个文档列表的集合,item 在每次循环中都会代表集合中的一个文档对象。通过 item.Linkitem.Title,我们可以轻松访问每个文档的链接和标题。

在循环中,您还可以访问一些特殊的变量,它们提供了关于当前循环状态的信息,例如:

  • forloop.Counter: 当前循环的序号,从1开始计数。
  • forloop.Revcounter: 当前循环剩余的元素数量。

这些变量在为列表中的特定项目应用不同样式时非常有用:

{% for navItem in navs %}
    <li class="{% if forloop.Counter == 1 %}active{% endif %}">
        <a href="{{ navItem.Link }}">{{ navItem.Title }}</a>
    </li>
{% endfor %}

这段代码会为导航列表中的第一个项目添加 active 类,这在突出显示默认选中项时非常方便。

如果您的列表可能为空,并且您希望在没有内容时显示一条友好的提示信息,可以使用 empty 标签:

{% for product in products %}
    <div class="product-card">
        <h4>{{ product.Title }}</h4>
        <img src="{{ product.Thumb }}" alt="{{ product.Title }}" />
    </div>
{% empty %}
    <p>抱歉,目前没有产品可供展示。</p>
{% endfor %}

products 集合为空时,empty 部分的内容会被渲染,避免页面出现空白或错误。

安企CMS的for标签还支持reversedsorted修饰符,让您可以轻松地将集合倒序遍历或者按某种规则排序(针对数字类型)。

{# 倒序显示文章列表 #}
{% for item in archives reversed %}
    <!-- ... 文章内容 ... -->
{% endfor %}

结合运用:让模板更智能高效

iffor 标签的真正强大之处在于它们的结合使用。在循环遍历数据的同时,根据每个数据项的特定属性进行条件判断,能够实现非常复杂的动态内容展示。

让我们看一个经典的例子:构建一个多级导航菜单。假设我们有一个顶级分类列表,每个顶级分类可能包含子分类。

<nav>
    <ul class="main-nav">
        {% navList mainNavItems with typeId=1 %} {# 假设 typeId=1 是主导航 #}
        {% for mainItem in mainNavItems %}
            <li {% if mainItem.NavList %}class="has-submenu"{% endif %}>
                <a href="{{ mainItem.Link }}">{{ mainItem.Title }}</a>
                {% if mainItem.NavList %} {# 如果有子导航列表 #}
                    <ul class="submenu">
                        {% for subItem in mainItem.NavList %}
                            <li><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
        {% endnavList %}
    </ul>
</nav>

在这个例子中,外层for循环遍历主导航项。在每次循环内部,我们使用if mainItem.NavList来判断当前导航项是否有子导航。如果有,则再嵌套一个for循环来渲染子导航列表。这种结构允许您构建