To retrieve detailed information about categories, we mainly rely oncategoryDetailThis template tag. This tag is specifically designed to extract individual category data, allowing you to precisely control how this content is presented on the front-end page.
Core tags:categoryDetailUsage
categoryDetailThe basic usage of tags is{% categoryDetail 变量名称 with name="字段名称" %}.In which, "variable name" is optional, if you specify a variable name, you can then refer to the obtained data through this variable in the subsequent code; if not specified, the tag will directly output the value of the field.
This label's most commonly used parameter isnameIt is used to specify the specific fields of the category information you want to obtain. For example, to get the description of the category, you would usename="Description"To get the banner image, it will be usedname="Images".
In addition, you can also useidortokenparameter to explicitly specify which category of information to retrieve:
idParameters: Specify a unique numeric ID by category. For example,id="10"Will retrieve the category information for ID 10.tokenParameters: Specify the category URL alias (custom URL) through classification. For example,token="news-center"It will retrieve the category information with the URL alias "news-center".
If it is notcategoryDetailspecified in the tagidortokenIt will intelligently try to obtain the category information associated with the current page.This is very convenient on the category list page or category detail page, because you do not need to manually specify the ID, the system will automatically recognize the current category.
Get and display category description
The category description is usually used to briefly introduce the category content, which is also very helpful for SEO.In the background of AnQi CMS, you can fill in the "Category Introduction" field on the "Document Category" editing page.
In the template, you can get and display it in the following way:
{# 假设这是在某个分类页面，自动获取当前分类的描述 #}
<div>分类简介：{% categoryDetail with name="Description" %}</div>
{# 如果您想获取指定ID（例如ID为5）的分类描述 #}
<div>关于我们分类简介：{% categoryDetail with name="Description" id="5" %}</div>
{# 将描述内容赋值给一个变量，再进行处理或显示 #}
{% categoryDetail categoryDesc with name="Description" %}
<p>{{ categoryDesc|safe }}</p>
Please note that if the category description may contain HTML tags (for example, formatted content entered by the back-end rich text editor), it is recommended to use|safeFilter, to ensure that HTML content can be correctly parsed and displayed, rather than being escaped into plain text.
Display the Banner image and thumbnail of the category
The banner image and thumbnail are an important part of the website's visual presentation.In the "Document Category
Get category thumbnail (Logo/Thumb)
Category thumbnail usually refers to a representative image. In AnQi CMS, you can usename="Logo"orname="Thumb"To get:
{# 获取当前分类的缩略图大图 #}
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
{# 获取当前分类的缩略图 #}
<img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />
{# 获取指定ID（例如ID为5）分类的缩略图 #}
<img src="{% categoryDetail with name="Logo" id="5" %}" alt="{% categoryDetail with name="Title" id="5" %}" />
Here are thealtThe attribute is usually titled with a classification.name="Title"To fill in, for SEO and accessibility.
To display the category Banner images (Images).
分类Banner图通常是一组图片，可以用于轮播或多图展示。name="Images"会返回一个图片URL的数组。由于是一个数组，您需要使用EnglishforLoop to traverse and display them.
{# 假设您正在一个分类页面，要显示该分类的所有Banner图 #}
<div class="category-banner-slider">
{% categoryDetail bannerImages with name="Images" %}
{% for image_url in bannerImages %}
<img src="{{ image_url }}" alt="{% categoryDetail with name="Title" %}" />
{% endfor %}
</div>
{# 如果您只需要显示第一张Banner图 #}
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %} {# 确保图片数组不为空 #}
<div class="main-banner" style="background-image: url('{{ bannerImages[0] }}');">
{# 这里可以放一些叠加的文字或按钮 #}
</div>
{% endif %}
Pass{% if bannerImages %}Such a judgment can avoid template errors when no images are uploaded.bannerImages[0]You can directly get the first image in the array.
Get the content of the category and custom fields
In addition to the description and images, the category may also have a longer 'category content' or custom fields you have set for the model in the backend.
Get the category content (Content)
If the category content is rich, you can fill in the 'Category Content' field in the background. In the template, the method of obtaining it is similar to the description:
{% categoryDetail categoryContent with name="Content" %}
<div class="category-full-content">
{{ categoryContent|safe }} {# 同样，如果包含HTML，使用|safe #}
</div>
Get Custom Field
The CMS allows you to add custom fields to content models (which can affect categories). If you create a category model namedcustom_field_nameThe field can be accessed directly by its name:
{# 获取名为 custom_field_name 的自定义字段的值 #}
<div>自定义信息：{% categoryDetail with name="custom_field_name" %}</div>
{# 如果您想遍历所有自定义字段，可以使用 name="Extra" #}
{% categoryDetail categoryExtraFields with name="Extra" %}
<div class="custom-fields">
{% for field in categoryExtraFields %}
<div>
<span>{{ field.Name }}：</span>
<span>{{ field.Value }}</span>
</div>
{% endfor %}
</div>
name="Extra"It will return an array containing all custom fields, each field includingName(field display name) andValue(Field value) attribute, you can iterate over and display it as needed.
CombinecategoryListtags
In some scenarios, you may need to traverse the category list first, and then display the detailed information for each category. At this point, you can integrate thecategoryDetailintocategoryListThe loop. For example, when outputting the first-level category in the loop, display the thumbnail and description of each category:
{% categoryList categories with moduleId="1" parentId="0" %} {# 获取文章模型下所有顶级分类 #}
{% for category in categories %}
<div class="category-item">
<h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
{# 直接使用 category 变量中包含的 Logo 和 Description 字段 #}
{% if category.Thumb %}<img src="{{ category.Thumb }}" alt="{{ category.Title }}" />{% endif %}
<p>{{ category.Description }}</p>
</div>
{% endfor %}
{% endcategoryList %}
Please note,categoryListwhen the tag is in the loop,itemvariable (here it iscategory) already includes the category'sTitle/Link/Description/Logo/Thumband other commonly used fields, no need to use them againcategoryDetailGet these basic information directly through{{ category.字段名 }}It can be called. Only when you need to get other deeper or less commonly used information of the current loop category (such asImagesArray or certain custom fieldscategoryListwithin the loopcategoryDetailtag, and pass inid=category.Id.
Through the above method, you can flexibly display any detailed information of the category you want to present on the front page of the Anqi CMS website, whether it is text description, a single image, or a multi-image banner.
Common Questions (FAQ)
Q1: Why does the original HTML code display on the page instead of the rendered effect if my category description (Description) or category content (Content) contains HTML code?
A1: This is because the template engine of AnQi CMS, for security reasons, defaults to escaping all output HTML content,<Converted to<to prevent potential XSS attacks. If you are sure that this content is safe and needs to be rendered with HTML effects, you can use it in the output.|safefilter. For example:{{ categoryDesc|safe }}.
**Q