如何使用条件判断和循环控制来动态调整内容的显示?

在安企CMS中管理内容,我们常常会遇到需要根据特定条件展示不同信息,或者重复展示一系列内容的场景。这时候,灵活运用条件判断和循环控制,就能让网站内容变得更加生动和智能化。

安企CMS的模板功能提供了类似Django模板引擎的强大语法支持,通过这些标签,我们可以轻松实现内容的动态调整,而无需编写复杂的后台代码。

条件判断:让内容“看人说话”

条件判断是实现动态内容显示的基础。想象一下,如果您的网站需要针对不同的用户群体,或者在特定情况下显示不同的信息,条件判断就派上用场了。在安企CMS中,我们主要使用 {% if ... %} 标签来构建条件逻辑。

一个基本的条件判断结构是这样的:

{% if 条件表达式 %}
    <!-- 当条件为真时显示的内容 -->
{% else %}
    <!-- 当条件为假时显示的内容 -->
{% endif %}

如果我们需要处理多种情况,可以使用 {% elif ... %} 来添加更多判断分支:

{% if 条件表达式1 %}
    <!-- 当条件1为真时显示的内容 -->
{% elif 条件表达式2 %}
    <!-- 当条件2为真时显示的内容 -->
{% else %}
    <!-- 当所有条件都为假时显示的内容 -->
{% endif %}

在实际应用中,这样的条件判断能够带来很多便利。

例如,您可能希望只在某个文档存在缩略图时才显示图片:

{% if archive.Thumb %}
    <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% else %}
    <img src="/static/images/default-thumb.jpg" alt="暂无图片" />
{% endif %}

再比如,我们可以在产品详情页,根据产品的库存情况显示“有货”或“缺货”:

{% archiveDetail productStock with name="Stock" %}
{% if productStock > 0 %}
    <span style="color: green;">有货</span>
{% else %}
    <span style="color: red;">缺货</span>
{% endif %}

有时,我们可能需要根据当前页面的分类ID,来加载不同的样式或内容模块。例如,当分类ID为10时,显示一个特别的推广横幅:

{% categoryDetail currentCategoryId with name="Id" %}
{% if currentCategoryId == 10 %}
    <div class="special-promo-banner">
        <h2>此分类独享优惠!</h2>
        <p>立即购买享受更多折扣。</p>
    </div>
{% endif %}

通过灵活运用 andornot 等逻辑运算符,我们可以构建更复杂的条件表达式,让内容的显示逻辑更加精细。比如,当文章是头条推荐 并且 发布时间在最近一周内时,显示一个“热门新文”的标记:

{% archiveDetail articleFlag with name="Flag" %}
{% archiveDetail articleCreatedTime with name="CreatedTime" %}
{% set oneWeekAgo = stampToDate(now().timestamp - 7 * 24 * 60 * 60, "2006-01-02 15:04:05") %}

{% if articleFlag == 'h' and articleCreatedTime > oneWeekAgo %}
    <span class="badge hot-new">热门新文</span>
{% endif %}

循环控制:高效组织与展示内容

在网站内容管理中,我们最常见的需求就是列出大量的文章、产品、分类或者评论。手动一个一个地添加显然不现实,这时循环控制就显得至关重要。安企CMS的模板支持 {% for ... in ... %} 标签,用于遍历各种数据集合。

一个典型的循环结构是这样的:

{% for item in 数据集合 %}
    <!-- 针对每个item显示的内容 -->
{% endfor %}

如果数据集合可能为空,我们还可以在循环中增加一个 {% empty %} 块,以在没有数据时提供友好的提示,避免页面空白:

{% for item in 数据集合 %}
    <!-- 针对每个item显示的内容 -->
{% empty %}
    <!-- 当数据集合为空时显示的内容 -->
{% endfor %}

例如,列出最新的10篇文章:

<ul class="article-list">
    {% archiveList latestArticles with type="list" limit="10" order="id desc" %}
        {% for article in latestArticles %}
        <li>
            <a href="{{ article.Link }}">{{ article.Title }}</a>
            <span class="date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
        </li>
        {% empty %}
        <li>暂时还没有任何文章。</li>
        {% endfor %}
    {% endarchiveList %}
</ul>

在循环中,我们还可以利用 forloop 变量来获取当前循环的状态,例如当前是第几个元素、是否是第一个或最后一个元素等。这对于在列表中应用特殊样式非常有用:

<div class="product-gallery">
    {% archiveList products with type="list" categoryId="1" limit="5" %}
        {% for product in products %}
        <div class="product-item {% if forloop.Counter == 1 %}first-product{% elif forloop.Revcounter == 1 %}last-product{% endif %}">
            <img src="{{ product.Thumb }}" alt="{{ product.Title }}" />
            <h3>{{ product.Title }}</h3>
            {% if forloop.Counter == 1 %}
                <p class="highlight">本店主推!</p>
            {% endif %}
        </div>
        {% empty %}
        <p>抱歉,该分类下暂时没有产品。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

forloop.Counter 会从1开始计数,forloop.Revcounter 会从集合总数开始倒数计数。

此外,cycle 标签能在循环中轮流输出预设的值,常用于为列表项添加交替的背景色或其他样式:

<ul class="comment-list">
    {% commentList comments with archiveId=archive.Id type="list" limit="10" %}
        {% for comment in comments %}
        <li class="comment-item {% cycle 'odd' 'even' %}">
            <strong>{{ comment.UserName }}</strong>: {{ comment.Content }}
            <span class="time">{{ stampToDate(comment.CreatedTime, "2006-01-02 15:04") }}</span>
        </li>
        {% empty %}
        <li>暂无评论,快来发表您的看法吧!</li>
        {% endfor %}
    {% endcommentList %}
</ul>

结合运用:打造更智能的展示

条件判断和循环控制的组合使用,能够构建出功能更丰富、用户体验更好的动态内容展示。

例如,在文章详情页底部,我们通常会显示相关文章。我们可以先循环获取相关文章,但如果没有任何相关文章,则显示一个默认推荐列表:

<div class="related-articles">
    <h3>相关推荐</h3>
    {% archiveList related with type="related" limit="5" %}
        {% for item in related %}
            <a href="{{ item.Link }}">{{ item.Title }}</a>
        {% empty %}
            <!-- 如果没有相关文章,显示一些通用推荐 -->
            {% archiveList defaultRecommendations with type="list" limit="5" order="views desc" %}
                {% for item in defaultRecommendations %}
                    <a href="{{ item.Link }}">精选:{{ item.Title }}</a>
                {% endfor %}
            {% endarchiveList %}
        {% endfor %}
    {% endarchiveList %}
</div>

另一个常见的应用场景是根据用户自定义的内容模型字段来调整显示。例如,如果产品模型有一个自定义字段 material (材质),我们可以根据其值来显示不同的图标或描述:

”`twig {% archiveDetail productMaterial with name=“material” %}

<!-- ... 其他产品信息 ... -->
{% if productMaterial == 'wood' %}
    <span class="material-icon wood-icon">木质</span>
{% elif productMaterial == 'metal' %}
    <span class="material-icon metal-icon">金属</span>
{% else %}
    <span class="material-icon default-icon">未知材质