在AnQiCMS的模板开发中，实现流畅的用户体验和优雅的页面展示是我们的核心目标。其中，文章详情页的“上一篇/下一篇”导航，便是提升用户浏览深度和站点粘性的重要一环。通过prevArchive和nextArchive这样的模板标签，我们能够轻松地将用户引导至相关内容。然而，在这个过程中，如何安全、美观地展示相关文章的图片，避免出现恼人的空图片链接，就成了一个值得深入探讨的细节。
今天，我们就来聊聊如何在AnQiCMS模板中，特别是使用prevArchive标签时，巧妙地处理图片显示，彻底告别空图片链接的困扰。
理解 prevArchive 标签及其图片属性
首先，让我们回顾一下prevArchive标签的功能。根据AnQiCMS的模板标签约定，prevArchive用于获取当前文章的上一篇文档数据。当我们在模板中调用它时，通常会这样写：
{% prevArchive prev %}
{# 在这里使用prev对象来展示上一篇文章的信息 #}
{% endprevArchive %}
这里，prev就代表了上一篇文章的对象。它包含了诸如Id（文档ID）、Title（标题）、Link（链接）等核心信息。对于图片，prev对象通常提供了Thumb（文档封面缩略图）和Logo（文档封面首图）这两个字段。理想情况下，我们可以直接使用它们来展示图片：
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />
然而，问题往往就出在这里：并非所有的文章都会上传缩略图或封面图。如果prev.Thumb或prev.Logo的值为空，那么<img>标签的src属性就会变成src=""，这在浏览器中会显示为一个破碎的图标，严重影响网站的视觉专业度和用户体验。
空图片链接的潜在问题
一个src=""的图片链接，不仅仅是视觉上的不协调。从技术角度看，它可能导致：
- 用户体验受损： 破碎的图标让页面看起来不完善，甚至让用户误以为内容缺失或网站存在问题。
- 额外的HTTP请求： 某些浏览器可能会尝试将空
src解析为当前页面的URL，从而发起不必要的HTTP请求，轻微增加服务器负担。 - 不利于SEO： 虽然影响很小，但一个充满破碎图片的页面可能会被搜索引擎视为用户体验不佳，间接影响排名。
因此，我们需要一套健壮的策略来处理这种情况。
安全显示图片的策略与实践
为了防止空图片链接的出现，我们可以在模板中引入一些逻辑判断和备用机制。这主要包括以下几个步骤：
第一步：检查上一篇文档是否存在
在尝试显示任何信息之前，我们首先要确认prevArchive是否成功获取到了上一篇文档。如果不存在上一篇文档，就没必要继续处理图片了。
{% prevArchive prev %}
{% if prev %}
{# 存在上一篇文档，继续处理 #}
{% else %}
<span class="no-prev-article">没有上一篇了</span>
{% endif %}
{% endprevArchive %}
第二步：判断上一篇文档是否有可用图片
在确认了prev对象存在后，接下来是判断它是否包含有效的图片链接。AnQiCMS通常提供了Thumb（缩略图）和Logo（首图）字段，我们可以优先使用缩略图，如果缩略图不存在，再考虑使用首图。
”`twig {% prevArchive prev %} {% if prev and prev.Link %} {# 确保prev对象存在且有有效的链接 #}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt