As a senior person who is deeply familiar with the operation of AnQiCMS, I fully understand your desire to make the category page more attractive and able to effectively convey information.In the Auto CMS, the category page is not just a container for document lists, but also a key point for brand image display and user guidance.By cleverly displaying the Banner image and category content, you will be able to significantly enhance the user experience and the professionalism of the page.
Next, I will explain in detail how to implement the display of Banner images and category content on the category page of the Anqi CMS.
The importance of optimizing the category page.
The category page is the key path for users to browse the website structure and find specific content.An elegantly designed classification page that can quickly attract users' attention through visual guidance and an overview of information, and help them find the content they need.Anqi CMS provides flexible backend configuration and powerful template tags, allowing you to easily customize exclusive Banner images and detailed introductions for each category, thereby creating beautiful and practical category pages.
Configure Banner image and content in the background
Firstly, we need to complete the configuration of the category information in the Anqi CMS backend management interface.This includes uploading a Banner image for the category page and filling in detailed category introduction content.
In addition to the Banner image and category content, you can also set other parameters such as SEO title, keywords, and custom URL as needed, which will all help improve the search engine friendliness of the category page.
In the template, display the Banner image and category content
Completed the background configuration, the next step is to call and display this information in the frontend template.The template system of AnQi CMS is very flexible, allowing you to specify custom templates for each category model and even specific categories.
Generally, the template file for the category page is located/template/{您的模板目录}/{模型table}/list.html，or more specifically)/template/{您的模板目录}/{模型table}/list-{分类ID}.htmlIf you want to customize the layout for a specific category, you can create a template file with the latter naming method.
You will mainly use these category templates.categoryDetailLabel to get detailed information about the current category, including the Banner image and category content set in the background before.
Display the category Banner image
To display the Banner image you uploaded on the category page, you can usecategoryDetaillabel combined withname="Images"Parameter.This parameter will return an array containing all Banner image URLs.You can iterate through this array to display all images, or only show the first image in the array as the main Banner.
The following is a basic template code example demonstrating how to retrieve and display the Banner images for categories:
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %} {# 检查是否有Banner图上传 #}
<div class="category-banner-slider">
{% for item in categoryImages %}
<img src="{{item}}" alt="{% categoryDetail with name="Title" %}" />
{% endfor %}
</div>
{% else %}
{# 如果没有Banner图，可以显示一个默认图片或者不显示 #}
<img src="/static/images/default_banner.jpg" alt="默认分类Banner" />
{% endif %}
If you only need to display the first Banner image, you can handle it like this:
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set pageBanner = bannerImages[0] %} {# 获取数组中的第一张图片URL #}
<img src="{{pageBanner}}" alt="{% categoryDetail with name="Title" %}" />
{% else %}
<img src="/static/images/default_banner.jpg" alt="默认分类Banner" />
{% endif %}
Please note,altThe settings of properties are very important for SEO, we go through{% categoryDetail with name="Title" %}Dynamically obtain the category title as the alternative text for the image.
Display category content
To display the rich content you have written for the category in the background, you also need to usecategoryDetailtags, but this time you need to match withname="Content"Parameters. Since the category content may contain HTML tags or Markdown syntax, we also need to use|safeA filter to ensure that content is rendered correctly as HTML and not as plain text. If your content uses Markdown, it can also berender=trueA parameter allows the system to automatically convert it to HTML.
The following is the template code for calling and displaying the category content:
<div class="category-description">
<h3>{% categoryDetail with name="Title" %}简介</h3>
{% categoryDetail categoryContent with name="Content" render=true %}
{{ categoryContent|safe }} {# 使用 |safe 过滤器确保HTML内容正确渲染 #}
</div>
By following these steps, you can flexibly display eye-catching banners and informative category content on the category pages of the Anqi CMS.This not only beautifies the page, but also effectively guides users, enhancing the overall professionalism and user satisfaction of the website.
Common Questions and Answers (FAQ)
Q: I uploaded the Banner image and filled in the category content, but the front-end page did not display. What's wrong with that?
Answer:This situation usually has several possible causes. First, please check if your classification template file is correctly referenced.categoryDetaillabels, andnameIs the parameter set?ImagesandContent. Make sure your template file is uploaded to the correct path (for example/template/{您的模板目录}/{模型table}/list.htmlorlist-{分类ID}.html）。另外，in English，after modifying the template file in the background，you sometimes need to manually clear the cache of AnQiCMS to ensure that the latest changes take effect. Finally，check that you incategoryDetailLabel usage is correct|safeFilter (for content) and whether it isImagescorrectly traversed or indexed the field.
问：Can I set different Banner images and content layouts for different categories?
Answer:It can be done. AnQiCMS provides flexible template specification functionality. You can create independent template files for each specific category, named in the format of{模型table}/list-{分类ID}.html. For example, the article category with ID 5 can be createdarticle/list-5.htmlTemplate.Thus, you can design a unique Banner display style and content layout for this category in this specific template.In the background "Document Category" editing page, you can also directly specify the "Category Template" as a custom template name, so that it applies to the current category or its subcategories.
Question: Will a long category content affect the page loading speed or layout?
Answer: