在网站运营中，视觉内容的吸引力至关重要。精心设计的分类缩略图和引人注目的Banner轮播图不仅能美化网站界面，更能有效引导用户浏览，提升网站的整体专业度和用户体验。安企CMS（AnQiCMS）提供了强大而灵活的功能，让您能够轻松管理和展示这些重要的视觉元素。本文将详细介绍如何在安企CMS中获取并显示分类的缩略图或Banner轮播图。
一、在安企CMS后台配置分类图片
首先，我们需要在安企CMS的后台为分类或单页面设置相应的图片。
1. 配置分类的缩略图和Banner轮播图
对于网站中的各类文章、产品等分类，您可以在其编辑页面设置专属图片。 进入安企CMS后台，导航至内容管理 -> 文档分类。选择一个您需要配置图片的分类进行编辑（或者新建分类）。在分类编辑页面的下方，您会找到“Banner图”和“缩略图”两个选项。
- 缩略图：通常用于列表页、推荐区域或分类封面的单张图片。您可以上传一张代表该分类的图片。
- Banner图：支持上传多张图片，非常适合在分类页面顶部作为轮播图展示，增加页面的动态感和视觉冲击力。
温馨提示：在上传Banner图时，建议保持所有图片的尺寸一致，以确保轮播效果流畅且美观。
2. 配置单页面的缩略图和Banner轮播图
安企CMS中的单页面（如“关于我们”、“联系我们”等）同样可以拥有独立的缩略图和Banner轮播图。 进入安企CMS后台，导航至页面资源 -> 页面管理。选择一个单页面进行编辑，在编辑页面的下方，同样会看到“Banner图”和“缩略图”的设置选项，其配置方式与分类图片类似。
二、在前端模板中调用分类图片
完成后台配置后，接下来我们需要在网站的前端模板中调用这些图片，让它们展示出来。安企CMS采用Django模板引擎语法，通过特定的标签即可轻松实现。
1. 调用分类缩略图
在分类列表页或需要展示分类信息的任何位置，您可以使用 categoryDetail 标签来获取分类的详细信息，包括缩略图。
- 获取分类缩略图（小图）：使用
Thumb字段。<div> <!-- 假设您正在当前分类页面，会自动获取当前分类的缩略图 --> <img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" /> </div> - 获取分类缩略图（大图或Logo）：使用
Logo字段。<div> <!-- 如果您想获取指定ID分类的Logo图片，例如ID为1的分类 --> <img src="{% categoryDetail with name="Logo" id="1" %}" alt="{% categoryDetail with name="Title" id="1" %}" /> </div>
2. 调用分类Banner轮播图
分类的Banner轮播图通常是多张图片组成的组图，需要通过循环来逐一显示。Images 字段用于存储这些图片。
<div class="category-banner-slider">
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %} {# 判断是否有Banner图存在 #}
{% for item in categoryBanners %}
<img src="{{ item }}" alt="{% categoryDetail with name="Title" %}" />
{% endfor %}
{% else %}
<!-- 如果没有设置Banner图，可以显示一个默认占位图或者其他内容 -->
<img src="/static/images/default-banner.jpg" alt="默认Banner" />
{% endif %}
{% endcategoryDetail %}
</div>
技巧：如果您只想显示Banner图中的第一张作为静态封面，而不是轮播，可以这样做：
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set firstBanner = bannerImages[0] %} {# 获取第一张图片 #}
<div class="category-cover" style="background-image: url({{ firstBanner }});">
<!-- 这里可以放置其他内容 -->
</div>
{% endif %}
{% endcategoryDetail %}
请注意，alt 属性对图片的SEO和可访问性非常重要，建议在模板中填充有意义的文本。
三、在前端模板中调用单页面图片
调用单页面的缩略图和Banner轮播图的方法与分类非常相似，只是使用的标签不同：pageDetail。
1. 调用单页面缩略图
<div>
<!-- 获取当前单页面的缩略图 -->
<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />
</div>
2. 调用单页面Banner轮播图
<div class="page-banner-slider">
{% pageDetail pageBanners with name="Images" %}
{% if pageBanners %}
{% for item in pageBanners %}
<img src="{{ item }}" alt="{% pageDetail with name="Title" %}" />
{% endfor %}
{% endif %}
{% endpageDetail %}
</div>
四、图片优化与性能考虑
为了提升网站加载速度和用户体验，合理优化图片至关重要。安企CMS在“后台设置 -> 内容设置”中提供了一系列图片处理功能：
- 是否启动Webp图片格式：开启后，上传的JPG、PNG等图片会自动转换为WebP格式，能有效减小图片体积，同时保持良好的图片质量。
- 是否自动压缩大图：针对尺寸较大的图片进行自动压缩，可以节省存储空间并加快加载。
- 缩略图处理方式和尺寸：您可以根据前端模板的需求，设定缩略图的生成方式（如等比缩放、补白或裁剪）和固定尺寸，避免传输过大的图片。
建议您根据网站实际需求，合理配置这些选项，让图片在保证质量的同时，以最优化的方式呈现在用户面前。
通过上述步骤，您就可以在安企CMS中灵活地获取并展示分类及单页面的缩略图和Banner轮播图，为您的网站增添丰富的视觉内容，提升用户体验。
常见问题 (FAQ)
1. 我已经在后台上传了分类的Banner图，为什么前台页面没有显示？
这通常是因为前端模板中缺少调用Banner图的代码。您需要检查对应分类列表页或详情页的模板文件，确保使用了 {% categoryDetail categoryBanners with name="Images" %} 这样的标签来获取并循环显示图片路径。如果模板中没有相应的<img>标签或轮播图组件，图片将无法显示。
2. 如何设置分类缩略图的显示尺寸和裁剪方式？ 安企CMS提供了两种设置方式：
- 全局设置：在后台的“后台设置” -> “内容设置”中，您可以找到“缩略图处理方式”和“缩略图尺寸”的选项，这里可以对全站的缩略图生成进行统一配置。
- 模板中通过CSS控制：即使后台生成了特定尺寸的缩略图，您仍然可以在前端模板的CSS样式中，通过设置
width、height、object-fit等属性来调整图片的最终显示尺寸和适应方式。
3. 分类的Banner图和单页的Banner图在功能上有什么不同？ 从功能实现上来说，分类的Banner图和单页的Banner图都是用于展示图片的轮播或静态背景。它们最主要的区别在于所关联的内容实体：
- 分类Banner图：通常与特定的文章分类、产品分类等内容列表相关联，用于提升该分类页面的视觉效果。
- 单页Banner图：与独立的、非列表型的内容页面（如“关于我们”、“服务介绍”）相关联，用于增强单页面的设计感。
在模板中调用时，它们使用不同的标签（
categoryDetail对应分类，pageDetail对应单页面）。