In website operation, clear and attractive category information is crucial for improving user experience and optimizing search engine performance.An精心设计的分类页面can help users quickly understand the subject of the category, and can also attract users by displaying relevant visual elements (such as Banner images) and provide rich content for SEO.AnQi CMS provides powerful and flexible functions, allowing you to easily achieve these goals.
Configure category information in Anqi CMS backend
When you enter the edit page of a category, you will see multiple configuration items:
- Category Introduction
- Banner imageIn the "Other ParametersThis is the place to upload exclusive carousel images for categories.You can upload multiple images, and the system will manage them as a set of images.To achieve the **display effect, please upload images with consistent sizes as much as possible.These banner images can be displayed on the front-end page in various forms such as carousel, background image, etc., greatly enriching the visual effects of the page.
After completing the filling and uploading, remember to click Save to make your changes take effect.
Call category details in template
The template system of AnQi CMS is designed to be very powerful and easy to use, you can easily obtain detailed information about the category configuration of the background by using built-in template tags. Here, the main techniques used arecategoryDetailLabel.
Get category overview
To get the overview information of a category, you can usecategoryDetailtags, and throughname="Description"parameters to specify the description content of the category.
If it is used on the category page (such as the category list page),categoryDetailThe label will automatically identify the category of the current page, and you do not need to specify an ID. For example:
{# 假设这是分类页面的某处 #}
<p class="category-description">
{% categoryDetail with name="Description" %}
</p>
If you need to use a non-category page, or need to obtain the introduction of a specific ID category, you can addid="分类ID"Parameters. For example, to get the category summary for ID 10:
<p class="some-other-category-description">
{% categoryDetail with name="Description" id="10" %}
</p>
Display category banner image
The category banner images are usually stored in the form of image groups because you can upload multiple images on the backend. To retrieve these images, you can also usecategoryDetailtags, but the parameter isname="Images"This tag will return an array of image URLs.
Since the return value is an array, you need to usefora loop to iterate over the image array and display each image.
{# 假设这是分类页面的某处，用于显示Banner轮播图 #}
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
<div class="category-banner-slider">
{% for item in categoryImages %}
<img src="{{ item }}" alt="分类Banner图" class="img-fluid" />
{% endfor %}
</div>
{% endif %}
If you only need the first Banner image as the page background, or only intend to display one main image, you can handle it like this:
{# 仅获取并显示第一张Banner图作为背景 #}
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set firstBanner = bannerImages[0] %} {# 获取数组中的第一个元素 #}
<div class="page-banner" style="background-image: url({{ firstBanner }});">
<!-- 这里可以放置其他页面标题、描述等内容 -->
</div>
{% endif %}
Here,{% set firstBanner = bannerImages[0] %}It will take the URL of the first image in the array.
Comprehensive Example: Display introduction and Banner image on the category page
Suppose you are editing a list page template for a category (for examplearticle/list.htmlorproduct/list.html），Hope to display the name, introduction, and a Banner carousel at the top of the page.
{% comment %} 这是一个分类列表页模板的示例代码 {% endcomment %}
{% categoryDetail currentCategory with name="Category" %} {# 默认获取当前页面的分类信息 #}
<section class="category-header">
<div class="container">
<h1>{{ currentCategory.Title }}</h1> {# 显示分类名称 #}
<p class="category-description">
{{ currentCategory.Description }} {# 显示分类简介 #}
</p>
{% if currentCategory.Images %} {# 检查是否有Banner图上传 #}
<div class="category-banner-slider owl-carousel"> {# 假设这里使用了一个轮播组件，例如Owl Carousel #}
{% for image in currentCategory.Images %}
<div class="item">
<img src="{{ image }}" alt="{{ currentCategory.Title }} Banner" class="img-fluid" />
</div>
{% endfor %}
</div>
{% endif %}
</div>
</section>
<section class="category-content">
<div class="container">
{# 这里是分类下的文章或产品列表，可以使用archiveList标签获取 #}
{% archiveList archives with type="page" %}
{% for item in archives %}
<article>
<h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<p>{{ item.Description }}</p>
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
</article>
{% empty %}
<p>该分类下暂无内容。</p>
{% endfor %}
{% endarchiveList %}
{# 分页导航 {% pagination pages with show="5" %} ... {% endpagination %} #}
</div>
</section>
{% endcategoryDetail %}
In the above example,categoryDetailTag by assigning the entire category object tocurrentCategoryvariable (throughwith name="Category"），Let you directly access itcurrentCategory.Title/currentCategory.DescriptionandcurrentCategory.Imagesand other ways to access the various properties of categories, making the code more neat and readable.
Tips:
- When designing banner images, consider the display effects of different devices and suggest creating responsive images or using CSS media queries for adaptation to ensure a good visual experience on various screen sizes.
- The file size of the Banner image directly affects the page loading speed. Please ensure that the image is optimized and compressed, and use modern image formats such as WebP whenever possible to enhance website performance.
Common Questions and Answers (FAQ)
- 问：Why didn't the Banner image I uploaded display on the front-end page?
- 答：Please first confirm that you have uploaded and saved the image in the "Document Classification" editing page under the "Other Parameters
categoryDetail with name="Images"Label, and whether it passes{% for ... in categoryImages %}Looped through and outputted<img>Label. Moreover, browser cache or some CSS styles may also cause images to be hidden. You can try clearing the browser cache or checking the developer tools.
- 答：Please first confirm that you have uploaded and saved the image in the "Document Classification" editing page under the "Other Parameters
- 问：分类简介内容可以支持HTML标签吗？
- 答：分类简介 (
DescriptionThe field is designed as plain text content.If you wish to include HTML formatted content in the category introduction, you can utilize the 'Category Content' field (also in the 'Other Parameters' on the category editing page or the main content area).
- 答：分类简介 (