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

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

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

识别内容中的缩略图字段

在安企CMS中,无论是文章、产品、单页面还是分类,核心的内容数据通常会包含 LogoThumb 两个字段来表示图片信息。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 %} 进行判断仍然是**实践,它能确保在任何未预料到的情况下(例如,系统未能自动提取图片或未设置全局默认图),页面也能优雅地降级处理。

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