如何利用if和for标签在模板中实现条件判断和循环展示数据?

在使用AnQiCMS构建网站时,模板是实现内容展示的关键。通过灵活运用模板标签,我们可以将后台管理的内容以各种形式呈现在用户面前。其中,iffor标签作为模板逻辑控制的核心,能帮助我们实现条件判断和数据的循环展示,让网站内容更加动态和丰富。

AnQiCMS的模板引擎借鉴了Django的语法风格,这使得对这些标签的学习和使用都非常直观。它允许我们在模板中直接编写逻辑,根据不同条件展示不同的内容,或者遍历数据集,逐一输出每个数据项,而无需复杂的编程知识。

I. 条件判断:灵活控制内容的显示(if 标签)

if标签是实现条件判断的基础,它允许我们根据某个条件的真假来决定是否显示或如何显示一段内容。它的基本结构非常简单,通过{% if 条件 %}开始,并以{% endif %}结束。

基本用法

想象一下,你希望在文章详情页显示文章标题,但有些文章可能因为某种原因标题为空。你可以使用if标签来判断:

{% if archive.Title %}
    <h1>{{ archive.Title }}</h1>
{% else %}
    <h1>[无标题]</h1>
{% endif %}

这段代码会检查archive.Title是否存在,如果存在就显示文章标题,否则显示“[无标题]”。

多重条件与否则

当需要处理更复杂的逻辑时,if标签还支持elif(else if)和else来构建多重判断。 例如,你想根据文章ID来显示不同的样式:

{% if archive.Id == 1 %}
    <p class="highlight-article">这是ID为1的特别文章。</p>
{% elif archive.Id > 100 %}
    <p class="new-article">这是一篇较新的文章,ID大于100。</p>
{% else %}
    <p>这是一篇普通文章。</p>
{% endif %}

这里,模板会首先检查文章ID是否为1,如果不是,再检查是否大于100,最后如果都不符合,则显示普通文章的提示。

实用场景举例

if标签在实际应用中非常广泛。比如,判断某个数据是否存在图片缩略图,从而决定是否显示图片:

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

或者在导航菜单中,根据当前页面是否是活动的来添加不同的CSS类:

<li class="{% if item.IsCurrent %}active{% endif %}">
    <a href="{{ item.Link }}">{{ item.Title }}</a>
</li>

这些都展示了if标签在控制页面元素可见性和样式上的强大作用。

II. 循环展示:高效呈现列表数据(for 标签)

for标签用于遍历数组或集合类型的数据,将集合中的每个数据项逐一展示出来。这在显示文章列表、产品列表、导航菜单等场景中至关重要。它的基本结构是{% for 变量名 in 集合 %}开始,并以{% endfor %}结束。

基本用法

假设你从AnQiCMS后台获取了一个文章列表(通常通过{% archiveList archives with type="list" limit="10" %}这样的标签获取),并将其赋值给了archives这个变量。你可以这样循环展示:

{% for article in archives %}
    <div class="article-item">
        <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
        <p>{{ article.Description }}</p>
        <span>发布时间:{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
    </div>
{% endfor %}

这里,article就是循环中的每一个数据项,我们可以通过article.Titlearticle.Link等方式访问其属性。stampToDate是AnQiCMS提供的日期格式化函数,能将时间戳转换为易读的日期格式。

循环辅助变量

for循环内还提供了一些非常有用的辅助变量,帮助我们更好地控制循环逻辑或显示信息:

  • forloop.Counter: 当前循环的迭代次数,从1开始计数。
  • forloop.Revcounter: 当前循环距离结束的次数,从总数倒数计数。

例如,你想给列表中的第一个文章添加一个“最新”的标记:

{% for article in archives %}
    <div class="article-item {% if forloop.Counter == 1 %}latest-article{% endif %}">
        {% if forloop.Counter == 1 %}<span>[最新]</span>{% endif %}
        <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
        <p>这是第 {{ forloop.Counter }} 篇文章。</p>
    </div>
{% endfor %}

处理空数据

如果循环的集合可能为空,你希望在没有数据时显示一条友好的提示信息,而不是留白,可以使用{% empty %}子标签:

{% for article in archives %}
    <!-- 显示文章内容 -->
{% empty %}
    <p>抱歉,目前没有可显示的文章。</p>
{% endfor %}

archives集合为空时,{% empty %}区块内的内容就会被显示。

进阶用法:排序与反转

for标签还支持reversedsorted修饰符,用于在循环前对集合进行反转或排序(针对整型数组)。

{% for item in archives reversed %}
    <!-- 以相反的顺序显示文章 -->
{% endfor %}

{% for item in some_numbers sorted %}
    <!-- 对数字进行排序后显示 -->
{% endfor %}

III. iffor 的结合应用

iffor标签的真正威力体现在它们结合使用时,能够创建出高度动态和交互性的模板结构。

构建多级导航菜单

一个常见的例子是构建多级导航菜单。AnQiCMS的navList标签可以获取导航数据,其中可能包含子导航NavList。我们可以利用for循环遍历主导航,再用if判断是否有子导航,如果有,则再次使用for循环遍历子导航。

{% navList navs %}
<ul class="main-nav">
    {% for main_item in navs %}
        <li {% if main_item.IsCurrent %}class="active"{% endif %}>
            <a href="{{ main_item.Link }}">{{ main_item.Title }}</a>
            {% if main_item.NavList %} {# 判断是否有子导航 #}
                <ul class="sub-nav">
                    {% for sub_item in main_item.NavList %} {# 遍历子导航 #}
                        <li {% if sub_item.IsCurrent %}class="active"{% endif %}>
                            <a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

这个例子完美展示了iffor如何协同工作,根据数据的层级结构动态生成复杂的用户界面。

IV. 编写模板的注意事项

在使用iffor标签时,有一些细节需要留意,以确保模板的正确性和流畅性:

  • 标签闭合: if标签必须以`{%