How to display the banner image and category content on the Anqi CMS category page?

As an experienced person who deeply understands the operation of AnQiCMS, I fully understand your desire to make the category page more attractive and able to effectively convey information.In Anqi CMS, the category page is not just a container for document lists, but also an important node for brand image display and user guidance.By cleverly displaying banner images and categorized content, you can significantly enhance user experience and the professionalism of the page.

Next, I will explain in detail how to implement the display of Banner images and the presentation of classified content on the Anqi CMS category page.

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.A well-designed category page that can quickly attract user 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 descriptions for each category, thus creating beautiful and practical category pages.

Configure Banner image and content for category in the background

First, we need to complete the configuration of the category information in the Anqi CMS backend management interface.This includes uploading the Banner image for the category page and filling in detailed category introduction content.

You need to navigate to the 'Content Management' under the 'Document Classification' module.Here, you can edit or create a new category. In the form for editing categories, you will see an option called "Banner Image".Here you can upload multiple images, usually used for carousel or displaying multiple related images.To ensure the page effect, it is recommended that you upload images of the same size so that the front-end template can display uniformly.

Immediately, in the "Category Content" field, you can enter or paste a detailed introduction, feature description, or any rich text information you wish to display to users.This editor supports a variety of text editing features, you can add illustrated introductions to categories as you edit document content.

In addition to the Banner image and category content, you can also set other parameters such as SEO title, keywords, custom URL, etc. as needed, which will help improve the search engine friendliness of the category page.

Display the Banner image and category content in the template

After completing the background configuration, the next step is to call and display this information in the frontend template.The Anqi CMS template system is very flexible, allowing you to specify custom templates for each category model even for specific categories.

Generally, the template files for category pages are located/template/{您的模板目录}/{模型table}/list.htmlOr more specifically,/template/{您的模板目录}/{模型table}/list-{分类ID}.html. If you want to customize the layout for a specific category, you can create a template file with the latter naming convention.

In these category templates, you will mainly usecategoryDetailTag to get the detailed information of the current category, including the Banner image and category content previously set in the background.

Display the category Banner image

Display the banner image you uploaded on the category page, you can usecategoryDetailLabel collaborationname="Images"The parameter will return an array containing all the Banner image URLs.You can loop through this array to display all images or only show the first image in the array as the main banner.

Here is a basic template code example demonstrating how to retrieve and display the category Banner image:

{% 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 setting of properties is 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 to cooperate withname="Content"The parameter. 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, you can also go throughrender=trueThe parameter allows the system to automatically convert it to HTML.

The following is the template code for calling and displaying categorized 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 banner images and informative category content on the Anqi CMS category page.This not only beautifies the page, but also effectively guides users, enhancing the overall professionalism and user satisfaction of the website.

Frequently Asked Questions (FAQ)

Ask: I have uploaded the Banner image and filled in the category content, but the front-end page does not display. What is the matter?

Answer:This situation usually has several possible causes. First, please check if your classification template file is correctly referenced.categoryDetailthe tags, andnamewhether the parameters are set asImagesandContentMake sure your template file is uploaded to the correct path, for example/template/{您的模板目录}/{模型table}/list.htmlorlist-{分类ID}.html)。Another, after modifying the template file in the background, sometimes you need to manually clear the AnQiCMS cache to ensure that the latest changes take effect. Finally, check what you are incategoryDetailDid the tag use correctly|safeFilter (for content) and whether it isImagescorrectly traversed or indexed the field.

Ask: Can I set different Banner images and content layouts for different categories?

Answer:Absolutely. 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.htmlThe template allows you to design a unique Banner display and content layout for this specific category.In the background "Document Classification" editing page, you can also directly specify the "Classification Template" to be a custom template name, so that it can be applied to the current category or its subcategories.

Question: Will a long category content affect the page loading speed or layout?

Answer:The length of the category content can indeed affect page loading and visual effects.Although the Go language backend of AnQiCMS ensures efficient data processing, the long HTML content itself increases the page size.It is recommended that you keep the content concise and highlight the key points when editing the category content in the background.If the content is indeed very long, consider using CSS or JavaScript to implement an "expand/collapse" feature that allows users to selectively read long content, thus keeping the page neat and loading quickly.At the same time, optimizing the image size, ensuring that the Banner image file is small, is also a key factor in improving page performance.