如何在AnQiCMS分类页显示分类简介、Banner图和缩略图？

在网站运营中，分类页不仅是内容的聚合，更是用户了解网站结构、深入探索特定主题的重要入口。一个设计良好、信息丰富的分类页，能显著提升用户体验和搜索引擎优化（SEO）效果。AnQiCMS 提供了灵活的功能，让我们可以轻松地在分类页上展示分类简介、Banner图和缩略图，让您的网站分类页焕然一新。

理解 AnQiCMS 的分类页与模板结构

在 AnQiCMS 中，每一个分类都有其对应的展示页面，通常用于列出该分类下的所有文章或产品。这些页面的内容和布局，都是由相应的模板文件控制的。

默认情况下，分类页的模板文件通常位于您当前使用的模板文件夹下的 /{模型table}/list.html，例如文章分类可能对应 article/list.html，产品分类可能对应 product/list.html。您也可以为特定的分类ID自定义模板，比如 article/list-10.html，这为不同的分类提供了高度定制化的可能。AnQiCMS 会根据当前访问的分类，自动加载并解析正确的模板，并为您提供当前分类的相关数据。

在后台为分类添加丰富信息

要在分类页上展示分类简介、Banner图和缩略图，第一步是在 AnQiCMS 后台为您的分类添加这些信息。

您可以前往 内容管理 -> 文档分类，找到您需要编辑的分类，点击“编辑”按钮。在分类编辑页面中，除了“分类名称”和“文档模型”等基础信息外，您会看到一个“其他参数”的折叠区域。展开这个区域，您将发现以下几个关键字段：

  • 分类简介： 这是一个文本输入框，您可以在这里填写对当前分类的简要介绍。这些内容不仅有助于用户快速理解分类主题，也是搜索引擎抓取页面描述（meta description）的重要来源。
  • Banner图： 这里允许您上传一张或多张图片。通常用于在分类页顶部展示一个醒目的视觉元素，增加页面的美观度和专业性。您可以上传多张图片，系统会将其作为图片组处理。
  • 缩略图： 这是一个单独的图片上传字段。缩略图通常用于在分类列表（例如首页展示的分类模块）或面包屑导航中，以小图的形式代表当前分类。

确保为您的分类填写并上传这些内容，这是前端调用的数据基础。

在分类模板中调用并展示信息

一旦在后台配置好了分类的各项信息，接下来就是在前端模板文件中将它们调用并显示出来。我们将主要使用 categoryDetail 标签来获取当前分类的详细数据。

显示分类简介

分类简介通常分为两种：简短的概述和详细的富文本内容。

如果您在后台的“分类简介”字段填写了简要文字，可以在模板中使用 name="Description" 来获取并展示：

<div class="category-description-short">
    <p>{% categoryDetail with name="Description" %}</p>
</div>

如果您的分类页需要展示更详细的、包含富文本甚至Markdown格式的分类内容，可以在后台的“分类内容”字段填写，并在模板中以 name="Content" 来调用。由于“分类内容”可能包含HTML标签，为了确保浏览器正确解析，我们需要使用 |safe 过滤器：

<div class="category-full-content">
    {% categoryDetail categoryContent with name="Content" %}{{ categoryContent|safe }}
</div>

展示 Banner 图

Banner图通常是分类页最吸睛的元素之一。在后台上传的Banner图，可以通过 name="Images" 来获取一个图片列表。

如果您的分类只需要展示一张主Banner图，或者您上传了多张但只想取第一张，可以这样处理：

{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
    {# 假设您只想显示上传的第一张Banner图 #}
    {% set mainBanner = bannerImages[0] %}
    <div class="category-banner" style="background-image: url('{{ mainBanner }}');">
        {# 您可以在Banner上叠加分类名称或其他信息 #}
        <h1>{% categoryDetail with name="Title" %}</h1>
    </div>
{% endif %}

如果您的分类可能上传了多张Banner图，希望以轮播图的形式展示，您需要引入一个前端轮播组件（例如Swiper或Owl Carousel），然后遍历 bannerImages 数组：

{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
    <div class="category-carousel swiper-container">
        <div class="swiper-wrapper">
            {% for image in bannerImages %}
                <div class="swiper-slide">
                    <img src="{{ image }}" alt="{% categoryDetail with name="Title" %}" />
                </div>
            {% endfor %}
        </div>
        {# 如果需要，添加分页器和导航按钮 #}
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
{% endif %}

显示缩略图

分类缩略图通常用于在分类列表或导航中展示。如果您希望在当前分类页面的某个小区域显示其自身的缩略图，可以使用 name="Thumb"：

<div class="category-thumbnail-area">
    {% categoryDetail categoryThumb with name="Thumb" %}
    {% if categoryThumb %}
        <img src="{{ categoryThumb }}" alt="{% categoryDetail with name="Title" %}" />
    {% else %}
        {# 如果没有上传缩略图，可以显示一个默认占位图 #}
        <img src="/public/static/images/default-thumb.png" alt="{% categoryDetail with name="Title" %}" />
    {% endif %}
</div>

综合示例：构建一个更丰富的分类页

下面是一个将上述元素整合到分类列表页 article/list.html 中的简化示例，您可以在此基础上根据您的设计需求进行扩展：

”`twig {% extends ‘base.html’ %} {# 继承您的基础模板 #}

{% block title %}

<title>{% tdk with name="Title" siteName=true %}</title>

{% endblock %}

{% block content %}

<div class="container">
    {# 分类 Banner 区域 #}
    {% categoryDetail bannerImages with name="Images" %}
    {% if bannerImages %}
        {% set mainBanner = bannerImages[0] %} {# 假设只显示第一张作为主Banner #}
        <div class="hero-banner" style="background-image: url('{{ mainBanner }}');">
            <h1 class="hero-title">{% categoryDetail with name="Title" %}</h1>
        </div>
    {% else %}
        <div class="hero-banner-placeholder">
            <h1 class="hero-title">{% categoryDetail with name="Title" %}</h1>
        </div>
    {% endif %}

    <div class="category-header">
        {# 分类缩略图，可选 #}
        {% categoryDetail categoryThumb with name="Thumb" %}
        {% if categoryThumb %}
            <div class="category-icon">
                <img src="{{ categoryThumb }}" alt="{% categoryDetail with name="Title" %}" />
            </div>
        {% endif %}

        {# 分类简介 #}
        <div class="category-intro">
            <p>{% categoryDetail with name="Description" %}</p>
        </div>
    </div>

    {# 详细分类内容，如果需要 #}
    {% categoryDetail categoryFullContent with name="Content" %}
    {% if categoryFullContent %}
        <div class="category-detail-content">
            {{ categoryFullContent|safe }}
        </div>
    {% endif %}

    <hr>

    {# 该分类下的文章列表 #}
    <div class="article-list">
        <h2>最新文章</h2>
        {% archiveList archives with type="page" limit="10" %}
            {% for item in archives %}
            <div class="article-item">
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p>{{ item.Description }}</p>
                <small>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }} 阅读: {{ item.Views }}</small>
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb" />
                {% endif %}
            </div>
            {% empty %}
            <p>该分类下暂无文章。</p>
            {% endfor %}
        {% endarchiveList %}

        {# 分页导航 #}
        <div class="pagination">
            {% pagination pages with show="5" %}
                <ul>
                    {% if pages.PrevPage %}<li class="page-item"><a href="{{pages.PrevPage.Link}}">上一页</a></li>{% endif %}
                    {% for page