AnQiCMS 模板中，如何根据变量是否存在来决定显示默认图片或占位符？

在 AnQiCMS 的模板开发中，我们经常会遇到内容可能不包含图片的情况。例如，一篇新闻文章可能没有配图，或者一个产品列表中的某个商品暂时没有上传主图。在这种情况下，如果模板直接调用图片地址，就可能显示一个破损的图片图标，或者留下一个突兀的空白，这无疑会影响网站的整体美观度和用户体验。

为了解决这个问题，AnQiCMS 提供了灵活的模板标签和过滤器，让我们可以根据图片变量是否存在，来智能地决定是显示真实的图片，还是一个预设的默认图片或占位符。这不仅能提升页面的视觉一致性，也能在内容不完善时保持良好的用户体验。

一、使用 if 标签进行条件判断

最直接也是最常用的方法，是利用 AnQiCMS 模板中类似于 Django 语法的 if 标签进行条件判断。通过判断图片变量是否包含有效内容，我们可以分别输出真实图片或默认占位符。

假设我们正在一个文章详情页中，需要显示文章的缩略图（Thumb 字段）。如果 Thumb 字段有值，就显示它；如果没有，就显示一张预设的默认图片。

首先，我们可以使用 archiveDetail 标签来获取当前文章的缩略图信息，并将其赋值给一个临时变量，例如 articleThumb：

{% archiveDetail articleThumb with name="Thumb" %}

接着，我们就可以利用 if 标签判断这个 articleThumb 变量是否为空：

{% archiveDetail articleThumb with name="Thumb" %}
{% if articleThumb %}
    <img src="{{ articleThumb }}" alt="文章缩略图">
{% else %}
    <img src="/public/static/images/default-thumb.webp" alt="默认缩略图" class="default-image">
{% endif %}

在上面的代码中：

  • {% archiveDetail articleThumb with name="Thumb" %} 会尝试获取当前文章的缩略图路径，并赋值给 articleThumb。
  • {% if articleThumb %} 判断 articleThumb 变量是否非空。如果它有值（即文章有缩略图），就会执行 if 块内的代码，显示真实的图片。
  • {% else %} 块则在 articleThumb 为空时执行，显示我们预设的默认图片路径 /public/static/images/default-thumb.webp。

这种方法不仅适用于文章详情页的 Thumb 字段，也可以同样应用到分类详情页的 Logo 或 Thumb，以及单页详情页的 Logo 或 Thumb 等所有可能包含图片路径的字段。

二、巧妙运用 default 过滤器实现更简洁的写法

AnQiCMS 模板还提供了 default 过滤器，它可以在变量为空时，提供一个备用值。这使得图片变量的判断和默认值设置可以写得更加简洁。

default 过滤器的使用方式是在变量后面加上 |default:''，引号内填写你希望的默认值。

继续以上面的文章缩略图为例，使用 default 过滤器可以这样实现：

<img src="{{ archive.Thumb|default:'/public/static/images/default-thumb.webp' }}" alt="文章缩略图">

这里的 archive.Thumb 是直接引用了当前页面的文章对象 archive 的 Thumb 字段。如果 archive.Thumb 为空或未定义，default 过滤器就会将其替换为 /public/static/images/default-thumb.webp。

这种写法将条件判断和默认值指定合并在了一行，代码更加精炼，尤其适合只需要提供一个简单默认值的场景。AnQiCMS 还提供了 default_if_none 过滤器，如果变量可能为 nil（空指针）而非仅仅是空字符串，它会更为精确地提供默认值，但在处理图片路径这种字符串类型时，default 过滤器通常已经足够应对。

三、处理图片组（Images）的特殊情况

有些内容模型可能支持图片组（例如产品详情页的轮播图），Images 字段通常会返回一个图片路径的数组（或称之为切片）。在这种情况下，我们可能需要判断图片组是否存在，以及图片组中是否有至少一张图片。

假设我们想显示一个产品的第一张图片，如果没有图片组或者图片组是空的，则显示一张默认图片：

{% archiveDetail productImages with name="Images" %}
{% if productImages and productImages|length > 0 %}
    <img src="{{ productImages[0] }}" alt="产品主图">
{% else %}
    <img src="/public/static/images/default-product.webp" alt="默认产品图">
{% endif %}

在这里：

  • {% archiveDetail productImages with name="Images" %} 将图片组数据赋值给 productImages。
  • {% if productImages and productImages|length > 0 %} 进行了双重判断：首先确保 productImages 变量本身存在且非空，其次通过 |length 过滤器判断数组的长度是否大于 0，以确保其中至少有一张图片。
  • 如果条件成立，则显示图片组中的第一张图片 productImages[0]。
  • 否则，显示预设的默认产品图。

如果你的图片组是在循环中展示，并且你希望当整个图片组为空时显示占位符，可以这样处理：

{% archiveDetail productImages with name="Images" %}
{% if productImages %}
    <div class="product-gallery">
    {% for imgUrl in productImages %}
        <img src="{{ imgUrl }}" alt="产品图">
    {% endfor %}
    </div>
{% else %}
    <div class="product-gallery-placeholder">
        <img src="/public/static/images/default-product-gallery.webp" alt="暂无图片">
        <p>此产品暂无图片展示。</p>
    </div>
{% endif %}

**实践与注意事项

  1. 统一默认图片路径： 将所有默认图片存放在 /public/static/images/ 目录下，并为它们命名规范，例如 default-thumb.webp、default-logo.webp 等，方便管理和维护。
  2. 设置有意义的 alt 属性： 无论图片是否存在，都应该为 <img> 标签添加 alt 属性。对于默认图片，alt 属性应说明其默认性质，例如 "默认缩略图"，这对于 SEO 和无障碍访问都非常重要。 3.