如何在模板中实现条件判断，例如根据文章是否有缩略图来决定是否显示图片？

在网站内容呈现中，图片扮演着至关重要的角色。然而，并非所有内容都有对应的缩略图，或者出于设计美观和加载速度的考量，我们可能需要根据实际情况来决定是否显示图片，甚至显示不同的占位图。AnqiCMS 提供了灵活强大的模板引擎，让我们能够轻松实现这种基于条件的图片显示逻辑，从而提升网站内容的灵活性和用户体验。

本文将围绕如何在 AnqiCMS 模板中根据文章是否有缩略图来决定是否显示图片这一核心需求，详细讲解其实现方法。

AnqiCMS 模板中的条件判断基础

AnqiCMS 的模板系统借鉴了 Django 模板引擎的语法，其条件判断主要通过 {% if 条件 %} 和 {% endif %} 标签来实现。当 if 标签中的条件表达式为真（True）时，其内部的内容就会被渲染显示；否则，内容将被忽略。

例如，判断一个变量 myVariable 是否存在或非空，可以直接使用：

{% if myVariable %}
    {# myVariable 存在且非空时显示这里的内容 #}
{% else %}
    {# myVariable 不存在或为空时显示这里的内容 #}
{% endif %}

这种简洁的语法使得在模板中处理各种逻辑判断变得非常直观。

场景一：在文章详情页判断单篇文章是否有缩略图

在文章详情页中，当前文章的数据通常会直接暴露在模板的 archive 对象中。因此，我们可以直接通过 archive.Thumb 字段来判断当前文章是否具有缩略图。archive.Thumb 会返回缩略图的路径字符串，如果文章没有设置缩略图，这个字段通常会是一个空字符串。

下面是一个在文章详情页判断并显示缩略图的代码示例：

{# 假设这是文章详情页的模板（例如 detail.html） #}

<div class="article-content">
    <h1>{{ archive.Title }}</h1> {# 文章标题 #}
    <div class="article-meta">
        <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ archive.Views }}</span>
    </div>

    {# 判断文章是否有缩略图 #}
    {% if archive.Thumb %}
        <div class="article-thumbnail">
            <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" loading="lazy">
        </div>
    {% else %}
        {# 如果没有缩略图，可以显示一个默认的占位图 #}
        <div class="article-thumbnail-placeholder">
            <img src="/public/static/images/default-thumb.png" alt="无图" loading="lazy">
        </div>
        {# 或者，如果不想显示任何图片，可以直接省略 else 部分 #}
    {% endif %}

    <div class="article-body">
        {{ archive.Content|safe }} {# 文章内容，使用 safe 过滤器防止 HTML 被转义 #}
    </div>
</div>

在这个例子中，我们首先检查 archive.Thumb 是否有值。如果存在，就显示该缩略图；如果不存在，则显示一个预设的默认占位图片。

场景二：在文章列表页循环判断每篇文章是否有缩略图

在文章列表页，我们通常会使用 {% archiveList %} 标签来获取文章列表并进行循环遍历。在循环内部，每个文章项的数据会通过一个变量（例如 item 或 article）来访问。同样，我们可以通过 item.Thumb 来判断每篇文章的缩略图状态。

下面是一个在文章列表页实现条件判断并显示缩略图的代码示例：

{# 假设这是文章列表页的模板（例如 list.html） #}

<div class="article-list">
    {% archiveList articles with type="page" limit="10" %} {# 获取分页文章列表，每页10篇 #}
        {% for article in articles %}
            <div class="article-item">
                {# 判断当前文章是否有缩略图 #}
                {% if article.Thumb %}
                    <div class="item-thumbnail">
                        <img src="{{ article.Thumb }}" alt="{{ article.Title }}" loading="lazy">
                    </div>
                {% else %}
                    {# 如果没有缩略图，显示一个列表页的默认占位图 #}
                    <div class="item-thumbnail-placeholder">
                        <img src="/public/static/images/default-list-thumb.png" alt="无图" loading="lazy">
                    </div>
                {% endif %}

                <div class="item-info">
                    <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
                    <p>{{ article.Description|truncatechars:120 }}</p> {# 截取文章描述 #}
                    <a href="{{ article.Link }}" class="read-more">阅读详情</a>
                </div>
            </div>
        {% empty %}
            {# 如果文章列表为空，显示提示信息 #}
            <p class="no-articles">目前还没有文章发布。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 列表页的分页导航 #}
    <div class="pagination">
        {% pagination pages with show="5" %}
            {# 分页代码，此处省略具体实现，参考 AnqiCMS 分页标签文档 #}
        {% endpagination %}
    </div>
</div>

在这个列表页的例子中，我们遍历 articles 集合中的每一个 article 对象，并对每个 article.Thumb 进行条件判断，从而为每篇文章动态地显示缩略图或占位图。

更灵活的图片判断：Logo、Images 和自定义字段

除了 Thumb 字段，AnqiCMS 还提供了其他与图片相关的字段，您可以根据需求进行判断：

  1. archive.Logo（封面首图）：通常代表文章的封面大图或主图。其判断方式与 archive.Thumb 类似。

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

  2. archive.Images（组图）：如果文章上传了多张图片作为组图，archive.Images 会是一个图片路径的数组（Slice）。判断组图是否存在，可以检查这个数组的长度。 “`twig {% if archive.Images|length > 0 %}

    <div class="article-gallery">
    <img src="{{ archive.Images[0] }}" alt="{{ archive.Title }} - 第一张图片"> {# 显示组图的第一张图片 #}
    {# 如果需要，也可以循环显示所有组图 #}
    {% for image_url in archive.