如何为AnQiCMS分类页面配置和显示自定义Banner图和缩略图？

安企CMS（AnQiCMS）为我们提供了非常灵活的内容管理能力，其中一个非常实用的功能，就是能够为分类页面配置和展示自定义的Banner图和缩略图。这不仅能让我们的网站看起来更专业、更美观，还能有效提升用户体验和内容组织的效率。

为什么分类页面需要自定义Banner图和缩略图？

想象一下，如果您的网站只有一个通用的横幅图片或者没有任何视觉元素来区分不同的分类，用户在浏览时可能会感到枯燥乏味，甚至难以快速理解每个分类的主题。为每个分类定制专属的Banner图和缩略图，能够带来诸多好处：

首先，提升视觉吸引力与品牌一致性。一张设计精美的Banner图能迅速抓住访问者的眼球，传达分类页面的核心信息，并与您网站的整体品牌形象保持一致。 其次，优化用户导航体验。当用户看到具有代表性的缩略图时，能更快地识别和理解不同分类的内容，从而更轻松地找到他们感兴趣的信息。这就像给每个书架都贴上了带有插画的标签，一目了然。 再者，丰富内容展示，提升专业度。自定义图片能让您的分类页面内容更加饱满，避免单一文本列表的枯燥，向用户传递出网站运营的专业与用心。

安企CMS正是考虑到了这些需求，在分类管理中提供了直接配置这些图片的功能。

在AnQiCMS后台配置分类Banner图和缩略图

配置分类的Banner图和缩略图是一个直观简单的过程。我们只需进入AnQiCMS的后台管理界面，然后找到对应的分类进行编辑。

1. 登录后台并进入分类管理： 成功登录您的AnQiCMS后台后，在左侧导航栏找到“内容管理”菜单，点击展开，然后选择“文档分类”。这里会列出您网站所有的内容分类。
2. 编辑或新建分类： 您可以选择编辑一个已存在的分类，或者点击“添加顶级分类”或“添加子分类”来创建一个新分类。无论是哪种操作，都会进入分类的编辑页面。
3. 配置Banner图和缩略图： 在分类编辑页面中，向下滚动会看到一个“其他参数”的折叠区域。展开这个区域，您会发现“Banner图”和“缩略图”这两个选项。
   • Banner图： 这里允许您上传多张图片。通常，我们会将多张Banner图用于轮播展示，为分类页面增添动态效果。请务必注意，为了保持页面美观和加载速度，上传的Banner图片最好尺寸一致，并进行适当压缩。
   • 缩略图： 这是一个可选的配置项。如果您希望在网站的其他地方（比如首页的分类列表、侧边栏导航等）展示这个分类的代表性图片，就可以在这里上传一张缩略图。这张图片通常尺寸较小，更具概括性。
4. 保存设置： 完成图片上传和任何其他分类信息的修改后，记得点击页面底部的“确定”按钮保存您的更改。

值得一提的是，安企CMS在“后台设置”下的“内容设置”中，也提供了一些全局的缩略图处理选项，比如自动压缩大图、缩略图尺寸和处理方式等。这些全局设置会影响所有图片在生成缩略图时的行为，您可以根据网站的整体需求进行调整。

在模板中展示分类Banner图和缩略图

仅仅在后台上传了图片是不够的，我们还需要在网站的前端模板文件中引入相应的标签，才能将这些图片展示给访问者。安企CMS采用了类似Django模板引擎的语法，让模板制作变得非常容易。

通常，分类页面的模板文件会存放在/template目录下的特定位置，例如{分类模型}/list.html。如果您为某个分类指定了自定义模板，那么修改对应的自定义模板文件即可。

1. 展示当前分类的Banner图和缩略图：

在分类页面（例如article/list.html或product/list.html）中，我们可以使用categoryDetail标签来获取当前分类的详细信息，包括我们刚刚上传的Banner图和缩略图。

假设您想在分类页面顶部展示Banner图，并在页面某个位置展示缩略图，可以这样编写模板代码：

{# 获取当前分类的Banner组图，并取出第一张作为主Banner #}
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
    {# 假设只需要显示第一张Banner图 #}
    {% set mainBanner = categoryImages[0] %}
    <div class="category-banner" style="background-image: url({{mainBanner}});">
        {# 这里可以放置分类标题等信息 #}
        <h1>{% categoryDetail with name="Title" %}</h1>
    </div>
{% endif %}

{# 获取当前分类的缩略图，并显示在页面的其他位置 #}
{% categoryDetail categoryThumb with name="Thumb" %}
{% if categoryThumb %}
    <div class="category-thumbnail">
        <img src="{{categoryThumb}}" alt="{% categoryDetail with name="Title" %}" />
    </div>
{% endif %}

在这段代码中：

• {% categoryDetail categoryImages with name="Images" %}用来获取分类上传的所有Banner图片列表。categoryImages是一个数组，我们可以通过categoryImages[0]来获取第一张图片。
• {% categoryDetail categoryThumb with name="Thumb" %}则直接获取我们上传的缩略图地址。
• alt="{% categoryDetail with name="Title" %}"是一个很好的SEO实践，它会用分类的名称作为图片的替代文本，提高图片的可访问性和搜索引擎友好度。

如果您在“其他参数”中只上传了一张Banner图，并想将其作为主要视觉元素，也可以直接使用Logo字段，它通常指向分类设置的第一张图片或主要代表图：

{# 直接获取分类主要图片（Logo）作为Banner #}
{% categoryDetail categoryLogo with name="Logo" %}
{% if categoryLogo %}
    <div class="category-main-banner">
        <img src="{{categoryLogo}}" alt="{% categoryDetail with name="Title" %}" />
    </div>
{% endif %}

2. 在其他页面展示分类的缩略图：

有时候，我们不仅需要在分类页面展示图片，还可能在首页、侧边栏或者父级分类页面上，展示子分类的名称和对应的缩略图。这时，categoryList标签就派上用场了。

例如，在首页展示所有顶级分类及其缩略图：

”`twig

{% categoryList categories with moduleId="1"