How to retrieve and display detailed information such as description, Logo, etc. for a specific category using the `categoryDetail` tag?

In AnQiCMS template development, obtaining and displaying detailed information of categories is a key link in building rich and user-friendly pages.categoryDetailLabels are born for this, they can help you easily retrieve specific category descriptions, logos, custom fields, and other detailed content at any location on the page.

categoryDetailThe core function of the tag

categoryDetailThe main function of the label is to obtain detailed data of a single category.No matter if you want to display additional information about the current category on the category list page, or need to show the Logo and introduction of the category on the article detail page, or even want to reference detailed data of a specific category in any corner of the website, this tag can come in handy.

It is typically used in the following form:{% categoryDetail 变量名称 with name="字段名称" %}. Among them,变量名称is an optional parameter, if you want to assign the obtained data to a variable for subsequent use or for more complex logic processing, you can specify it. If you just want to output the value of a field directly, you can omit it变量名称HowevernameThe parameter is the core, it tells the tag which specific field information you want to get.

How to get detailed information of a specific category

While usingcategoryDetailWhen labeling, you first need to clarify which category of information you want to obtain. AnQiCMS provides several flexible ways to specify the target category:

  1. Automatically identify the current category:If you are on the category detail page (for examplearticle/list-{分类ID}.htmlorproduct/list-{分类ID}.html)categoryDetailThe tag will intelligently identify the category corresponding to the current page and automatically retrieve its information. At this point, you usually do not need to specify the category ID additionally.

  2. Specify by category ID:You can accessidSpecify the category to be retrieved precisely. For example,{% categoryDetail with name="Title" id="10" %}The title of the category with ID 10 will be retrieved.

  3. specified through category URL alias (token):If you prefer to use the category URL alias to identify, you can usetokenthe parameters. For example,{% categoryDetail with name="Description" token="about-us" %}Get the description of the category with the alias 'about-us'.

  4. Specifying in a multi-site scenario:For AnQiCMS deployed on multiple sites, if you need to get the category information of a non-current site, you can usesiteIdparameter to specify the site ID. For example,{% categoryDetail with name="Title" id="10" siteId="2" %}.

nameParameter available field details

nameParameter allows you to select various details of categories. Here are some commonly used fields and their usage examples:

  • Category ID (Id), Category title (Title), Category link (LinkClassification description (Description):These are the most basic classification information, often used to build navigation, breadcrumbs, or simple classification introductions.

    <div>当前分类ID：{% categoryDetail with name="Id" %}</div>
<h2><a href="{% categoryDetail with name="Link" %}">{% categoryDetail with name="Title" %}</a></h2>
<p>{% categoryDetail with name="Description" %}</p>

  • Category content (Content):If your category includes detailed content edited with a rich text editor, you can useContentField retrieval. It should be noted that if the content contains HTML tags, in order to render it correctly on the page rather than displaying the original code, it usually needs to be配合|safeFilter. If the background has enabled the Markdown editor, the content is in Markdown format, you can userender=trueThe parameter makes the tag automatically convert it to HTML.

    <div>
    {% categoryDetail categoryContent with name="Content" render=true %}
    {{ categoryContent|safe }}
</div>

  • Category thumbnail large image (Logo), Category thumbnail (Thumb):These fields are used to get the representative image of the category.LogoIt is usually a larger main image,ThumbIt is automatically generated thumbnail.

    <img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />

    In practice, to avoid errors caused by an empty image path, it is recommended to make a judgment: 

    {% set categoryLogo = categoryDetail with name="Logo" %}
{% if categoryLogo %}
    <img src="{{ categoryLogo }}" alt="{% categoryDetail with name="Title" %}" />
{% endif %}

  • Category Banner Group (Images):If the category supports uploading multiple images as a Banner or slideshow,Imagesthe field will return an array of image URLs. You need to useforLoop to traverse and display these images.

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

  • Parent category ID (ParentId):This field is very useful for building multi-level category navigation or determining category hierarchy.

    <span>上级分类ID：{% categoryDetail with name="ParentId" %}</span>

  • Number of categorized documents (ArchiveCount):Display how many articles or products are included under the current category.

    <span>该分类下共有文档：{% categoryDetail with name="ArchiveCount" %} 篇</span>

  • The document model sets the classification other field parameters (custom fields):AnQiCMS Powerful content model function allows you to add various custom fields to categories. These custom fields can also becategoryDetailLabel retrieval. You can directly access custom fields调用字段by name to get their values, or get an object that contains all custom fieldsExtraand then iterate over them.

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

{# 遍历所有自定义字段 #}
{% categoryDetail categoryExtraFields with name="Extra" %}
{% for field in categoryExtraFields %}
    <div>{{ field.Name }}：{{ field.Value }}</div>
{% endfor %}

Useful example: Build the Banner and introduction of the category page

Assuming we are building a product category page, we want to display the category's Banner image, title, and detailed description at the top of the page, and list the custom attributes under the category.

<div class="category-header">
    {# 获取并显示分类的 Banner 图，并判断是否存在 #}
    {% categoryDetail bannerImages with name="Images" %}
    {% if bannerImages %}
        {# 假设我们只取第一张图作为 Banner #}
        {% set categoryBanner = bannerImages[0] %}
        <div class="category-banner" style="background-image: url('{{ categoryBanner }}');">
            <h1>{% categoryDetail with name="Title" %}</h1>
        </div>
    {% else %}
        {# 如果没有 Banner 图，只显示标题 #}
        <h1>{% categoryDetail with name="Title" %}</h1>
    {% endif %}

    <div class="category-description">
        <p>{% categoryDetail with name="Description" %}</p>
        {# 显示分类的详细内容，包含HTML #}
        {% categoryDetail categoryRichContent with name="Content" render=true %}
        {{ categoryRichContent|safe }}
    </div>

    {# 显示自定义属性，例如“适用人群”、“特点”等 #}
    <div class="category-attributes">
        <h3>分类特色</h3>
        <ul>
        {% categoryDetail categoryCustomFields with name="Extra" %}
        {% for field in categoryCustomFields %}
            {# 排除不想显示的字段，例如“内部备注” #}
            {% if field.Name != '内部备注' %}
                <li><strong>{{ field.Name }}：</strong>{{ field.Value }}</li>
            {% endif %}
        {% endfor %}
        </ul>
    </div>
</div>

By these methods, you can make full use ofcategoryDetailTags, present classified data in a rich form on your AnQiCMS website, thereby enhancing user experience and content expressiveness.

Frequently Asked Questions (FAQ)

1. Why do I use{% categoryDetail with name="Content" %}Is the content obtained the original HTML or Markdown code, not the rendered style?

This is because AnQiCMS defaults to escaping output to prevent XSS attacks. If your category content contains HTML tags or Markdown format, you need to use|safeA filter tells the template that this part of the content is safe and should be rendered directly as HTML. If the content is in Markdown format, you also need to addrender=truefor example:{% categoryDetail categoryContent with name="Content" render=true %}{{ categoryContent|safe }}.

2. How to retrieve a category's Logo or Banner and not display a broken image icon when there is no image?

You can first assign the image path to a variable, then useifthe statement to check if the variable contains the image path. If it exists, then render<img>the tag, otherwise