In website operation, we often need to create unique and attractive display pages for specific categories, or flexibly call detailed information of certain categories at different positions.For example, you may want to display a dedicated Banner image at the top of a product category page, or list the title and introduction of a specific service category in the sidebar.AnQiCMS as an efficient and customizable content management system, provides a very intuitive way to meet these needs.
To retrieve and display detailed information of a specified category, such as the title, description, and Banner image of the category, we mainly use the template tags of AnQiCMS.categoryDetailThis tag is very powerful, it can help us accurately locate the required category and extract its rich attributes.
UsecategoryDetailGet category details
categoryDetailThe basic usage of the label is to directly call a field of the category in the template.When you use it on the category page (such as the category list page or the homepage of a specific category), it will default to getting the category information of the current page.
If you want to get aspecifiedThe classification information, rather than the classification of the current page, needs to be usedidortokenparameter to explicitly tell AnQiCMS which classification you want. Among,idIt is the unique numeric ID classified in the background,tokenwhich is the URL alias set for the classification in the background. Usually,idis the most accurate and commonly used way to specify the classification.
Let's see how to specifically obtain the title, description, and banner image of the category.
Get category title (Title)
The category title is one of the basic attributes, often used for page titles, navigation menus, or content block displays.
To get the title of a specified category, you can write it like this in the template:
{% categoryDetail myCategory with id="15" %}
<h1>{{ myCategory.Title }}</h1>
{% endcategoryDetail %}
Here we assume that the category ID is15.myCategoryis a temporary variable name we define for this category information, and you can name it according to your own habits. IfmyCategoryIt exists, and it will display the category title.
If you just want to get and output it simply, you can also omit the variable name:
<title>{% categoryDetail with name="Title" id="15" %} - 网站名称</title>
Get the category description (Description)
Category description is usually used to provide a brief summary of categorized content for users, or as meta description in SEO optimization.
Get the description of a specified category is just as simple:
{% categoryDetail myCategory with id="15" %}
<p class="category-description">{{ myCategory.Description|safe }}</p>
{% endcategoryDetail %}
Here we add:|safeThe filter. Because the category description may contain HTML rich text content in the background, use|safeIt can ensure that these HTML codes are correctly parsed and displayed by the browser, rather than being output as plain text.
Get the category Banner image (Images,Logo,Thumb)
In AnQiCMS, the category images can have various forms:ImagesUsed to store multiple carousels (Banner group images),LogoUsed to display category thumbnails and large images,ThumbThen it is used to display thumbnails. According to your needs, you can choose to call different fields.
1. Get a single Banner image (LogoorThumb)
If your category only needs to display one main Banner image or thumbnail, you can directly callLogoorThumbfield.
{% categoryDetail myCategory with id="15" %}
{% if myCategory.Logo %} {# 检查Logo是否存在 #}
<img src="{{ myCategory.Logo }}" alt="{{ myCategory.Title }} 的大图" class="category-logo-banner">
{% endif %}
{% if myCategory.Thumb %} {# 检查Thumb是否存在 #}
<img src="{{ myCategory.Thumb }}" alt="{{ myCategory.Title }} 的缩略图" class="category-thumb-image">
{% endif %}
{% endcategoryDetail %}
LogoGenerally used to display larger images,ThumbIt is usually an automatically generated smaller thumbnail.
2. Obtain multiple Banner images (Images)
If your category backend has uploaded multiple Banner images and you want to display them in a carousel format, then you need to useImagesField. This field will return an array of image URLs, which needs to be traversed and output through a loop.forLoop to traverse and output.
{% categoryDetail myCategory with id="15" %}
{% if myCategory.Images %} {# 检查是否有Banner组图 #}
<div class="swiper-container category-banner-slider">
<div class="swiper-wrapper">
{% for bannerUrl in myCategory.Images %}
<div class="swiper-slide">
<img src="{{ bannerUrl }}" alt="{{ myCategory.Title }} 的轮播图" class="category-banner-image">
</div>
{% endfor %}
</div>
{# 如果需要，这里可以添加轮播图的导航、分页等控件 #}
</div>
{% endif %}
{% endcategoryDetail %}
In this example,bannerUrlIt is the URL of the current image in each loop. You can combine it with a front-end JS library (such as Swiper) to implement a carousel effect as needed.
If you only need to fromImagesGet the first image in the array as the main Banner, you can do it like this:
{% categoryDetail myCategory with id="15" %}
{% if myCategory.Images %}
{% set firstBanner = myCategory.Images[0] %} {# 获取数组中的第一张图片URL #}
<img src="{{ firstBanner }}" alt="{{ myCategory.Title }} 的主Banner" class="category-main-banner">
{% endif %}
{% endcategoryDetail %}
Get other custom category fields
AnQiCMS allows you to customize additional fields for categories in the background (add fields to the category model in the "Content Model", or directly in the "Other Parameters" of "Document Category"). If you define custom fields such as "Contact Phone", "Person in Charge", etc., they can also be accessed in the same way.categoryDetailtags to get them.
For example, if you add a category with the namecontactPhonewith a name:
{% categoryDetail myCategory with id="15" %}
<p>联系电话：{{ myCategory.contactPhone }}</p>
{% endcategoryDetail %}
To iterate and display all custom fields, you can useExtrafield (it returns an array of key-value pairs):
{% categoryDetail myCategory with id="15" %}
{% categoryDetail extras with name="Extra" %}
{% for field in extras %}
<p>{{ field.Name }}：{{ field.Value }}</p>
{% endfor %}
{% endcategoryDetail %}
{% endcategoryDetail %}
Comprehensive Application Examples
Integrate the above knowledge points, assuming we need to create a detailed display area for the "About Us" category with a title, description, and a Banner image:15的“关于我们”分类创建一个详细的展示区域，包含标题、描述和一张Banner图：
{# 获取ID为15的分类所有详情，并赋值给 myAboutCategory 变量 #}
{% categoryDetail myAboutCategory with id="15" %}
<div class="about-us-section">
{# 显示分类标题 #}
<h2 class="section-title">{{ myAboutCategory.Title }}</h2>
{# 显示分类的Banner图，优先使用Images中的第一张，否则使用Logo #}
{% if myAboutCategory.Images %}
{% set pageBanner = myAboutCategory.Images[0] %}
{% elif myAboutCategory.Logo %}
{% set pageBanner = myAboutCategory.Logo %}
{% else %}
{% set pageBanner = "/public/static/images/default-banner.jpg" %} {# 设置一个默认图以防万一 #}
{% endif %}
<div class="banner-area">
<img src="{{ pageBanner }}" alt="{{ myAboutCategory.Title }} 的封面" class="img-fluid">
</div>
{# 显示分类描述 #}
<div class="section-description">
<p>{{ myAboutCategory.Description|safe }}</p>
</div>
{# 如果有分类内容字段，也可以展示 #}
{% if myAboutCategory.Content %}
<div class="category-full-content">
{{ myAboutCategory.Content|safe }}
</div>
{% endif %}
{# 假设我们还为这个分类定义了一个自定义字段叫 'companyMission' #}
{% if myAboutCategory.companyMission %}
<div class="company-mission">
<h3>我们的使命</h3>
<p>{{ myAboutCategory.companyMission }}</p>
</div>
{% endif %}
</div>
{% endcategoryDetail %}
With these methods, you can flexibly obtain and display detailed information of any specified category in AnQiCMS templates.Remember, after modifying the template, don't forget to click the 'Update Cache' button in the background to ensure the front-end page updates in time.
Common Questions (FAQ)
1. How do I know what the ID or URL alias (token) is for a specific category?You can log in to the AnQiCMS backend and go to the 'Document Category' under 'Content Management'.In the category list, you can directly see each category's ID.URL alias (token) is the "Custom URL" field set in the "Other Parameters" section when editing categories.If not manually set, the system will automatically generate a pinyin alias based on the category name.
2. If the specified category ID or URL alias does not exist, will the template report an error?In most cases, if the specified category ID or URL alias does not exist,