Build a website in AnQiCMS, especially when we need to present rich and accurate information on the category page, it is particularly important to have a deep understanding of how to obtain detailed data of the current category in the template.This is not just for aesthetics, but also to provide a better user experience and search engine optimization.
AnQiCMS's template system is designed to be very flexible and easy to use, it adopts syntax similar to Django template engine.When we are on a category page, we want to get the title, description, thumbnail, and even the carousel group information of the category. The system has prepared the corresponding tools for us.
core tools:categoryDetailtags
To get the detailed information of the current category, we mainly use a powerful tag:categoryDetail.This tag can help us easily extract the various properties of the classification.Its usage is very intuitive. Usually, when we are already on the category page, even without specifying the category ID, it can intelligently recognize and provide data for the current category.
For example, if we want to get the title of the current category, we can write it like this:
<h1 class="category-title">{% categoryDetail with name="Title" %}</h1>
Here,name="Title"Tell the system what we want to get is the category title. Similarly, getting the category description is also simple:
<div class="category-description">
{% categoryDetail categoryDesc with name="Description" %}
{{ categoryDesc|safe }}
</div>
Here we introduce an intermediate variablecategoryDescReceive the description content, and it has been used|safeFilter. This is because the classification description usually contains rich text format, such as links, bold text, or other HTML tags,|safeThe function of this is to inform the template engine that this content is safe and does not need to be escaped, so that HTML tags can be correctly parsed and displayed.
Display Category Images: Thumbnail and Banner Group Image
The visual presentation of a website cannot do without images, and this is also true for category pages. AnQiCMS allows us to set thumbnails and multiple Banner group images for each category.
To get the thumbnail of the category, we can useLogoorThumbfield. Usually,Logoit may represent a larger size image,ThumbThis represents a thumbnail processed by the system. You can choose to use it according to your design requirements:
<img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" class="category-thumb">
It is worth noting that we recommend always using<img>tag.altProperties, and use category titles as their values, which are very beneficial for SEO and accessibility.
If your category is set to display multiple Banner groups, you need a small loop to retrieve them.ImagesField will return an array of image URLs, we can iterate over this array to display all images:
<div class="category-banner-slider">
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
{% for imageUrl in categoryBanners %}
<img src="{{ imageUrl }}" alt="{% categoryDetail with name="Title" %} Banner" class="banner-image">
{% endfor %}
{% endif %}
</div>
In the above code snippet, we first assign the value ofImagesto the fieldcategoryBannersVariables. Then, we use aifstatement to determinecategoryBannerswhether it exists to avoid errors when there are no images. Next, useforto iteratecategoryBannersArray,imageUrlThe variable will sequentially obtain the URL of each image, and then we can display them in the<img>tag.
If you only need to display the first Banner image as the top background or main image of the category page, you can handle it like this:
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
{% set firstBanner = categoryBanners[0] %}
<div class="category-hero-section" style="background-image: url('{{ firstBanner }}');">
{# 其他内容，如分类标题等 #}
</div>
{% endif %}
Here, we utilize{% set %}The tag defines a new variablefirstBannerTo store the first element of the array, then use it as the background image URL.
Combined use, making the category page shine
Combine these tags, in a typical classification list template file (such as{模型table}/list.htmlor a customlist-{分类ID}.html), you can build the header area of the page like this:
{# 假设这是分类页的顶部区域，例如 template/default/article/list.html #}
{%- categoryDetail currentCategory with name="Extra" %} {# 'Extra'可用于获取所有自定义字段 #}
{%- if currentCategory %}
<div class="category-header">
<h1 class="category-heading">{% categoryDetail with name="Title" %}</h1>
<div class="category-meta">
<span class="category-id">分类ID：{% categoryDetail with name="Id" %}</span>
<span class="category-post-count">包含文档：{% categoryDetail with name="ArchiveCount" %} 篇</span>
</div>
<div class="category-intro">
{% categoryDetail categoryDescription with name="Description" %}
{{ categoryDescription|safe }}
</div>
{% categoryDetail categoryLogo with name="Logo" %}
{% if categoryLogo %}
<img src="{{ categoryLogo }}" alt="{% categoryDetail with name="Title" %} 主图" class="category-main-image">
{% endif %}
{% categoryDetail categoryBannerImages with name="Images" %}
{% if categoryBannerImages %}
<div class="category-banner-group">
{% for bannerItem in categoryBannerImages %}
<img src="{{ bannerItem }}" alt="{% categoryDetail with name="Title" %} Banner {{ forloop.Counter }}" class="banner-item">
{% endfor %}
</div>
{% endif %}
</div>
{%- endif %}
{# 接下来可以放文档列表标签 {% archiveList archives with type="page" %} ... {% endarchiveList %} #}
Through the above method, you can flexibly and comprehensively obtain and display the detailed information of the current category in AnQiCMS templates, making the content of your website's category page more abundant and structured.
Common Questions and Answers (FAQ)
1. Why did I usecategoryDetailtags in the template, but no category information is displayed on the page?
Ensure that you have filled in the corresponding information for the current category in the 'Content Management' - 'Document Category' section of the AnQiCMS backend, such as 'Category Name', 'Category Introduction', 'Thumbnail', and 'Banner Image'.If the background data is empty, the template naturally cannot retrieve and display it.nameIs the parameter spelled correctly, for examplename="Title"/name="Description"etc., pay attention to case sensitivity.
2. I want to get the category information of a specific ID, not the category information of the current page, what should I do?
categoryDetailTags support throughidSpecify the parameter to get information for a specific category. For example, if you want to get the title of the category with ID 5, you can write it like this: {% categoryDetail with name="Title" id="5" %}This is very useful when referencing specific category information on the homepage or other non-category pages.
3. How to only display the first image of the category Banner group instead of looping through all?
When you go through{% categoryDetail categoryBanners with name="Images" %}After obtaining the Banner image array, you can use{% set %}Labels and array indices to get the first image. For example:
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
{% set firstBanner = categoryBanners[0] %}
<img src="{{ firstBanner }}" alt="分类主Banner图">
{% endif %}
The benefits of doing this are that, even if multiple Banner images are uploaded on the backend, you can flexibly control to only display the first one, at the same timeifjudgment can also prevent the page from crashing when there are no images.