How to retrieve and display the name, description, Banner image, and thumbnail of a specific category using the `categoryDetail` tag?

In AnQiCMS template creation, we often need to retrieve and display detailed information of specific categories, such as the name, description, and even preset Banner images and thumbnails.categoryDetailThe label was born for this, it can help us easily extract these data from the database and display them flexibly on the front end of the website.

UnderstandingcategoryDetailThe core role of tags

categoryDetailThe main function of the tag is to obtain detailed data of a single category.No matter if you want to display additional information for a category item on the category list page or retrieve all the data for the current category on the category details page, this tag is very useful.

Its basic usage form is usually like this:{% categoryDetail 变量名 with name="字段名" id="分类ID" %}

Among them:

  • 变量名This is an optional parameter. If you specify a variable name, for examplemyCategoryThen the classification data obtained by this label will be stored in this variable, and you can use it in the subsequent template code{{myCategory.Title}}This way to access the data. If no variable name is specified, the label will be output directlynameThe parameter specifies the value of the field.
  • nameThis is the most critical parameter, used to specify which field information you want to get from the category, such asTitle(Category name),Description(Category description) et al.
  • idThe same is optional. When you use a category page (such as a category detail page or category list page) andcategoryDetailif a tag is not specifiedidIt will automatically identify the category ID of the current page to retrieve data. But if you want to get the information of a specific ID category, you need to specify it explicitlyid="分类ID".
  • token: withidSimilarly, you can also specify the category to retrieve by using the category URL alias, for exampletoken="about-us".
  • siteIdIf you manage multiple sites and have created them through the multisite management feature in the backend, you can usesiteIdparameter to specify which site to get the category data from.

Get and display the category name and description

The category name and description are the most basic information of the category, and also an important part of search engine optimization (SEO) and user experience.

You can use to get the category namename="Title":

{# 假设我们想获取ID为1的分类名称 #}
<div>分类名称：{% categoryDetail with name="Title" id="1" %}</div>

{# 或者在分类详情页获取当前分类名称 #}
<div>当前分类名称：{% categoryDetail with name="Title" %}</div>

{# 将分类名称存储到变量中 #}
{% categoryDetail currentCategoryTitle with name="Title" %}
<h1>{{ currentCategoryTitle }}</h1>

Similarly, to get the category description, justnamethe parameter toDescription:

{# 获取ID为1的分类描述 #}
<p>分类描述：{% categoryDetail with name="Description" id="1" %}</p>

{# 获取当前分类描述并存储到变量 #}
{% categoryDetail currentCategoryDescription with name="Description" %}
<p>{{ currentCategoryDescription }}</p>

Get and display the category thumbnail

In AnQiCMS, category images are usually divided into 'large image' (Logo) and 'thumbnail' (Thumb).You can choose which image to display based on design requirements.

To get the large image (Logo) of the category, you can usename="Logo":

{# 获取ID为1的分类大图 #}
<img src="{% categoryDetail with name="Logo" id="1" %}" alt="{% categoryDetail with name="Title" id="1" %}"/>

{# 获取当前分类大图并存储到变量 #}
{% categoryDetail categoryLogo with name="Logo" %}
<div class="category-banner-image" style="background-image: url('{{ categoryLogo }}');"></div>

To get the category thumbnail (Thumb), usename="Thumb":

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

{# 获取当前分类缩略图并存储到变量 #}
{% categoryDetail categoryThumb with name="Thumb" %}
<img src="{{ categoryThumb }}" alt="分类缩略图"/>

Get and display the category Banner image (gallery)

Category banners are usually a set of images used for scrolling at the top of the category page, AnQiCMS names itImages. Since it may contain multiple images, it needs to be combinedforLoop to traverse and display.

To get the Banner group image of the category, you need to assignImagesto a variable and then loop:

{# 获取当前分类的Banner组图，并存储到categoryImages变量中 #}
{% categoryDetail categoryImages with name="Images" %}

{# 检查是否存在图片，然后循环展示 #}
{% if categoryImages %}
<div class="category-slider">
    {% for image in categoryImages %}
    <img src="{{ image }}" alt="分类Banner图"/>
    {% endfor %}
</div>
{% endif %}

If your design only needs the first image in the Banner group as the category header image, you can handle it like this:

{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
  {# 将组图的第一张图片赋值给pageBanner变量 #}
  {% set pageBanner = bannerImages[0] %}
  <img src="{{ pageBanner }}" alt="分类头图"/>
{% else %}
  {# 如果没有Banner图，可以显示一个默认图片 #}
  <img src="/static/images/default_banner.jpg" alt="默认Banner"/>
{% endif %}

Obtaining other practical fields

In addition to the above commonly used fields,categoryDetailTags can obtain more classification-related information, enhancing the flexibility and richness of the template:

  • Category content (Content): If you have filled in rich text content for categories in the background, you can usename="Content"Get. It should be noted that if the content contains HTML tags, it is usually necessary to配合|safeThe filter outputs safely, and if the Markdown editor is enabled on the backend, the content will automatically be converted to HTML.
  • Category link (Link): Passname="Link"You can directly obtain the access URL of the category, which is convenient for building navigation and links.
  • Number of documents (ArchiveCount): Use.name="ArchiveCount"You can obtain the total number of documents included in the category, often used to display "Total X articles."}
  • Parent category ID (ParentId): Passname="ParentId"Get, it can help you build more complex hierarchical relationship judgments in the template.
  • Custom fieldIf your content model is categorized with additional custom fields (such as "category icon", "custom banner description", etc.), you can also directly use these field names asnameRetrieve the value of the parameter. For example, if you have a custom field named 'Custom Banner Description', you can access it by{% categoryDetail with name="自定义横幅描述" %}Get it.

BycategoryDetailLabel, you can easily display the category information configured in the background to the user, creating a feature-rich and detailed website interface.

Frequently Asked Questions (FAQ)

  1. Question:categoryDetailWill the tag automatically obtain the category information of the current page?Answer: Yes, when you use the tag on any category detail page or category list pagecategoryDetailif not explicitly specifiedidortokenThe parameter will intelligently recognize and retrieve the category data of the current page, thereby simplifying your template code.

  2. How do I get the banner group picture of a certain category, but my design only needs to display the first picture as the category header?You can first go through{% categoryDetail bannerImages with name="Images" %}Get the Banner group image into a variablebannerImagesdue tobannerImagesis an array, you can use{% if bannerImages %}{% set pageBanner = bannerImages[0] %}{% endif %}In this way, the first element of the array (i.e., the first picture) is assigned to a new variablepageBannerAfter that, you can use it directly{{ pageBanner }}to display the first picture.

  3. Ask: If I add a custom field named "Category Icon" in the AnQiCMS backend for categories, how should I get and display it throughcategoryDetailthe tag?Answer: AnQiCMS will directly use the fields you customize for categories asnameavailable values for the parameters. Therefore, you can directly use{% categoryDetail with name="分类图标" %}Get the value of this custom field. If the field stores an image URL, you can wrap it with<img>tags to display.