How to retrieve and display detailed information about a category, such as the category title, description, and thumbnail, 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 category lists, special topic pages, or to display information about the category in article detail pages, Anqi CMS provides concise and powerful template tags to achieve this.

Understand `categoryDetail` tag in depth

The template system of AnQi CMS adopts syntax similar to Django, wherecategoryDetailThe label is a core tool specifically used to extract all detailed data of a single category.By this tag, we can easily obtain various properties such as the title, description, link, image, etc. of the category, thereby flexibly displaying 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 classification information you need:

  • 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, you only need to specify its category ID, for exampleid="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 static URL aliases, you can also specify categories throughtokenparameters, for exampletoken="about-us". This is usually the pinyin or a custom alias of the category.
  • siteIdFor users who use the Anqicms multi-site management function, if you need to call the category data of other sites, you can specifysiteIdTo implement the parameter. This parameter does not need to be filled in most single-site cases.

The core information field of the category details.

Understood how to call the tag, next is how to extract specific information of the category.categoryDetailTag throughnameParameters to specify the fields to be retrieved. Here are some commonly used fields and their purposes:

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

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

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

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

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

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

  • Category description (Description)This field provides a brief summary of the classification 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>

  • Category content (Content)If your category page needs to display detailed text descriptions, event instructions, or other rich text content,ContentThe field can be put to use. It is important to note that it may contain HTML content, in order to avoid being escaped by the system by default, you usually need to cooperate with|safeThe filter is used. If the content is written in Markdown, you can also addrender=truethe parameters for rendering.

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

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

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

  • Category Banner Group (Images): If your category needs to display a carousel or multiple related images, this field will return an array of image URLs. You need to useforLoop to traverse 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 the ID of its parent category, which is very useful for building multi-level navigation or breadcrumb paths.

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

  • Number of categorized documents (ArchiveCount): Display the total number of documents contained under the current category (and its subcategories if set to inherit in the background).

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

  • Custom field: AnQi CMS allows you to add additional custom fields to the content model. These fields can also be obtained throughcategoryDetailtags. You can access them directly throughname="你的自定义字段名"To get the value of a specific field, or throughname="Extra"To get all custom fields and iterate over 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>

To combine and display classified information in the template

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

Example: Display the details of the current category at the top of the category list page

Assuming you are editingcategory/list.htmlorarticle/list.htmland category template files,categoryDetailThe tag will automatically get the current category if no ID is 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 information for a specific category on the article detail page

Suppose you want to display ID for in the sidebar of the article detail page10