How to display detailed information of a specific category in AnQiCMS, including its introduction and Banner image?

In AnQiCMS, the category page is not just a simple list of content, but also an important part of the website's information architecture, as well as a key entry point for displaying specific themes to users and guiding them to delve deeper into browsing.A well-designed category page that not only enhances user experience but also effectively optimizes search engine rankings.This article will provide a detailed introduction on how to flexibly display the detailed information of a specific category in AnQiCMS, including its introduction and beautiful Banner image.

Back-end settings for category information

To display exclusive introductions and Banner images on the category page, you first need to make the corresponding settings in the AnQiCMS backend.Please log in to the backend management interface and then navigate to the 'Content Management' module under the 'Document Category' option.Here, you can edit or create a new category.

In the category editing page, you will find several key input boxes:

  • Category Name: This is the category title, which will be displayed directly on the website front end.
  • Category introduction: Here you can fill in a brief text to summarize the main content of this category.This introduction is usually used for displaying summaries on category list pages or as an opening introduction on category detail pages.It is also very important for search engine optimization (SEO), and can help search engines understand the core content of category pages.
  • Banner imageThis is an image upload area, you can upload one or more images for the current category.These images are usually used at the top of the category page, as a visual focus, enhancing the aesthetics and professionalism of the page.You can upload multiple images to achieve a carousel effect, or you can upload just one as a fixed Banner.

Make sure you have correctly filled in the 'Category Description' and uploaded the 'Banner Image' for the categories that need to be displayed in the background.This background data is the basis for the display on the front end.

The method called in the front-end template

After completing the background settings, next, we need to use the template tags provided by AnQiCMS in the website template to retrieve and display this information.AnQiCMS uses a syntax similar to the Django template engine, making data calls intuitive and easy to understand.

We mainly use in the category page templatecategoryDetailTags to get the detailed information of the category.

Display the category introduction

To display the category overview, you can use it in the template file.categoryDetailtags, and specifyname="Description"To get the category overview field value.

  • Get the current category overview:When you are on the details page of a category, AnQiCMS will automatically identify the current category, and you do not need to specify the category ID to directly obtain its introduction:
    
<div class="category-description">
    {% categoryDetail with name="Description" %}
</div>
  • Get the introduction of a specified category:If you need to display the introduction of a specific category on other pages (such as the homepage or navigation menu), you canidspecify the category ID with parameters:
    
<div class="some-other-place-description">
    {% categoryDetail with name="Description" id="1" %} {# 这里的 "1" 替换为您的分类ID #}
</div>

Display the category Banner image

Category banner images usually exist in the form of image groups, AnQiCMS usesImagesfields to store them. In the template, you need to retrieve this image group and iterate over it to display.

  • Display all Banner images (for carousel):If your category has uploaded multiple Banner images and you want them to be displayed in a carousel, you can write the template code like this:

    {% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %} {# 检查是否存在Banner图 #}
  <div class="category-banner-carousel">
    {% for imageUrl in categoryBanners %}
      <img src="{{ imageUrl }}" alt="分类Banner图 - {% categoryDetail with name='Title' %}" />
    {% endfor %}
  </div>
{% endif %}

    This code will traversecategoryBannersAn array of image URLs, and generate a<img>Label. The CSS or JavaScript on the front end (if a carousel effect is needed) will implement the visual effects on this basis.altThe property settings help with SEO and improve the accessibility of images.

  • Only display the first Banner image:If the category has multiple Banner images, but you only want to display the first one, you can handle it like this:

    {% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %} {# 再次检查是否存在Banner图 #}
  {% set firstBannerUrl = categoryBanners[0] %} {# 获取数组的第一个元素 #}
  <img src="{{ firstBannerUrl }}" alt="分类Banner图 - {% categoryDetail with name='Title' %}" />
{% endif %}

    Here we usesetThe tag defines a temporary variablefirstBannerUrlto store the URL of the first image.

  • Consider using Logo or Thumb as Banner (if only one):If your category usually only has one representative image as a Banner, and this image is also set in the background fields such as "Category Thumbnail Large Image (Logo)" or "Category Thumbnail (Thumb)", then directly calling these fields will be more concise:

    {# 如果Logo字段代表分类Banner图 #}
{% categoryDetail categoryLogo with name="Logo" %}
{% if categoryLogo %}
  <img src="{{ categoryLogo }}" alt="分类Banner图 - {% categoryDetail with name='Title' %}" />
{% endif %}

Template file placement and modification

These template codes are usually placed in the category list template file of your AnQiCMS theme directory. According to the AnQiCMS template conventions, the template files for category pages are generally:

  • General category list page: {分类模型}/list.htmlfor examplearticle/list.htmlorproduct/list.html)
  • Specific category list page: {分类模型}/list-{分类ID}.htmlfor examplearticle/list-10.htmlused for the article category with ID 10)

You can/templateFind the currently used theme folder in the directory, and then modify the correspondinglist.htmlFile.If a specific category needs an exclusive layout, you can also specify a custom template file for it in the backend editing page of that category, through the 'Other Parameters' option under 'Category Template'.

Practical suggestions and precautions

  • Image optimization:When uploading a banner image, it is recommended to compress and adjust the size of the image appropriately to ensure page loading speed.AnQiCMS also provides image compression features, which can be configured in the 'Content Settings'.
  • SEO friendly:In<img>Set meaningful tags in the labelaltText that is not only friendly to search engines, but also improves the user experience in imageless mode.
  • Front-end style:The above code is responsible for outputting HTML structure and data, you may also need to write CSS styles to beautify the Banner image, such as adjusting size, positioning, adding responsive layout, etc.
  • Cache Update:After each modification of the template file or backend content, it is recommended that you click on 'Update Cache' in the AnQiCMS backend to ensure that the latest content is displayed in the website front end in a timely manner.

By following these steps, you can flexibly and efficiently display the introduction and Banner image of a specific category in AnQiCMS, thereby enhancing the visual appeal and professionalism of the website's content presentation.

Frequently Asked Questions (FAQ)

1. Ask: I have set up a Banner image, but it does not display on the front page. How should I troubleshoot?Answer: First, make sure that the image has been uploaded and saved successfully in the background category editing page. Second, check whether the template file you are using has correctly called{% categoryDetail categoryBanners with name="Images" %}Such a label, and traversedcategoryBannersArray. Finally, don't forget to refresh your browser cache, or click on "Update Cache" in the AnQiCMS backend to ensure that the latest template code and data are effective.

2. Ask: Should I use the field to display only one category image as the cover?Imagesor not?LogoorThumb?Answer: It depends on your specific needs and backend setting habits. If the category has only one representative image and you have uploaded it to the "Category Thumbnail Large Image (Logo)") or "Category Thumbnail (Thumb)" field, then just call{% categoryDetail with name="Logo" %}or{% categoryDetail with name="Thumb" %}It will be more concise. If the image is uploaded to the "Banner Image" area (i.e.ImagesField), even if there is only one, it can also pass{% set firstBannerUrl = categoryBanners[0] %}the way to obtain.

3. Ask: What is the difference between category overview and category content, and where should they be used?Answer: Category overview (DescriptionA brief text that summarizes the core theme of the category, often used as a summary on category list pages, at the top of category pages, or as the page'smeta descriptionTag content, helpful for SEO. Categorization content(ContentThis can include more detailed and rich text information, such as mixed text and images, long articles, etc., which are usually displayed in the main content area of the category page, providing more comprehensive information.You can reasonably choose to use these two fields according to the page layout needs.