In a content management system, categories are not only the form of content organization, but also the core of website structure and user navigation.Gently obtain and display detailed information of specific categories, such as their description, unique Banner images and Logo, which is crucial for creating attractive and informative pages.AnQiCMS provides intuitive and powerful template tags to meet this need easily.
Core Function Tags:categoryDetail
Strong template tags are provided by AnQi CMS.categoryDetail.The core function of this tag is to accurately obtain all detailed data of the specified category by using the specified category ID or URL alias (token).categoryDetailAll of them can provide the required data support.
You would usually start with this format:{% categoryDetail myCategory with id="分类ID" %}Here,myCategoryis a custom variable name, you can name it according to your preference, and it will carry the detailed information of the obtained category.idParameters used to specify the category ID you wish to retrieve. If you are not convenient to obtain the ID, you can also usetokenparameter, which corresponds to the URL alias of the category, for example:{% categoryDetail myCategory with token="company-news" %}.
to get the category description
The detailed description of the category is an important part that introduces the content to visitors. It helps users quickly understand the theme and scope of the category.categoryDetailWe can easily access the category data after fetching the tagDescriptionfield.
In the template, you can display the category description like this:
{% categoryDetail myCategory with id="123" %} {# 假设要获取ID为123的分类信息 #}
{% if myCategory %}
<div class="category-description">
<h3>{{ myCategory.Title }} 的详细描述</h3>
<p>{{ myCategory.Description | safe }}</p>
</div>
{% endif %}
Please note,DescriptionThe content of the field may contain HTML tags. To ensure that these HTML codes are rendered correctly by the browser rather than displayed as plain text, we need to use|safeFilter. This ensures that formats such as paragraphs, links, or bold text are displayed correctly.
Display category banner image and logo
Visual elements play a significant role in attracting user attention, as they can intuitively convey the brand image and content theme.The Anqi CMS allows you to configure exclusive Banner images and Logos for each category, making your website more visually appealing.
Category Logo is typically a small, identifying image of the category, which can be accessed directly throughLogothe field. The Banner image, on the other hand, is more flexible, stored in the form of a group of images.ImagesThis means that you can upload multiple Banner images for the same category, and they can be displayed in a loop within the template, or only the first one can be used as the main Banner.
Here is an example of how to display category logos and banner images in a template:
{% categoryDetail myCategory with id="123" %} {# 假设要获取ID为123的分类信息 #}
{% if myCategory %}
<div class="category-visuals">
<h2>{{ myCategory.Title }}</h2>
{# 显示分类Logo #}
{% if myCategory.Logo %}
<div class="category-logo">
<img src="{{ myCategory.Logo }}" alt="{{ myCategory.Title }} Logo" style="max-width: 150px; height: auto;" />
</div>
{% endif %}
{# 显示分类Banner图（图片组） #}
{% if myCategory.Images %}
<div class="category-banners">
{% for banner in myCategory.Images %}
<img src="{{ banner }}" alt="{{ myCategory.Title }} Banner {{ forloop.Counter }}" style="max-width: 100%; height: auto; margin-bottom: 10px;" />
{% endfor %}
</div>
{% elif myCategory.Logo %} {# 如果没有Banner组图，可以考虑将Logo作为备用Banner展示 #}
<div class="category-main-banner">
<img src="{{ myCategory.Logo }}" alt="{{ myCategory.Title }} 主Banner" style="max-width: 100%; height: auto;" />
</div>
{% endif %}
</div>
{% endif %}
In this example, we first check: myCategory.LogoDoes it exist, if it exists then display the Logo image. Then, we checkmyCategory.Images（Banner group image set），if any, it will cycle through all the banner images.We have also added a backup logic, which is if the category is not configured with a Banner image group but has a Logo, then the Logo can be displayed as the main Banner image. This enhances the robustness and flexibility of the template.
Integrated Application: Retrieve and display all information
Combine the above elements, and you can display a complete information block of a specified category at any location on the page:
{% categoryDetail featuredCategory with id="456" %} {# 获取ID为456的特色分类信息 #}
{% if featuredCategory %}
<section class="featured-category-block">
<h2 class="category-title">{{ featuredCategory.Title }}</h2>
{% if featuredCategory.Logo %}
<div class="category-header-logo">
<img src="{{ featuredCategory.Logo }}" alt="{{ featuredCategory.Title }} Logo" style="height: 60px; width: auto; float: left; margin-right: 15px;" />
</div>
{% endif %}
<div class="category-description-text">
<p>{{ featuredCategory.Description | safe }}</p>
</div>
<div style="clear: both;"></div> {# 清除浮动 #}
{% if featuredCategory.Images %}
<div class="category-hero-banners" style="margin-top: 20px;">
{% for banner in featuredCategory.Images %}
<img src="{{ banner }}" alt="{{ featuredCategory.Title }} 精选图 {{ forloop.Counter }}" style="width: 100%; height: auto; margin-bottom: 15px; border-radius: 5px;" />
{% endfor %}
</div>
{% endif %}
<a href="{{ featuredCategory.Link }}" class="view-all-button" style="display: block; text-align: center; padding: 10px 20px; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px;">
查看所有 {{ featuredCategory.Title }} 内容
</a>
</section>
{% else %}
<p>抱歉，未能加载特色分类信息。</p>
{% endif %}
In actual application, you would like to:styleAttribute replacement with external CSS styles to maintain code cleanliness and maintainability.With such a layout, visitors can clearly see the category logo, attractive banner images, and detailed descriptions, and can further explore related content through category links.