在网站运营中，图片是吸引访客、传递信息不可或缺的元素。合理地调用文章的封面首图、缩略图和组图，能够极大地提升网站的视觉吸引力，丰富内容展现形式，让您的内容更生动、更具吸引力。AnQiCMS作为一个灵活高效的内容管理系统，提供了直观的方式来管理和调用这些图片资源，帮助您轻松实现多样化的图片展示效果。
理解 AnQiCMS 中的图片类型
在AnQiCMS中，我们通常会接触到几种不同用途的图片类型：
- 封面首图（
Logo）：这通常指的是文章或页面的主视觉图，用于在详情页顶部、特色推荐区域等位置突出展示，是内容的第一印象。 - 缩略图（
Thumb）：这是文章或页面的缩小版预览图，常用于列表页、推荐模块、相关文章等场景，以小巧的尺寸快速概览内容，提升页面加载速度。 - 组图（
Images）：如果您的内容需要多角度、多张图片进行展示，比如产品细节图、活动现场照或文章配图画廊，组图功能就能派上用场。
了解这些图片类型后，我们来看看如何在模板中灵活调用它们。
调用文章的封面首图 (Logo)
封面首图通常承载着内容的“门面”作用，它应该最能代表文章的核心主题。在AnQiCMS中，您可以通过archiveDetail标签轻松获取文章的封面首图链接。
例如，在文章详情页中，如果您想显示当前文章的封面首图：
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
这里，name="Logo"会直接返回文章封面首图的URL。同时，我们通常会结合name="Title"来获取文章标题作为图片的alt属性，这不仅有助于SEO，也能在图片加载失败时提供友好的文字提示。
同样的逻辑也适用于分类页 (categoryDetail) 或单页面 (pageDetail)，例如调用分类的 Banner 大图：
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
调用文章的缩略图 (Thumb)
缩略图在列表页或侧边栏等位置尤其重要，它以小尺寸提供快速预览，同时不会占用过多的页面空间或影响加载速度。AnQiCMS在您上传文章图片时，会自动根据后台配置生成缩略图，甚至在您没有主动上传缩略图时，会从文章内容中提取第一张图片作为缩略图，或者使用您预设的默认缩略图。
要调用文章的缩略图，您可以这样使用archiveDetail标签：
<a href="{{item.Link}}">
<img src="{% archiveDetail with name="Thumb" %}" alt="{{item.Title}}" />
</a>
在文章列表页，您可以使用archiveList标签循环输出多篇文章，并在循环中调用每篇文章的缩略图。item变量代表当前循环的文章数据：
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
{# 调用文章缩略图 #}
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{% else %}
{# 如果没有缩略图，可以显示默认占位图或者不显示 #}
<img src="/public/static/images/default-thumb.png" alt="{{item.Title}}">
{% endif %}
</a>
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
</div>
{% endfor %}
{% endarchiveList %}
值得一提的是，如果您需要对任意一张图片URL进行缩略图处理（而不是直接调用已生成的Thumb字段），AnQiCMS还提供了|thumb过滤器。这个过滤器会根据您在后台“内容设置”中配置的缩略图尺寸和处理方式，动态生成指定图片的缩略图。例如：
<img src="{{ '/uploads/my_custom_image.jpg'|thumb }}" alt="自定义图片缩略图" />
调用文章的组图 (Images)
当一篇内容需要展示多张相关图片时，组图功能就显得非常有用。这在产品详情、案例展示、图片画廊等场景中尤为常见。AnQiCMS将组图作为一个图片数组存储，因此在模板中调用时，我们需要使用for循环来遍历并显示每一张图片。
例如，在文章详情页，如果您希望展示一组图片：
<div class="article-gallery">
{% archiveDetail articleImages with name="Images" %}
{% if articleImages %}
{% for img in articleImages %}
<img src="{{ img }}" alt="文章图片" />
{% endfor %}
{% else %}
<p>暂无更多图片展示。</p>
{% endif %}
</div>
这里，archiveDetail archiveImages with name="Images"将组图的URL列表赋值给articleImages变量，然后我们通过for循环逐一输出图片。您可以根据实际需求，将这些图片包装成轮播图、画廊或简单的图片列表。
同样，分类和单页面也支持组图，例如分类的 Banner 轮播图：
<div class="category-banner-slider">
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% for img in bannerImages %}
<div class="banner-item">
<img src="{{ img }}" alt="分类Banner" />
</div>
{% endfor %}
{% endif %}
</div>
实用技巧与优化建议
- 后台“内容设置”：这是您管理图片处理的核心区域。在这里，您可以设置缩略图的尺寸、裁剪或等比缩放方式、是否自动压缩大图、是否启用WebP格式等。合理配置这些选项，能有效提升网站加载速度和用户体验。
- 默认缩略图：在“内容设置”中设置一个默认缩略图是非常好的习惯。当文章没有指定缩略图时，默认图可以作为优雅的占位符，避免页面出现难看的空白或损坏的图片图标。
- 图片优化：上传图片时，尽量使用WebP格式（AnQiCMS支持自动转换），并确保图片尺寸与显示需求相符。过大的图片不仅浪费存储空间，还会严重拖慢页面加载速度。
- 语义化HTML：在使用
<img>标签时，始终填写alt属性，这不仅对SEO友好，也能提高网站的可访问性。 - CSS与JavaScript：图片的最终显示效果，如排版、尺寸调整、响应式布局甚至轮播效果，都需要通过CSS样式和JavaScript脚本来进一步实现。AnQiCMS提供的标签只是负责获取图片资源链接，而如何美观地呈现它们，则依赖于前端代码的精妙设计。
通过这些灵活的图片调用方式和后台的精细化配置，您可以在AnQiCMS中轻松驾驭网站的视觉内容，为您的访客提供更丰富、更具吸引力的浏览体验。
常见问题 (FAQ)
1. 为什么我的文章封面首图或缩略图没有显示，或者显示的图片不对？
首先，请检查您在后台编辑文章时，是否上传了“文档图片”（即缩略图）或文章内容中是否包含了图片。如果这两个条件都不满足，系统可能无法自动生成。其次，前往“后台设置”->“内容设置”，检查“默认缩略图”是否已设置，如果设置了，在没有图片时会自动显示默认图。最后，确保您的模板代码中name="Logo"或name="Thumb"拼写正确。
2. 如何让我的组图显示成动态的轮播图效果？
AnQiCMS的组图标签 (Images) 仅仅负责输出图片URL的列表。要实现轮播图的动态效果，您需要在前端模板中结合JavaScript库（如Swiper、Owl Carousel等）和CSS样式来构建。您可以将{% for img in articleImages %}循环输出的图片包裹在轮播组件所需的HTML结构中，然后引入相应的JS和CSS文件进行初始化。
3. 我上传的图片尺寸很大，AnQiCMS会自动进行优化吗？ 是的，AnQiCMS提供了强大的图片优化功能。在“后台设置”->“内容设置”中，您可以开启“是否自动压缩大图”并设置目标宽度，开启“是否启动Webp图片格式”将上传的图片自动转换为更小尺寸的WebP格式。这些设置能够有效减小图片文件大小，提升网站加载速度，而无需您手动对每张图片进行处理。