如何在前端模板中判断某个内容是否有缩略图并进行有条件显示？

在网站内容展示中，图片，特别是缩略图，扮演着至关重要的角色。它们不仅能吸引读者的注意力，还能提升页面的美观度和信息传递效率。然而，在实际运营中，我们经常会遇到某些内容可能没有上传缩略图的情况。如果前端模板不加区分地尝试显示，轻则出现一个难看的空白区域或损坏的图片图标，重则影响页面布局甚至用户体验。

安企CMS作为一款高效灵活的内容管理系统，充分考虑了这类需求。通过其强大且易于上手的模板引擎，我们可以轻松地在前端判断某个内容是否有缩略图，并根据判断结果进行有条件地显示。

识别内容中的缩略图字段

在安企CMS中，无论是文章、产品、单页面还是分类，核心的内容数据通常会包含 Logo 和 Thumb 两个字段来表示图片信息。Logo 通常指主图或封面大图，而 Thumb 则更侧重于经过系统处理的缩略图，它可能尺寸更小，适合在列表页或推荐区域展示。

在模板中，当你获取到内容对象（比如列表中的 item 或详情页的 archive）后，可以直接通过 {{item.Thumb}} 或 {{archive.Thumb}} 来访问缩略图的URL。

运用条件判断标签实现有条件显示

安企CMS的模板系统基于Django模板引擎语法，这意味着我们可以利用其强大的条件判断标签 {% if %} 来检查 Thumb 字段是否存在值。当 Thumb 字段有内容（即非空字符串）时，条件判断为真；否则为假。

1. 在内容列表页中判断并显示缩略图：

假设你正在使用 archiveList 标签循环展示文章列表。在每次循环中，你可以检查当前文章对象 item 是否有缩略图。

{# 使用 archiveList 标签获取文章列表 #}
{% archiveList archives with type="list" limit="6" %}
    {% for item in archives %}
    <div class="article-item">
        {# 首先判断 item.Thumb 是否有值 #}
        {% if item.Thumb %}
            <a href="{{ item.Link }}" class="article-thumb">
                <img src="{{ item.Thumb }}" alt="{{ item.Title }} 缩略图">
            </a>
        {% else %}
            {# 如果没有缩略图，可以显示一个默认的占位图，或者干脆不显示图片区域 #}
            <a href="{{ item.Link }}" class="article-thumb-placeholder">
                <img src="/public/static/images/default-placeholder.webp" alt="{{ item.Title }} 无图">
            </a>
        {% endif %}
        <div class="article-info">
            <a href="{{ item.Link }}">
                <h3 class="article-title">{{ item.Title }}</h3>
            </a>
            <p class="article-description">{{ item.Description|truncatechars:100 }}</p>
        </div>
    </div>
    {% empty %}
        <p>暂时没有文章内容。</p>
    {% endfor %}
{% endarchiveList %}

在上面的例子中，如果 item.Thumb 存在，就会显示文章的缩略图；如果不存在，则会显示一个预设的默认占位图。你可以根据自己的设计需求，选择不显示图片区域，或者使用CSS来隐藏该区域。

2. 在内容详情页中判断并显示缩略图：

当你访问某个文章的详情页时，通常 archive 对象是可直接访问的。你同样可以对其 Thumb 字段进行判断。

{# 假设这是文章详情页模板，archive 对象直接可用 #}
<article class="post-detail">
    <h1 class="post-title">{{ archive.Title }}</h1>

    <div class="post-meta">
        <span>发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ archive.Views }}</span>
    </div>

    {# 判断详情页的缩略图 #}
    {% if archive.Thumb %}
        <div class="post-thumbnail">
            <img src="{{ archive.Thumb }}" alt="{{ archive.Title }} 封面图">
        </div>
    {% endif %}

    <div class="post-content">
        {{ archive.Content|safe }}
    </div>
</article>

在这个详情页的例子中，如果 archive.Thumb 字段有值，则会在文章标题下方显示缩略图；如果 archive.Thumb 为空，则整个 post-thumbnail 区域都不会渲染出来，保持页面简洁。

利用后台设置和过滤器增强缩略图显示逻辑

安企CMS在缩略图处理上考虑得非常周全。如果你在发布内容时没有手动上传缩略图，系统会自动尝试从内容中提取第一张图片作为缩略图。更进一步，你还可以在后台的“系统设置” -> “内容设置”中，上传一张“默认缩略图”。这样，当任何内容没有显式缩略图时，系统都会自动使用这张默认图。

这意味着，在许多情况下，item.Thumb 字段即使内容没有上传缩略图，也可能已经包含了自动提取的图片或全局默认图的URL。但即便如此，在模板中使用 {% if item.Thumb %} 进行判断仍然是**实践，它能确保在任何未预料到的情况下（例如，系统未能自动提取图片或未设置全局默认图），页面也能优雅地降级处理。

如果你的业务逻辑非常复杂，需要在前端根据多种情况（例如，内容无缩略图时，优先显示分类缩略图，其次