How to obtain and display the detailed information of a category, such as the category title, description, and thumbnail image in AnQiCMS?

In AnQi CMS, obtaining and displaying detailed information of a category is an indispensable part of building a dynamic website. Whether it is used to create a category list, a category special page, or to display information about the category in the article detail page, AnQi CMS provides concise and powerful template tags to achieve this.

Deep understanding of `categoryDetail` tag

The template system of Anqi CMS adopts syntax similar to Django,categoryDetailThe label is a core tool specifically used to extract all detailed data of a single category.With this tag, we can easily obtain various attributes such as the title, description, link, image, etc. of the category, thus being able to flexibly display them on the front-end page.

UsecategoryDetailWhen labeling, you can choose to assign the obtained data to a variable for subsequent use, or directly output the value of a specific field. Its basic form is usually like this:{% categoryDetail 变量名称 with name="字段名称" id="1" %}.

This tag supports several key parameters to help you accurately locate the required classification information:

  • idThis is the most commonly used parameter to specify the unique ID of the category. When you want to get information about a specific category, just specify its category ID, for example,id="5"If you use this tag on the current category page without specifyingidit will automatically obtain the category information of the current page, very convenient.
  • tokenIf your website has enabled pseudo-static URL aliases, it can also be specified throughtokenparameters to specify categories, for exampletoken="about-us". This is usually the pinyin or custom alias of the category.
  • siteIdFor users who adopt the multi-site management function of Safe CMS, if you need to call the category data of other sites, you can do so by specifyingsiteIdParameters can be used to implement. In most single-site cases, this parameter does not need to be filled in.

Core information fields of category details.

Understood how to call tags, the next step is how to extract specific information about categories.categoryDetailTagged throughnameSpecify the fields to be retrieved with parameters. Here are some commonly used fields and their purposes:

  • Category ID (Id): The unique identifier of the category. This field is very useful when you need to perform further operations based on the category ID, such as retrieving the document list under the category.

    <div>分类ID：{% categoryDetail with name="Id" %}</div>

  • Category Title (Title): The display name of the category. This is the most basic and important information, usually used to directly present to the user on the page.

    <h1>{% categoryDetail with name="Title" %}</h1>

  • Category Link (Link)：English classification access URL. Through this link, users can directly jump to the list page or detail page of the classification.

    <a href="{% categoryDetail with name="Link" %}">{% categoryDetail with name="Title" %}</a>

  • Category Description (Description)This field provides a brief summary of the classified content. It is very helpful for SEO and for users to quickly understand the main theme of the classification.

    <p>{% categoryDetail with name="Description" %}</p>

  • (Classified content (Content)If your category page needs to display detailed text introductions, activity descriptions, or other rich text content,ContentThe field can be put to use. It is important to note that since it may contain HTML content, in order to avoid being automatically escaped by the system, you usually need to cooperate with|safeFilter usage. If the content is written in Markdown, it can also be rendered withrender=trueparameters.

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

  • Category thumbnail large image (Logo) and Thumbnail (Thumb)To make the classification more attractive when displayed in a list or special topic page, you can upload an image for the classification in the background.LogoIt usually refers to the original size or larger size of the image uploaded.ThumbThe thumbnail is automatically generated based on the backend settings. You can choose to use it according to the layout requirements of the page.

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

  • Category Banner Set (Images)If your category requires displaying a carousel or multiple related images, this field will return an array of image URLs. You need to usefora loop to iterate through and display these images.

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

  • Parent Category ID (ParentId): When a category has a hierarchical relationship, this field will display its parent category ID, which is very useful for building multi-level navigation or breadcrumb paths.

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

  • 分类的文档数量 (English)ArchiveCount)：显示当前分类（及其子分类，如果后台设置为继承）下包含的文档总数（English）

    <span>共有 {{% categoryDetail with name="ArchiveCount" %}} 篇文章</span>

  • Custom fields：Security CMS allows you to add additional custom fields to the content model. These fields can also be accessed bycategoryDetailtags. You can directly access byname="你的自定义字段名"Get the value of a specific field, or byname="Extra"Get all custom fields and iterate through them.

    {# 获取名为 'customAuthor' 的自定义字段 #}
<div>自定义作者：{% categoryDetail with name="customAuthor" %}</div>


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

Combine and display classification information in the template

Now, let's combine this information to see how to build a complete classification display area in a real template.For example, on a category list page, we may need to display the current category's title, description, and thumbnail; or on the sidebar of an article detail page, display the detailed information of the current article's category.

Example: Display the detailed information of the current category at the top of the category list page.

Suppose you are editing.category/list.htmlorarticle/list.htmlAnd the category template files,categoryDetailThe tag will automatically obtain the current category ID when not specified.

<div class="category-header">
    {# 获取当前分类的标题 #}
    <h1>{% categoryDetail with name="Title" %}</h1>

    {# 获取当前分类的描述 #}
    <p class="category-description">{% categoryDetail with name="Description" %}</p>

    {# 如果存在分类缩略图，则显示 #}
    {% categoryDetail categoryThumb with name="Thumb" %}
    {% if categoryThumb %}
        <img src="{{ categoryThumb }}" alt="{% categoryDetail with name="Title" %}" class="category-thumbnail" />
    {% endif %}

    {# 如果存在分类Banner组图，则显示第一个作为背景图 #}
    {% categoryDetail bannerImages with name="Images" %}
    {% if bannerImages %}
        {% set pageBanner = bannerImages[0] %}
        <div class="category-banner" style="background-image: url({{ pageBanner }});"></div>
    {% endif %}
</div>

Example: Retrieve and display specific category information on the article detail page

Suppose you want to display the sidebar on the article detail page with ID10