在网站运营中，分类页面不仅仅是内容的归类展示，更是用户探索网站、深入了解产品或服务的关键入口。一个设计精良的分类Banner图，能有效提升页面的视觉吸引力，强化品牌形象，并引导用户进行下一步操作。AnQiCMS作为一个高效的内容管理系统，提供了灵活的方式来管理和调用这些Banner图片。
接下来，我们将详细探讨如何在AnQiCMS中为分类页面设置Banner图，并将其呈现在网站前端。
一、后台管理：为分类配置Banner图
首先，您需要在AnQiCMS的后台管理界面中，为您的分类页面上传并配置Banner图片。
- 进入分类管理：登录AnQiCMS后台，导航至“内容管理”模块，选择“文档分类”或“产品分类”，找到您希望添加Banner图的特定分类，点击“编辑”进入其详细设置页面。
- 上传Banner图：在分类的编辑页面中，您会看到一个名为“Banner图”的功能选项。这里允许您上传一张或多张图片。通常，为了保持页面的整洁和专业性，建议上传尺寸一致的Banner图片。这些图片可以是静态图片，也可以作为轮播图的素材。
- 保存设置：上传完成后，务必点击页面底部的“确定”或“保存”按钮，以确保您的配置生效。
完成这一步骤后，您的分类数据中就包含了Banner图片的信息，接下来就是在前端模板中调用它们。
二、模板调用：在分类页面显示Banner图
要在网站的分类页面（通常是文章列表页或产品列表页）上显示这些Banner图，我们需要编辑相应的模板文件。AnQiCMS的分类页面模板通常命名为 list.html，或更具体的 list-{分类ID}.html（例如 article/list.html 或 product/list-10.html）。
AnQiCMS提供了一个名为 categoryDetail 的强大模板标签，专门用于获取当前分类或指定分类的详细信息，这其中就包括我们刚刚在后台上传的Banner图片。
1. 获取分类的Banner图片数据
在分类页面的模板中，您可以通过以下方式获取当前分类的Banner图片列表：
{% categoryDetail categoryImages with name="Images" %}
这里，categoryImages 是您自定义的一个变量名，用于存储获取到的Banner图片数组。name="Images" 则是告诉系统您需要获取分类的Banner图片组。因为您已经在当前分类页面，所以 categoryDetail 标签会自动识别并获取当前分类的数据，无需额外指定 id 或 token 参数。
获取到的 categoryImages 是一个图片URL的数组，您可以根据需求遍历这个数组，或者只取其中的第一张图片。
2. 显示多张Banner图（轮播图）
如果您上传了多张Banner图片，并希望在前端以轮播图的形式展示，可以结合AnQiCMS的 for 循环标签进行遍历：
<div class="category-banner-carousel">
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %} {# 判断是否有图片上传 #}
{% for item in categoryImages %}
<div class="carousel-item">
<img src="{{ item }}" alt="{% categoryDetail with name="Title" %} Banner" />
</div>
{% endfor %}
{% else %}
{# 如果没有Banner图，可以显示一个默认占位图或者不显示 #}
<img src="/static/images/default-banner.jpg" alt="默认分类Banner" />
{% endif %}
{% endcategoryDetail %}
</div>
在这个示例中，item 变量在每次循环时会获取到数组中的一个图片URL。alt 属性则利用 categoryDetail with name="Title" 标签动态获取当前分类的标题，提升SEO友好性。.category-banner-carousel 和 .carousel-item 是一些自定义的CSS类，您可能还需要配合JavaScript库（如Swiper、Owl Carousel等）来实现轮播效果。
3. 显示单张Banner图（作为页面顶部背景）
如果您的设计只需要在分类页面顶部显示一张Banner图，例如作为页面的背景图，那么您可以只获取数组中的第一张图片：
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set firstBanner = bannerImages[0] %} {# 获取第一张图片URL #}
<div class="page-top-banner" style="background-image: url('{{ firstBanner }}');">
<h1>{% categoryDetail with name="Title" %}</h1>
<p>{% categoryDetail with name="Description" %}</p>
</div>
{% else %}
{# 如果没有Banner图，可以显示一个默认的背景或者占位内容 #}
<div class="page-top-banner default-bg">
<h1>{% categoryDetail with name="Title" %}</h1>
<p>欢迎访问我们的{% categoryDetail with name="Title" %}分类</p>
</div>
{% endif %}
{% endcategoryDetail %}
这里，我们使用 {% set firstBanner = bannerImages[0] %} 将获取到的第一张图片URL赋值给 firstBanner 变量，然后将其用作CSS背景图片。这种方式灵活且常见，能够很好地融入页面设计。同样，alt 属性和默认占位图的逻辑也应考虑。
总结
通过AnQiCMS后台简洁的分类管理功能，结合灵活强大的模板标签，您可以轻松地为网站的分类页面添加和显示Banner图。无论是多图轮播还是单图背景，AnQiCMS都能提供便捷的实现途径，帮助您打造视觉吸引力强、用户体验优秀的网站。
常见问题 (FAQ)
1. 为什么我明明在后台上传了分类Banner图，前台页面却不显示？
这通常是因为您的当前分类页面模板（例如 list.html 或 list-{分类ID}.html）中没有添加相应的模板调用代码。请检查您的模板文件，确保已经使用了 {% categoryDetail categoryImages with name="Images" %} 这样的标签来获取并展示图片。如果模板中没有这些代码，或者代码有误，Banner图就不会被显示出来。
2. 如果分类下没有设置Banner图，页面会显示什么？
这取决于您在模板中如何处理没有Banner图的情况。在上面的示例代码中，我们使用了 {% if categoryImages %} 来判断是否有图片数据。如果 categoryImages 为空，您可以选择显示一个默认的占位图片、一个预设的背景颜色，或者干脆不显示Banner区域，以保持页面的内容完整性和设计一致性。
3. 我可以为不同的分类设置不同的Banner图显示方式吗？例如，一个分类用轮播图，另一个分类只用单图？
当然可以。AnQiCMS的模板机制非常灵活。
一种方法是为不同的分类指定不同的模板文件。您可以在分类后台编辑页面中，找到“分类模板”选项，为特定分类指定一个独特的模板（例如 article/list-carousel.html 或 article/list-single-banner.html），然后在这些模板中分别编写轮播图或单图的调用代码。
另一种方法是在同一个分类模板中，通过判断当前分类的某些特性（如分类ID、自定义字段等）来动态决定显示逻辑。例如，您可以设置一个分类的自定义字段来指示其Banner是“轮播”还是“单张”，然后在模板中使用 if 条件语句进行判断和渲染。