How to retrieve and display detailed information of a specific category, such as the category introduction and Banner image?

In website operation, clear and attractive classification information is crucial for improving user experience and optimizing search engine performance.A well-designed category page can not only help users quickly understand the theme of the category, but also attract users by displaying relevant visual elements (such as Banner images) and provide rich content for SEO.AnQi CMS provides powerful and flexible features, allowing you to easily achieve these goals.

Configure category information in the Anqi CMS backend

In Anqi CMS, managing category details is very intuitive.After entering the back-end management interface, please navigate to the "Document Classification" section under "Content Management".Here, you can create a new category or edit an existing one.

When you enter the editing page of a category, you will see multiple configuration items:

• Category introductionIn the category editing page, you will find a field named "Category Introduction".This area allows you to enter an overview of the category. This content not only serves as a window for users to understand the category, but is also an important basis for search engines to understand the theme of the page.Please fill in a concise description here that is attractive and contains keywords.
• Banner imageIn the collapse area of "Other Parameters", you will see the "Banner Image" option.This is the place to upload category-specific carousel images. You can upload multiple images, and the system will manage them in the form of a group image.To achieve **display effects, please try to upload images of consistent size when possible.These banner images can be displayed in various forms on the front-end page, such as carousel, background images, etc., greatly enriching the visual effects of the page.

After completing the filling and uploading, remember to click Save to make your changes take effect.

Call category details in the template

The AnQi CMS template system is designed to be very powerful and easy to use, you can easily obtain detailed information of the background configuration categories by using built-in template tags. The main ones used here arecategoryDetail.

Get category introduction

To get the introduction information of a category, you can usecategoryDetailLabel, and throughname="Description"The parameter to specify the description content of the category.

If it is used on a category page (such as a category list page),categoryDetailThe tag will automatically identify the category of the current page, you do not need to specify an ID. For example:

{# 假设这是分类页面的某处 #}
<p class="category-description">
    {% categoryDetail with name="Description" %}
</p>

If you need to be on a non-category page, or need to get a brief introduction of a specific ID category, you can addid="分类ID"Parameters. For example, to get the introduction of the category with ID 10:

<p class="some-other-category-description">
    {% categoryDetail with name="Description" id="10" %}
</p>

Display the category Banner image

The Banner images of categories are usually stored in the form of image groups because you can upload multiple images on the backend. To retrieve these images, usecategoryDetailtags, but the parameter isname="Images"This tag will return an array of image URLs.

Since the return value is an array, you need to usefora loop to iterate through the image array and display each image.

{# 假设这是分类页面的某处，用于显示Banner轮播图 #}
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
<div class="category-banner-slider">
    {% for item in categoryImages %}
    <img src="{{ item }}" alt="分类Banner图" class="img-fluid" />
    {% endfor %}
</div>
{% endif %}

If you only need the first Banner image as the page background, or only plan to display one main image, you can handle it like this:

{# 仅获取并显示第一张Banner图作为背景 #}
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set firstBanner = bannerImages[0] %} {# 获取数组中的第一个元素 #}
<div class="page-banner" style="background-image: url({{ firstBanner }});">
    <!-- 这里可以放置其他页面标题、描述等内容 -->
</div>
{% endif %}

here,{% set firstBanner = bannerImages[0] %}It will take out the URL of the first image in the array.

Comprehensive example: Display an introduction and Banner image on the category page

Suppose you are editing a list page template for a category (for examplearticle/list.htmlorproduct/list.html), hope to display the name, introduction and a Banner carousel at the top of the page.

{% comment %} 这是一个分类列表页模板的示例代码 {% endcomment %}

{% categoryDetail currentCategory with name="Category" %} {# 默认获取当前页面的分类信息 #}

<section class="category-header">
    <div class="container">
        <h1>{{ currentCategory.Title }}</h1> {# 显示分类名称 #}
        <p class="category-description">
            {{ currentCategory.Description }} {# 显示分类简介 #}
        </p>

        {% if currentCategory.Images %} {# 检查是否有Banner图上传 #}
        <div class="category-banner-slider owl-carousel"> {# 假设这里使用了一个轮播组件，例如Owl Carousel #}
            {% for image in currentCategory.Images %}
            <div class="item">
                <img src="{{ image }}" alt="{{ currentCategory.Title }} Banner" class="img-fluid" />
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</section>

<section class="category-content">
    <div class="container">
        {# 这里是分类下的文章或产品列表，可以使用archiveList标签获取 #}
        {% archiveList archives with type="page" %}
            {% for item in archives %}
            <article>
                <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
                <p>{{ item.Description }}</p>
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
            </article>
            {% empty %}
            <p>该分类下暂无内容。</p>
            {% endfor %}
        {% endarchiveList %}

        {# 分页导航 {% pagination pages with show="5" %} ... {% endpagination %} #}
    </div>
</section>

{% endcategoryDetail %}

In the above example,categoryDetailTag by assigning the entire category object tocurrentCategoryvariable (viawith name="Category"），Let you pass directlycurrentCategory.Title/currentCategory.DescriptionandcurrentCategory.ImagesAnd so on to access the various properties of the classification, making the code more tidy and readable.

Tip:

• When designing a banner image, considering the display effects of different devices, it is recommended to create responsive images or use CSS media queries for adaptation to ensure a good visual experience on various screen sizes.
• The file size of the banner image directly affects the page loading speed, please be sure to optimize and compress the image, and use modern image formats such as WebP whenever possible to improve website performance.

Frequently Asked Questions (FAQ)

1. Why did I upload a Banner image but it did not display on the front-end page?
   • Answer: Please first confirm that you have uploaded and saved the image in the 'Document Classification' editing page in the 'Other Parameters' section of the 'Banner Image' field in the background. Next, check if your template code is using it correctly.categoryDetail with name="Images"Label, and whether passed{% for ... in categoryImages %}Looped through and outputted<img>Label. In addition, browser cache or certain CSS styles may also cause images to be hidden, you can try clearing the browser cache or checking the developer tools.
2. Ask: Can the category introduction content support HTML tags?
   • Answer: Category introduction (DescriptionThe field is designed for plain text content. If you wish to include HTML formatted content in the category introduction, you can use the "category content" field (also available in the "other parameters" or main content area of the category editing page).In the template