How to retrieve and display detailed information of a specific category (such as description, Banner image)?

In AnQi CMS, it is crucial to flexibly obtain and display detailed information about categories, such as descriptions, banners, or thumbnails, which is essential for building a rich and visually appealing website.Whether it is necessary to display a brief introduction on the category list page or to quote the promotional picture of a specific category on a particular page, Anqi CMS provides intuitive and powerful template tags to help you meet these needs.

To retrieve detailed information about a category, we mainly rely oncategoryDetailThis template tag. This tag is specifically designed to extract various data items of a single category, allowing you to precisely control how this content is presented on the front-end page.

Core tags:categoryDetailUsage of

categoryDetailthe basic usage of tags is{% categoryDetail 变量名称 with name="字段名称" %}where，“variable name”is optional,if you specify a variable name,you can later refer to the data obtained through this variable;If not specified, the tag will directly output the value of the field.

This label's most commonly used parameter isnameIt is used to specify the specific fields of the category information you want to obtain. For example, to get the description of the category, you would usename="Description"; To retrieve the banner image, it will usename="Images".

In addition, you can also useidortokenparameters to specify which category of information to retrieve:

• idParameters: Specify the unique numeric ID of the category. For example,id="10"It will fetch the category information with ID 10.
• tokenParameter: Specify through the category URL alias (custom URL). For example,token="news-center"Will get the category information with the URL alias "news-center".

If notcategoryDetailthe tagidortokenIt will intelligently try to obtain the category information associated with the current page.This is very convenient on the category list page or category detail page, as you do not need to manually specify the ID, the system will automatically identify the current category.

Get and display category description

Category descriptions are usually used to briefly introduce the content of the category and are also very helpful for SEO.In the Anqi CMS backend, you can fill in the "Category Introduction" field on the "Document Category" editing page.

In the template, you can retrieve and display it in the following way:

{# 假设这是在某个分类页面，自动获取当前分类的描述 #}
<div>分类简介：{% categoryDetail with name="Description" %}</div>

{# 如果您想获取指定ID（例如ID为5）的分类描述 #}
<div>关于我们分类简介：{% categoryDetail with name="Description" id="5" %}</div>

{# 将描述内容赋值给一个变量，再进行处理或显示 #}
{% categoryDetail categoryDesc with name="Description" %}
<p>{{ categoryDesc|safe }}</p>

Please note that if the category description may contain HTML tags (such as formatted content entered in the background rich text editor), it is recommended to use|safeA filter to ensure that HTML content is parsed and displayed correctly, rather than being escaped as plain text.

Display the category Banner image and thumbnail

The banner image and thumbnail are an important part of the website's visual presentation.On the Anqi CMS backend's 'Document Category' editing page, you can upload 'Banner images' (supporting multiple) and thumbnails.

Get the category thumbnail (Logo/Thumb)

A category thumbnail usually refers to a representative image. In Anqi CMS, you can usename="Logo"orname="Thumb"to get:

{# 获取当前分类的缩略图大图 #}
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />

{# 获取当前分类的缩略图 #}
<img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />

{# 获取指定ID（例如ID为5）分类的缩略图 #}
<img src="{% categoryDetail with name="Logo" id="5" %}" alt="{% categoryDetail with name="Title" id="5" %}" />

Herealtthe title of the category is usually used as an attributename="Title"to fill in order to facilitate SEO and accessibility.

Display category banner image (Images)

Category banners are usually a set of images that can be used for slideshows or multi-image displays.name="Images"It will return an array of image URLs. Since it is an array, you need to useforloop to traverse and display them.

{# 假设您正在一个分类页面，要显示该分类的所有Banner图 #}
<div class="category-banner-slider">
    {% categoryDetail bannerImages with name="Images" %}
    {% for image_url in bannerImages %}
        <img src="{{ image_url }}" alt="{% categoryDetail with name="Title" %}" />
    {% endfor %}
</div>

{# 如果您只需要显示第一张Banner图 #}
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %} {# 确保图片数组不为空 #}
    <div class="main-banner" style="background-image: url('{{ bannerImages[0] }}');">
        {# 这里可以放一些叠加的文字或按钮 #}
    </div>
{% endif %}

By{% if bannerImages %}such a judgment to avoid template errors when no image is uploaded.bannerImages[0]You can directly get the first picture in the array.

Get the content of the category and custom fields.

In addition to the description and images, the category may also have a longer "category content" or fields that you customize for the model in the backend.

Get category content (Content)

If the category content is rich, you can fill in the "category content" field on the backend. The way to obtain it in the template is similar to the description:

{% categoryDetail categoryContent with name="Content" %}
<div class="category-full-content">
    {{ categoryContent|safe }} {# 同样，如果包含HTML，使用|safe #}
</div>

Get Custom Field

The Anqi CMS allows you to add custom fields to content models (which can affect categories). If you create a category model namedcustom_field_nameThe field, you can directly access by its name:

{# 获取名为 custom_field_name 的自定义字段的值 #}
<div>自定义信息：{% categoryDetail with name="custom_field_name" %}</div>

{# 如果您想遍历所有自定义字段，可以使用 name="Extra" #}
{% categoryDetail categoryExtraFields with name="Extra" %}
<div class="custom-fields">
    {% for field in categoryExtraFields %}
        <div>
            <span>{{ field.Name }}：</span>
            <span>{{ field.Value }}</span>
        </div>
    {% endfor %}
</div>

name="Extra"Will return an array containing all custom fields, each field includesName(field display name) andValue(Value) attribute, you can traverse and display it as needed.

CombinecategoryListTag

In some cases, you may first need to traverse the category list, and then display the details of each category. At this point, you can integratecategoryDetailthe logic intocategoryListin the loop. For example, when outputting the first-level categories in the loop, display the thumbnail and description of each category:

{% categoryList categories with moduleId="1" parentId="0" %} {# 获取文章模型下所有顶级分类 #}
    {% for category in categories %}
    <div class="category-item">
        <h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
        {# 直接使用 category 变量中包含的 Logo 和 Description 字段 #}
        {% if category.Thumb %}<img src="{{ category.Thumb }}" alt="{{ category.Title }}" />{% endif %}
        <p>{{ category.Description }}</p>
    </div>
    {% endfor %}
{% endcategoryList %}

Please note,categoryListThe tag is in the loop,itemvariable (here iscategory) already includes the categories'Title/Link/Description/Logo/Thumbetc. common fields, no need to use them againcategoryDetailTo obtain this basic information, simply go through{{ category.字段名 }}You can call it. Only when you need to obtain other deeper or less commonly used information of the current loop category (such asImagesWhen using array or some specific custom fieldcategoryListin the loop againcategoryDetailLabel and pass inid=category.Id.

By using the above method, you can flexibly display any detailed category information you want on the front page of the Anqi CMS website, whether it is text description, a single image, or a multi-image banner.

Frequently Asked Questions (FAQ)

Q1: If my category description (Description) or content (Content) contains HTML code, why is the original code displayed on the page instead of the rendered effect?

A1: This is because the Anqi CMS template engine, for security reasons, defaults to escaping all output HTML content, which<to<to prevent potential XSS attacks. If you are sure that this content is safe and need to render HTML effects, you can use it in the output.|safea filter. For example:{{ categoryDesc|safe }}.

**Q