How to display category introduction, Banner image and thumbnail on AnQiCMS category page?

In website operation, the category page is not only a collection of content, but also an important entry for users to understand the website structure and deeply explore specific topics.A well-designed, informative category page that can significantly improve user experience and search engine optimization (SEO) effects.AnQiCMS provides flexible features, allowing us to easily display category descriptions, Banner images, and thumbnails on the category page, making your website's category page look fresh.

Understand the category page and template structure of AnQiCMS

In AnQiCMS, each category has its corresponding display page, usually used to list all articles or products under the category.These pages' content and layout are controlled by the corresponding template files.

By default, the template files of the category page are usually located in the template folder you are currently using/{模型table}/list.htmlFor example, the article category may correspond toarticle/list.htmlFor example, the product category may correspond toproduct/list.htmlYou can also customize the template for a specific category ID, for examplearticle/list-10.htmlThis provides highly customized possibilities for different categories.AnQiCMS will automatically load and parse the correct template based on the current category being accessed, and provide you with relevant data for the current category.

Add rich information for categories in the background

To display the category introduction, Banner image, and thumbnail on the category page, the first step is to add this information for your category in the AnQiCMS backend.

You can go toContent management -> Document classificationFind the category you need to edit, click the 'Edit' button.In the category editing page, in addition to basic information such as "Category Name" and "Document Model", you will see a collapsible area for "Other Parameters".Expand this area, and you will find the following key fields:

• Category introduction:This is a text box, where you can enter a brief introduction to the current category.This content not only helps users quickly understand the classification topics, but is also an important source for search engines to capture page descriptions (meta description).
• Banner image:Here you can upload one or more images. It is usually used to display an eye-catching visual element at the top of the category page, enhancing the beauty and professionalism of the page.You can upload multiple images, and the system will treat them as a group of images.
• Thumbnail:This is a separate image upload field. Thumbnails are usually used in category lists (such as the category modules displayed on the homepage) or in breadcrumbs navigation, to represent the current category in the form of a small image.

Make sure to fill in and upload these contents for your category, as this is the data basis for the frontend call.

Call and display information in the category template.

Once the various information of the classification is configured in the background, the next step is to call and display them in the front-end template file. We will mainly usecategoryDetailLabel to get the detailed data of the current category.

Display the category introduction

The category introduction is usually divided into two types: a brief overview and detailed rich text content.

If you fill in the brief text in the "Category Introduction" field in the background, you can use it in the templatename="Description"to retrieve and display:

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

If you need to display more detailed category content on your category page, including rich text and even Markdown format, you can fill in the "Category Content" field in the background and display it in the template withname="Content"Call it. Since the "category content" may contain HTML tags, to ensure that the browser parses it correctly, we need to use|safeFilter:

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

Display Banner Image

The banner image is usually one of the most eye-catching elements on the category page. The banner images uploaded on the backend can be accessed byname="Images"to get a list of images.

If your category only needs to display one main banner image, or if you have uploaded multiple but only want to take the first one, you can handle it like this:

{% 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 %}

If your category may have uploaded multiple banner images and you want to display them in a carousel format, you need to introduce a front-end carousel component (such as Swiper or Owl Carousel), then iteratebannerImagesArray:

{% 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 %}

Display thumbnails

Category thumbnails are usually used to display in category lists or navigation. If you want to display the thumbnail of the current category in a small area of the page, you can usename="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>

An example of building a richer category page

Below is an example of integrating the above elements into the category list pagearticle/list.htmlThe simplified example, you can expand it according to your design requirements:

”`twig {% extends ‘base.html’ %} {# Inherit your base template #}

{% 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