在网站运营中，视觉元素的运用对于吸引用户、提升品牌形象至关重要。分类页面作为用户浏览内容的重要入口，如果能配备专属的Banner图或缩略图，无疑会大大增强页面的美观度和专业感。接下来，我们就一起看看如何在AnQiCMS中实现这一效果。
一、后台设置：为分类配置专属视觉元素
要为分类添加专属的视觉元素，我们首先需要进入AnQiCMS的后台管理界面。请找到并点击左侧导航栏中的“内容管理”，然后选择“文档分类”。在这里，您可以管理网站所有的分类，无论是文章分类、产品分类，还是您自定义的其他内容模型分类，都可以进行视觉定制。
点击某个现有分类的“编辑”按钮，或者新建一个分类时，您会看到一个包含多项设置的表单。在表单的底部，通常会有一个“其他参数”的折叠区域。展开这个区域，您会发现两个非常重要的选项：
- Banner图： 如果您希望在分类页的顶部展示一张或多张大幅的图片作为横幅广告或背景，可以在这里上传。AnQiCMS支持您上传多张图片，形成一个Banner轮播的效果。为了确保页面显示效果一致，建议您上传尺寸相同的图片。
- 缩略图： 分类缩略图通常用于在分类列表、导航菜单或其他模块中，以小尺寸图片形式代表该分类。它不是必须的，但对于提升列表的视觉识别度非常有帮助。这里一般只需要上传一张图片。
您可以根据实际需求，将设计好的Banner图和缩略图上传到对应的位置。完成上传后，记得点击“确定”保存您的分类设置。
虽然我们在这里设置的是分类特有的图片，但也要留意全局的内容设置中关于“缩略图处理方式”和“缩略图尺寸”的选项。这些全局设置可能会影响到分类缩略图的最终显示效果，保持一致性有助于网站整体风格的协调。
二、模板调用：让视觉元素在前台精彩呈现
完成后台图片的上传后，下一步就是让它们在网站前台优雅地展示出来。这需要我们对AnQiCMS的模板文件进行一些调整。AnQiCMS采用了类似Django模板引擎的语法，熟悉之后会发现其灵活性和易用性。
通常，分类页面的模板文件可能位于 template/{您的模板目录}/{模型table}/list.html 或您为特定分类自定义的 list-{分类id}.html 中。如果分类的Banner图要显示在文章或产品详情页的顶部，那么可能还需要修改 detail.html 模板。
AnQiCMS提供了 categoryDetail 标签，专门用于获取当前或指定分类的详细信息，包括我们刚刚上传的Banner图和缩略图。
1. 调用分类缩略图（Thumb）
如果您只想为每个分类显示一个简洁的缩略图，例如在某个分类列表模块中，可以使用 categoryDetail 标签并指定 name="Thumb"。
假设您有一个分类列表，想要显示每个分类的缩略图和名称：
{% categoryList categories with moduleId="1" parentId="0" %} {# 假设获取文章模型下的顶级分类 #}
<ul class="category-thumbs">
{% for item in categories %}
<li>
<a href="{{ item.Link }}">
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
{% else %}
{# 如果没有缩略图，可以显示一个默认图片或文字 #}
<img src="/public/static/images/default-thumb.png" alt="默认图片" />
{% endif %}
<h3>{{ item.Title }}</h3>
</a>
</li>
{% endfor %}
</ul>
{% endcategoryList %}
在分类的列表页（如 list.html），如果您想直接显示当前分类的缩略图，可以这样写：
{# 在分类列表页顶部显示当前分类缩略图 #}
<div class="category-banner-thumb">
{% categoryDetail currentCategoryThumb with name="Thumb" %}
{% if currentCategoryThumb %}
<img src="{{ currentCategoryThumb }}" alt="{% categoryDetail with name="Title" %}" />
{% endif %}
</div>
2. 调用分类Banner图（Images 或 Logo）
对于分类页顶部的大幅Banner图，您可以选择调用单个 Logo 图片（通常是主Banner图），或者调用 Images 字段以实现轮播效果。
显示单个Banner图：
如果您只需要显示一张主要的Banner图，可以直接调用 Logo 字段。这个字段在后台上传“Banner图”时，通常会指定第一张作为Logo，或者在“缩略图”上传时，选择大图作为Logo。
{# 在分类列表页顶部显示当前分类Banner大图 #}
<div class="page-banner">
{% categoryDetail categoryBannerLogo with name="Logo" %}
{% if categoryBannerLogo %}
<img src="{{ categoryBannerLogo }}" alt="{% categoryDetail with name="Title" %}" style="width: 100%; height: auto;" />
{% endif %}
</div>
或者，如果您上传了多张Banner图到Images字段，但只想显示第一张，可以这样处理：
{# 从Banner组图中获取第一张图片作为主Banner #}
<div class="page-banner">
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set mainBanner = bannerImages[0] %}
<img src="{{ mainBanner }}" alt="{% categoryDetail with name="Title" %}" style="width: 100%; height: auto;" />
{% endif %}
</div>
显示多个Banner图（轮播效果）：
如果您的设计需要展示多张Banner图进行轮播，那么 Images 字段会返回一个图片地址数组，您可以使用 for 循环来遍历并配合前端的JS轮播插件实现：
{# 遍历所有Banner图，用于轮播组件 #}
<div class="swiper-container"> {# 假设您使用了Swiper轮播库 #}
<div class="swiper-wrapper">
{% categoryDetail categoryImages with name="Images" %}
{% for item in categoryImages %}
<div class="swiper-slide">
<img src="{{ item }}" alt="{% categoryDetail with name="Title" %}" style="width: 100%; height: auto;" />
</div>
{% endfor %}
{% endcategoryDetail %}
</div>
{# 如果需要，可以添加分页器和导航按钮 #}
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
三、视觉效果增强与**实践
仅仅显示图片还不够，如何让它们真正“增强视觉效果”呢？以下是一些建议：
- 响应式设计： 确保您的Banner图和缩略图在不同设备（PC、平板、手机）上都能良好显示。使用CSS
max-width: 100%; height: auto;是一个基本的响应式实践。 - 图片优化： 上传前对图片进行压缩，并考虑使用WebP等现代图片格式，以加快页面加载速度。AnQiCMS在内容设置中提供了WebP转换和图片自动压缩大图的功能，您可以充分利用。
- Alt文本： 为图片添加描述性的
alt文本，这不仅有助于SEO，也能提升网站的可访问性，对使用屏幕阅读器的用户非常友好。在上述示例中，我们使用了alt="{{ item.Title }}"。 - 统一风格： 尽量保持同一类视觉元素