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 in the page.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 obtain and display detailed information of a specified category, such as the title, description, and Banner image, we mainly use the template tags of AnQiCMS.categoryDetail. This tag is very powerful, it can help us accurately locate the required category and extract its rich properties.
UsecategoryDetailGet category details
categoryDetailThe basic usage of the tag is to directly call a field of the category in the template.When you use it on a category page (such as a category list page or the homepage of a specific category), it will default to retrieving the category information of the current page.
If you want to get onespecifiedcategory information, not the category of the current page, needs to be usedidortokenparameter to clearly tell AnQiCMS which category you want. Among them,idIt is the unique numeric ID classified in the background, whiletokenIt is the URL alias set for the category in the background. Usually,idspecifying the category is the most accurate and commonly used method.
Let's see how to specifically get the title, description, and Banner image of the category.
Get the category title (Title)
The category title is one of the most basic attributes, often used in page titles, navigation menus, or content blocks.
To get the title of a specific 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, you can also name it according to your habit. IfmyCategoryIt exists, 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 descriptions are typically used to provide users with a brief overview of categorized content, or as a meta description in SEO optimization.
The description of the specified category is just as simple:
{% categoryDetail myCategory with id="15" %}
<p class="category-description">{{ myCategory.Description|safe }}</p>
{% endcategoryDetail %}
Here we added|safea filter. Because the category description may contain HTML rich text content, using|safeEnsure 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 carousel images (Banner group images),LogoUsed to display the thumbnail and large image of the category, andThumbIt is used to display thumbnails. You can choose to call different fields according to your needs.
1. Get a single Banner image (LogoorThumb)
If your category only needs to display a 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 %}
LogoIt is usually used to display larger images, andThumbIt is usually an automatically generated smaller thumbnail.
2. Get multiple Banner images (Images)
If you upload multiple Banner images on the category backend and want to display them in a carousel, then you need to useImagesfield. This field will return an array of image URLs and needs to be traversed through a loopforto 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 %}
This example shows,bannerUrlIs 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 takeImagesGet 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 "Phone Number", "Person in Charge", etc., you can also use them in the same waycategoryDetailtags to get them.
For example, if you add a category with the namecontactPhone: custom field
{% categoryDetail myCategory with id="15" %}
<p>联系电话：{{ myCategory.contactPhone }}</p>
{% endcategoryDetail %}
If you want 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 Example
Integrate the above knowledge points, assuming we want to create a detailed display area for the category with ID15Create a detailed display area for the "About Us" category, including a title, description, and a Banner image:
{# 获取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 %}
By these methods, you can flexibly obtain and display detailed information of any specified category in the AnQiCMS template.Remember, after modifying the template, do not forget to click the 'Update Cache' button in the background to ensure the front-end page is updated in time.
Frequently Asked Questions (FAQ)
1. How do I know what the ID or URL alias (token) is for a particular category?You can log in to the AnQiCMS backend and go to the "Document Classification" under "Content Management".In the category list, you can directly see the ID of each category.The URL alias (token) is set in the 'Custom URL' field under 'Other Parameters' 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?Under normal circumstances, if the specified category ID or URL alias does not exist,