如何设置AnqiCMS后台的“文档图片”或“缩略图”功能，在前台页面正确显示图片？
📅
👁️ 70
在安企CMS中管理和展示图片，特别是文档的缩略图或封面图，是网站内容运营的核心环节。安企CMS提供了灵活的后台配置和强大的模板标签系统，让你可以轻松地在前台页面正确显示这些图片。本文将一步步指导你如何设置和调用，确保你的网站图片能以**状态呈现给访问者。
后台设置篇：确保图片处理得当
在安企CMS后台，有几个关键区域影响着图片，尤其是缩略图的生成和处理。
内容设置：网站图片处理的“中央厨房”
首先，让我们来到后台的“后台设置”菜单，选择“内容设置”。这里就像是网站图片处理的“中央厨房”，所有的图片（包括文档图片）上传后，都会根据这里的规则进行处理。
缩略图处理方式与尺寸：这里是决定缩略图最终形态的核心。
- 缩略图处理方式：你可以选择“按最长边等比缩放”、“按最长边补白”或“按最短边裁剪”。这直接影响了缩略图是完整显示、自动填充白边，还是居中裁剪。根据你网站的设计风格，选择最合适的方式，例如，如果希望所有缩略图都保持相同的宽高比并填充背景，可以选择“按最长边补白”。
- 缩略图尺寸：在这里设定宽度和高度。如果你在模板中调用缩略图时发现图片尺寸不符或显示模糊，很可能是这里的设置与模板所需的尺寸不匹配。调整到你网站前端实际展示的尺寸，能有效提升图片质量。例如，你的文章列表需要显示200x150像素的缩略图，这里就应该设置为200x150。
图片自动压缩与WebP格式：这些设置与网站性能息息相关。
- 是否自动压缩大图：如果开启，系统会自动将上传的大图压缩到指定宽度，这能显著减少图片文件大小，加快页面加载速度。
- 自动压缩到指定宽度：配合上一项使用，你可以定义图片的最大宽度。
- 是否启动WebP图片格式：启用WebP能进一步压缩图片体积，同时保持视觉质量，对提升网站速度和SEO非常有帮助。一旦开启，后续上传的JPEG、PNG图片都会自动转换为WebP格式。
默认缩略图：这是一个非常实用的“兜底”选项。如果你在发布文档时没有上传特定的缩略图，系统就会使用这里设置的图片作为默认缩略图。这保证了即使没有手动添加，所有文档在列表或详情页也都能有一张统一的图片展示，避免空白或显示异常。
文档或分类编辑：图片上传与提取的来源
在后台的“内容管理”下，无论是“添加文档”还是“文档分类”，你都会找到上传和选择图片的地方。
- 文档图片（缩略图）：在编辑文档时，有一个专门的“文档图片”字段。你可以手动上传图片，或从已有的“图片库”中选择。这是最直接设置文档缩略图的方式。
- 自动提取缩略图：安企CMS非常智能！如果你发布文档时没有手动上传或选择“文档图片”，但文档内容中包含图片，系统会自动将文档内容中的第一张图片提取出来，作为该文档的缩略图。这意味着即使你忘记设置，只要内容中有图，前台也能有缩略图展示。
- 分类与单页的缩略图/Banner图：在编辑“文档分类”或“页面管理”中的单页时，你也会看到类似的“缩略图”或“Banner图”字段。它们的功能与文档缩略图类似，用于在分类列表页、分类详情页或单页中展示对应图片。
模板调用篇：在前台正确显示图片
后端设置妥当后，接下来就是如何在前端模板中正确调用并显示这些图片。安企CMS采用类似Django的模板引擎语法，通过特定的标签和变量来获取数据。
在安企CMS的模板文件中，你需要使用{{变量}}来输出数据，使用{% 标签 %}来进行逻辑控制或获取列表数据。
1. 文档列表页显示缩略图
在你的文章或产品列表页（通常是{模型table}/list.html这类模板），你会使用archiveList标签来循环展示文档。
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
{# 关键：调用缩略图 #}
{% if item.Thumb %}
<img alt="{{item.Title}}" src="{{item.Thumb}}">
{% else %}
{# 如果没有缩略图，可以显示默认图或占位图 #}
<img alt="{{item.Title}}" src="{% system with name='SiteLogo' %}">
{% endif %}
<div>{{item.Description}}</div>
</a>
</li>
{% empty %}
<li>
当前分类没有任何内容。
</li>
{% endfor %}
{% endarchiveList %}