How to get and display the detailed information of the current category in AnQiCMS template, such as title, description, thumbnail, and Banner group image?

Building a website in AnQiCMS, especially when it is necessary to present rich and accurate information on the category page, it is particularly important to deeply understand how to obtain detailed data of the current category in the template.This is not just for aesthetics, but also to provide a better user experience and search engine optimization.

The AnQiCMS template system is designed to be very flexible and easy to use, it adopts syntax similar to the Django template engine.When we are on a category page, we want to get the title, description, thumbnail, and even the carousel group information of the category, the system has prepared the corresponding tools for us.

Core tool:categoryDetailTag

To get the details of the current category, we mainly use a powerful tag:categoryDetail. This label can help us easily extract the various properties of the classification.Its usage is very intuitive, usually when we are already on the category page, even without specifying the category ID, it can intelligently identify and provide data for the current category.

For example, if we want to get the title of the current category, we can write it like this:

<h1 class="category-title">{% categoryDetail with name="Title" %}</h1>

Here, name="Title"Tell the system what we want to get is the category title. Similarly, it is also simple to get the category description:

<div class="category-description">
    {% categoryDetail categoryDesc with name="Description" %}
    {{ categoryDesc|safe }}
</div>

Here we introduce an intermediate variablecategoryDescTo receive the description content and use|safethe filter. This is because the classification description usually contains rich text format, such as links, bold text, or other HTML tags,|safeThe purpose is to inform the template engine that this content is safe and does not need to be escaped, so that HTML tags can be parsed and displayed correctly.

Display category images: thumbnail and Banner group images

The visual presentation of a website cannot do without pictures, and this is no exception for category pages. AnQiCMS allows us to set thumbnails and multiple banner groups for each category.

To get the thumbnail of the category, we can useLogoorThumbfield. Usually,LogoIt may represent a larger image size, whereasThumbrepresents a thumbnail processed by the system. You can choose to use it according to your design requirements:

<img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" class="category-thumb">

It is worth noting that it is recommended to always<img>the tag withaltproperties, and use categorization headings as their values, which is very beneficial for SEO and accessibility.

If your category is set to have multiple Banner groups, then you need a small loop to get them.ImagesThe field returns an array of image URLs, which we can iterate over to display all images:

<div class="category-banner-slider">
    {% categoryDetail categoryBanners with name="Images" %}
    {% if categoryBanners %}
        {% for imageUrl in categoryBanners %}
            <img src="{{ imageUrl }}" alt="{% categoryDetail with name="Title" %} Banner" class="banner-image">
        {% endfor %}
    {% endif %}
</div>

In the above code snippet, we first declareImagesvalue of the field tocategoryBannersthe variable. Then, we use aifTo judge the statementcategoryBannersTo avoid errors when there is no image. Next, usingforLoop throughcategoryBannersarray,imageUrlThe variable will sequentially obtain the URL of each image, then we can<img>They are displayed in the label.

If you only need to display the first Banner image as the top background or main image of the category page, you can do it like this:

{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
    {% set firstBanner = categoryBanners[0] %}
    <div class="category-hero-section" style="background-image: url('{{ firstBanner }}');">
        {# 其他内容，如分类标题等 #}
    </div>
{% endif %}

We use here,{% set %}The label defines a new variable.firstBannerStore the first element of the array and then use it as the URL for the background image.

Combined use, makes the category page shine

Combine these tags in a typical category list template file (such as{模型table}/list.htmlor a customizedlist-{分类ID}.html) and you can build the page header area like this:

{# 假设这是分类页的顶部区域，例如 template/default/article/list.html #}

{%- categoryDetail currentCategory with name="Extra" %} {# 'Extra'可用于获取所有自定义字段 #}
{%- if currentCategory %}
    <div class="category-header">
        <h1 class="category-heading">{% categoryDetail with name="Title" %}</h1>
        <div class="category-meta">
            <span class="category-id">分类ID：{% categoryDetail with name="Id" %}</span>
            <span class="category-post-count">包含文档：{% categoryDetail with name="ArchiveCount" %} 篇</span>
        </div>
        <div class="category-intro">
            {% categoryDetail categoryDescription with name="Description" %}
            {{ categoryDescription|safe }}
        </div>

        {% categoryDetail categoryLogo with name="Logo" %}
        {% if categoryLogo %}
            <img src="{{ categoryLogo }}" alt="{% categoryDetail with name="Title" %} 主图" class="category-main-image">
        {% endif %}

        {% categoryDetail categoryBannerImages with name="Images" %}
        {% if categoryBannerImages %}
            <div class="category-banner-group">
                {% for bannerItem in categoryBannerImages %}
                    <img src="{{ bannerItem }}" alt="{% categoryDetail with name="Title" %} Banner {{ forloop.Counter }}" class="banner-item">
                {% endfor %}
            </div>
        {% endif %}
    </div>
{%- endif %}

{# 接下来可以放文档列表标签 {% archiveList archives with type="page" %} ... {% endarchiveList %} #}

By using the above method, you can flexibly and comprehensively obtain and display all the detailed information of the current category in the AnQiCMS template, making the content of your website's category page more abundant and structured.

Frequently Asked Questions (FAQ)

1. Why did I use the tag in the templatecategoryDetailLabels, but no category information is displayed on the page?

First, make sure you have filled in the corresponding information for the current category in the AnQiCMS backend under "Content Management" -> "Document Category", such as "Category Name", "Category Introduction", "Thumbnail", and "Banner Image".If the background data is empty, the template naturally cannot retrieve and display it.Secondly, please check the template code you havenameIs the parameter spelled correctly, for examplename="Title"/name="Description"And, note the case sensitivity.

2. I want to get the category information of a specified ID, not the category information of the current page. How should I do it?

categoryDetailTags support throughidSpecify the parameter to get information about a category. For example, if you want to get the title of the category with ID 5, you can write it like this: {% categoryDetail with name="Title" id="5" %}This is very useful when referencing specific category information on the homepage or other non-category pages.

How to display only the first image of the category Banner group instead of looping through all?

When you go through{% categoryDetail categoryBanners with name="Images" %}After obtaining the Banner image array, you can use{% set %}Label and array index to get the first image. For example:

{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
    {% set firstBanner = categoryBanners[0] %}
    <img src="{{ firstBanner }}" alt="分类主Banner图">
{% endif %}

The benefit of doing this is that even if multiple Banner images are uploaded on the backend, you can flexibly control to only display the first one, whileifjudgment can also avoid errors on the page when there are no images.