如何为文档分类设置独立的Banner图或缩略图在前台显示？

在AnQiCMS中为文档分类设置独立的Banner图或缩略图，这能极大地提升网站的视觉吸引力和用户体验，让每个分类都拥有独特的品牌标识。其实，AnQiCMS在这方面提供了非常直观和灵活的功能，您可以通过简单的几步设置，就能让这些自定义图片在前台页面上华丽登场。

一、在后台为分类配置专属视觉元素

首先，我们需要在AnQiCMS的后台为您的文档分类上传和设置这些独特的图片。

1. 进入文档分类管理： 登录到AnQiCMS后台，在左侧导航栏找到“内容管理”，点击展开后选择“文档分类”。
2. 选择或创建分类： 在文档分类列表中，您可以选择一个现有的分类进行编辑，或者点击“添加分类”来创建一个新分类。进入分类的编辑页面后，您会看到一个详细的设置表单。
3. 上传 Banner 图： 在分类设置页面的“其他参数”部分，您会找到“Banner图”的选项。这里是您为该分类设置专属顶部大图的地方。
   • Banner图通常用于分类页面的顶部，作为引人注目的背景图、轮播图或主视觉图。
   • 您可以上传多张图片，系统会将其作为一组轮播图来处理。为了保持前台显示的美观和一致性，强烈建议您上传尺寸相同或比例协调的图片。
4. 上传缩略图： 紧接着“Banner图”下方，您会看到“缩略图”选项。
   • 缩略图通常是分类在列表页、导航菜单或内容卡片中展示的小型预览图，作为视觉标识。
   • 它不是强制性的，但在需要分类展示视觉预览时（例如在首页展示热门分类列表），缩略图能提供清晰的视觉引导，极大地提升用户体验。
5. 保存设置： 完成图片上传和任何其他分类信息的填写后，点击页面底部的“确定”或“保存”按钮，您的设置就会生效。

通过这些简单的后台操作，您已经为分类配置好了独有的视觉资源。接下来，我们需要了解如何在网站前端的模板文件中调用这些图片。

二、模板调用：让自定义图片在前台华丽登场

在后台设置好图片后，下一步就是让它们在前台页面显示出来。这需要我们在模板文件中使用AnQiCMS提供的特定标签来调用。AnQiCMS的模板标签体系强大而灵活，无论是单个分类页面还是分类列表，都能轻松实现。

1. 在单分类页面调用图片（例如：某个文章分类的详情页）

当您访问某个具体的分类页面时，可以使用 categoryDetail 标签来获取该分类的详细信息，包括我们刚刚设置的 Banner 图和缩略图。

{# 假设这是您的分类详情模板文件，如 article/list.html 或 product/list.html #}

{# 获取当前分类的完整数据对象 #}
{% categoryDetail currentCategory %}

{# 显示分类的名称作为页面标题 #}
<h1>{{ currentCategory.Title }}</h1>

{# 显示分类的描述 #}
<p>{{ currentCategory.Description }}</p>

{# 调用分类的 Logo 图（通常是主图或大图） #}
{% if currentCategory.Logo %}
    <img src="{{ currentCategory.Logo }}" alt="{{ currentCategory.Title }} 主图" class="category-main-logo">
{% endif %}

{# 调用分类的 Banner 组图，可用于轮播、背景等场景 #}
{% if currentCategory.Images %}
    <div class="category-banner-slider">
        {% for image in currentCategory.Images %}
            <img src="{{ image }}" alt="{{ currentCategory.Title }} Banner-{{ forloop.Counter }}" class="slider-item">
        {% endfor %}
    </div>
{% endif %}

{# 调用分类的缩略图（通常是小图，如果 Logo 已作为大图，这里可能不显示） #}
{% if currentCategory.Thumb %}
    <img src="{{ currentCategory.Thumb }}" alt="{{ currentCategory.Title }} 缩略图" class="category-small-thumb">
{% endif %}

在上面的代码中，我们首先通过 {% categoryDetail currentCategory %} 获取了当前分类的所有数据，并将其赋值给 currentCategory 变量。随后，您就可以通过 {{ currentCategory.Logo }}、{{ currentCategory.Images }} 和 {{ currentCategory.Thumb }} 来获取并显示对应的图片地址了。为了避免图片缺失导致页面显示异常，我们还加入了 {% if ... %} 判断，只有当图片存在时才渲染对应的 <img> 标签。

2. 在分类列表页调用图片（例如：首页展示多个分类卡片）

如果您希望在一个页面上展示多个分类（例如首页的分类模块，或某个父分类下的子分类列表），并为每个分类显示缩略图或Logo，那么 categoryList 标签就派上用场了。

”`twig {# 假设您在首页或其他聚合页面，需要列出多个分类并显示其缩略图 #} {# 这里以获取文章模型下的顶级分类为例，您可以根据需求调整 moduleId 和 parentId #} {% categoryList topCategories with moduleId=“1” parentId=“0” %}

{%