AnQiCMS 在内容展示上非常注重视觉效果和页面加载效率，因此，如何高效地获取和显示图片资源的缩略图，是我们在日常运营中经常会遇到的问题。幸运的是，AnQiCMS 提供了一套非常便捷且灵活的方式来处理图片缩略图，让我们可以轻松实现各种展示需求。
AnQiCMS 如何管理和生成图片缩略图？
在深入模板调用之前，我们有必要了解一下 AnQiCMS 在后台是如何管理和生成缩略图的。这能帮助我们更好地利用其功能。
1. 智能的缩略图生成机制： 当你上传图片作为文档的“文档图片”（也就是我们常说的文章或产品缩略图）时，AnQiCMS 并不会简单地保存原始图片，而是会根据你后台设置的规则，自动生成一个或多个缩略图版本。即便是你没有手动上传缩略图，只要文档内容中包含图片，系统也会智能地提取第一张图片作为文档的缩略图。这意味着，即使在内容发布时有所疏漏，网站也能保持良好的视觉一致性。
2. 灵活的后台配置： AnQiCMS 在“后台设置”下的“内容设置”中，提供了细致的缩略图处理选项。你可以根据网站的设计风格和性能要求，灵活调整：
- 缩略图处理方式： 选择“按最长边等比缩放”、“按最长边补白”或“按最短边裁剪”。不同的处理方式会影响缩略图的最终呈现效果，比如是否保持完整比例、是否需要填充空白等。
- 缩略图尺寸： 自定义缩略图的宽度和高度，以确保它们符合前端页面布局。设置合适的尺寸不仅能优化显示，还能有效减少图片体积，提升页面加载速度。
- 默认缩略图： 为那些没有指定或自动提取缩略图的文档，设置一张默认图片。这在确保网站所有内容都有封面图时非常有用。
- 批量重新生成： 如果你修改了缩略图尺寸或处理方式，系统还提供了批量重新生成所有缩略图的功能，让旧图片也能按照新规则更新。
3. 统一的图片资源管理： 所有上传的图片都会在“页面资源”下的“图片资源管理”中进行统一管理。在这里，你可以查看图片的原始大图、文件信息，甚至进行替换操作。值得一提的是，当你替换图片时，图片的 URL 地址保持不变，但内容会更新，这样可以避免因图片更新而导致的链接失效问题。如果原始图片过大，系统也会根据“内容设置”中的规则自动进行压缩。
在模板中获取和显示图片缩略图
理解了后台管理机制后，接下来就是如何在前端模板中调用并显示这些图片缩略图了。AnQiCMS 提供了多种标签和过滤器来满足我们的需求。
1. 通过内容标签直接获取：
在 AnQiCMS 中，大多数内容相关的标签（如 archiveDetail 用于文档详情、archiveList 用于文档列表、categoryDetail 用于分类详情、pageDetail 用于单页详情等）都会直接提供图片的 Logo 和 Thumb 字段，方便我们调用。
Logo字段： 通常指向内容的封面图或第一张图片，通常尺寸会相对较大，或者保持原始比例。Thumb字段： 专指根据后台设置处理过的缩略图，通常尺寸较小，适合列表页或需要统一尺寸的地方使用。
比如，在文档详情页，你可以这样获取并显示文档的缩略图或封面图：
{# 获取当前文档的封面图（Logo） #}
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
{# 获取当前文档的缩略图（Thumb） #}
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
在文档列表页，如果你想显示每篇文章的缩略图，可以使用 archiveList 标签配合循环：
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<div>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
{# 显示文档的缩略图 #}
{% if item.Thumb %}
<img alt="{{item.Title}}" src="{{item.Thumb}}">
{% endif %}
</a>
</div>
{% endfor %}
{% endarchiveList %}
类似地，分类列表或单页面列表也可以通过 item.Logo 或 item.Thumb 来获取各自的图片。
{% categoryList categories with moduleId="1" parentId="0" %}
{% for item in categories %}
<div>
<a href="{{ item.Link }}">
<h3>{{item.Title}}</h3>
{# 显示分类的缩略图 #}
{% if item.Thumb %}
<img style="width: 200px" src="{{item.Thumb}}" alt="{{item.Title}}" />
{% endif %}
</a>
</div>
{% endfor %}
{% endcategoryList %}
2. 使用 thumb 过滤器实现更灵活的缩略图获取：
AnQiCMS 还提供了一个非常实用的 thumb 过滤器。这个过滤器的强大之处在于，你可以将任何图片地址作为输入，它都会根据后台的缩略图设置，返回该图片的缩略图版本。这在某些特定场景下，比如你需要对文章内容中的图片进行缩略处理，或者你有一个完整图片 URL 但想显示其缩略图时，会非常方便。
使用方法很简单，只需在图片 URL 后面加上 |thumb：
{# 假设 item.Logo 是一个完整的图片 URL #}
<img src="{{ item.Logo|thumb }}" alt="图片描述" />
{# 你甚至可以直接将一个字符串图片地址进行缩略图处理 #}
{% set imageUrl = "https://www.anqicms.com/uploads/202309/14/example.webp" %}
<img src="{{ imageUrl|thumb }}" alt="示例图片" />
这个过滤器对于保持图片显示的一致性、提升加载速度尤其有用。当你在后台更改了缩略图处理方式和尺寸后，所有使用 |thumb 过滤器调用的图片都会自动更新为新的缩略图。
几点重要的注意事项
- 后台配置是基础： 所有的缩略图生成和展示效果，都离不开“内容设置”中的配置。如果你的缩略图显示不符合预期，首先应该检查那里的设置。
- 清理缓存： 无论是修改了图片，还是更改了后台的缩略图配置，如果前端页面没有及时更新，记得在 AnQiCMS 后台点击“更新缓存”，或者清理浏览器缓存，以确保最新效果得以呈现。
- 图片优化： 尽管 AnQiCMS 会自动压缩大图并支持 Webp 格式，但为了**的用户体验和 SEO 效果，我们仍然建议在上传图片前进行初步的压缩和优化。
通过灵活运用 AnQiCMS 提供的这些功能，我们可以轻松驾驭网站的图片展示，无论是列表美观度，还是页面加载速度，都能得到显著提升。
常见问题 (FAQ)
1. 为什么我的缩略图没有按照我设定的尺寸显示？ 这通常有几个原因。首先，请检查 AnQiCMS 后台“内容设置”中“缩略图尺寸”是否已正确配置。其次，如果前端页面仍然显示不正确，可能是因为浏览器缓存了旧的图片或 CSS 样式，尝试清理浏览器缓存或在 AnQiCMS 后台点击“更新缓存”再查看。此外，CSS 样式可能覆盖了图片本身的尺寸，确保没有外部样式强制设定了不同的图片大小。
2. 如何为没有上传缩略图的文档设置默认图片？ 在 AnQiCMS 后台的“内容设置”中，有一个“默认缩略图”的选项。你可以上传一张作为默认的图片，这样，当文档未上传缩略图且内容中也没有可提取的图片时，系统会自动使用这张默认缩略图来填充。这有助于保持网站视觉的一致性，避免出现空白图片。
3. Logo 字段和 Thumb 字段有什么区别？
在 AnQiCMS 的内容标签