In AnQiCMS template creation, we often need to retrieve and display detailed information of specific categories, such as the category name, description, as well as the preset Banner image and thumbnail.categoryDetailLabels are born for this, they can help us easily extract this data from the database and flexibly display it on the website front-end.
UnderstandingcategoryDetailThe 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 extra information for a category item on a category list page or retrieve all data for the current category on a category details page, this label can be 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 it (for examplemyCategory），then the category data obtained by this tag will be stored in this variable, and you can use it in the subsequent template code.{{myCategory.Title}}This way to access each piece of data. If no variable name is specified, the label will output directlynameSpecify the value of the field parameter.nameThis is the most critical parameter, used to specify which field information of the category you want to get, such asTitle(Category Name),Description(Category description) et al.id: It is an optional parameter. When you use it on a category page (such as a category detail page or category list page)categoryDetailWhen tagging, if not specifiedidIt will automatically identify the category ID of the current page to retrieve data. If you want to get information about other specific category IDs, you need to specify them explicitly.id="分类ID".token: withidSimilarly, you can also specify the category to be retrieved by using the category URL alias, for exampletoken="about-us".siteId：If you manage multiple sites and have created them using the multi-site management feature in the background, you can usesiteIdthe parameter to specify which site to retrieve the category data from.
Retrieve and display the category name and description
The category name and description are the most basic information of the category, and they are also an important part of Search Engine Optimization (SEO) and user experience.
To get the category name, you can usename="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, justnameparameter settingsDescription:
{# 获取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 your 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 (group image)
The Banner image for categories is usually a set of images, used for the carousel display at the top of the category page, AnQiCMS names itImages。Since it may contain multiple images, it is necessary to combine.fora loop to iterate and display.
To obtain the Banner group image of the category, you need to assign it to a variable and then iterate:ImagesSpecify it to a variable, and then perform a 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 %}
Other practical field acquisition
In addition to the above common fields,categoryDetailThe label can also obtain more classification-related information, enhancing the flexibility and richness of the template:
- (Classified content (
Content)If you have filled in rich text content for the classification in the background, you can usename="Content"Get. It should be noted that if the content contains HTML tags, it usually needs to be used in conjunction with|safeFilter safe output, and if the background has enabled the Markdown editor, the content will automatically be converted to HTML. - Category Link (
Link): Throughname="Link"The access URL for the category can be directly obtained, convenient for building navigation and links. - Document count (
ArchiveCount): Usename="ArchiveCount"You can get the total number of documents under the category, often used to display "Total X articles - Parent Category ID (
ParentId): Throughname="ParentId"Retrieve, it can help you build more complex hierarchical relationship judgments in templates. - Custom fields：If your content model has additional custom fields set for categories (such as “Category Icon”, “Custom Banner Description” etc.), you can also directly use these field names as
nameThe value of the parameter to retrieve. For example, if you have a custom field named "Custom Banner Description", you can access it by{% categoryDetail with name="自定义横幅描述" %}to get.
PasscategoryDetailTags, you can easily display the classification information of the background configuration in front of the users, creating a feature-rich and detailed website interface.
Common Questions and Answers (FAQ)
Q:
categoryDetailIs the tag automatically getting the classification information of the current page?Answer: Yes, when you use the tag in any classification detail page or classification list pagecategoryDetailif not explicitly specifiedidortokenThe parameter will intelligently identify and retrieve the category data of the current page, thus simplifying your template code.问：I want to get a group of Banner images for a certain category, but my design only needs to display the first image as the category header image. How should I operate?答：You can first go through
{% categoryDetail bannerImages with name="Images" %}Get the Banner group image into a variablebannerImages.bannerImagesis an array, you can access it through{% if bannerImages %}{% set pageBanner = bannerImages[0] %}{% endif %}This method assigns the first element of the array (i.e., the first image) to a new variablepageBanner. After that, you can directly use{{ pageBanner }}to display the first image.问：If I add a custom field named "分类图标" in the AnQiCMS backend for categories, how should I retrieve and display it?
categoryDetail标签获取并显示它？答：AnQiCMS will directly use the fields you customize for categoriesnameas parameter values. Therefore, you can directly use{% categoryDetail with name="分类图标" %}Get the value of this custom field. If the field stores an image URL, you can display it by wrapping it in a tag.<img>Wrap the tag to display.