How to display the introduction and Banner image of the current category in the AnQiCMS template?

In website operation, how to make your category page more attractive while clearly conveying information is the key to improving user experience and SEO effectiveness.AnQiCMS (AnQiCMS) relies on its flexible template system, allowing you to easily display the introduction of the current category and personalized Banner images on the category page.

Next, we will explore how to implement this feature in the AnQiCMS template, making your website category page more vivid and professional.

1. Deeply understand the AnQiCMS template system

The template creation of AnQiCMS adopts a syntax similar to the Django template engine, which means you will mainly use two types of tags:

  • double curly braces{{ 变量 }}: is used to output the value of a variable.
  • single curly braces and percent signs{% 标签 %}: Used for controlling logic, such as conditional judgments (if), loop (for) and calling built-in function tags.

All template files are stored in/templatethe directory, and.htmlas a file extension. The templates for category pages are usually named{模型table}/list.htmlor customizedlist-{分类ID}.htmlIn these templates, AnQiCMS will automatically provide the context data of the current category, making it convenient for you to directly call it.

2. Get and display the introduction of the current category.

The category introduction is an important window for quickly introducing the content of this category to visitors. In AnQiCMS, you can easily obtain this information throughcategoryDetailtags.

In the background, on the "Content Management" -> "Document Category" page, when editing the category description you need to set, there will be a "Category Description" field.Here you can fill in the text content, which can be called in the front-end template.

To display the introduction of the current category, you can write the code in the template like this:

<div class="category-description">
    {# 使用 categoryDetail 标签获取当前分类的描述信息，并使用 |safe 过滤器防止HTML转义 #}
    {% categoryDetail currentCategoryDescription with name="Description" %}
    {{ currentCategoryDescription|safe }}
</div>

Code analysis:

  • {% categoryDetail currentCategoryDescription with name="Description" %}: This is a powerful tag that retrieves the details of the current category.name="Description"The parameter specifies that we need to retrieve the introduction content of the category.currentCategoryDescriptionIt is a custom variable name used to store the retrieved introduction text.
  • {{ currentCategoryDescription|safe }}The obtained summary text will be output to the page.|safeThe filter is very important here because the category summary content may contain HTML tags (such as bold, links, etc.), using|safeEnsure that these HTML contents are correctly parsed and displayed by the browser, rather than being output as plain text.

3. Display the Banner image of the current category.

A beautifully designed Banner image can instantly catch the visitor's attention and enhance the visual appeal and professionalism of the page.The AnqiCMS allows you to set multiple Banner images for each category.

In the background "Content Management" -> "Document Category" page, when editing categories, there will be a "Banner Image" option.You can upload one or more images here.

Due to the support of multiple image uploads for the Banner image, when it is called in the template, it is returned as an array of image URLs. You need to use a loop to iterate over and display them.

3.1 Display all Banner images

If you want to display all uploaded Banner images in a carousel, you can do this:

<div class="category-banner-slider">
    {# 获取当前分类的所有 Banner 图片 #}
    {% categoryDetail categoryBanners with name="Images" %}
    {% if categoryBanners %}
        {% for imageUrl in categoryBanners %}
        <img src="{{ imageUrl }}" alt="{% categoryDetail with name='Title' %} Banner" class="category-banner-image">
        {% endfor %}
    {% else %}
        {# 如果没有设置 Banner 图，可以显示一个默认占位图或不显示 #}
        <img src="/public/static/images/default-banner.webp" alt="默认Banner" class="category-banner-image">
    {% endif %}
</div>

Code analysis:

  • {% categoryDetail categoryBanners with name="Images" %}Get the URL array of all Banner images associated with the current category and store it incategoryBannersthe variable.
  • {% if categoryBanners %}: CheckcategoryBannersCheck if the array is not empty to ensure that only images uploaded are displayed.
  • {% for imageUrl in categoryBanners %}：TraversecategoryBannersarray,imageUrlThe variable will get the URL of an image in each loop.
  • <img src="{{ imageUrl }}" alt="{% categoryDetail with name='Title' %} Banner" ...>: Use.<img>The label displays the image.altAttributes are very important for SEO and accessibility, here we called the title of the current category asalttext, making it more semantically meaningful.

3.2 Display the first Banner image only

In many cases, you may only need to display the first image in the category Banner, such as the header large picture of the page.

<div class="category-banner-header"
     {% categoryDetail categoryBanners with name="Images" %}
     {% if categoryBanners %}
        {# 获取数组中的第一张图片URL #}
        {% set firstBannerUrl = categoryBanners[0] %}
        style="background-image: url('{{ firstBannerUrl }}');"
     {% else %}
        {# 如果没有设置 Banner 图，可以设置一个默认背景 #}
        style="background-image: url('/public/static/images/default-header.webp');"
     {% endif %}
     >
    {# Banner 区域内的其他内容，比如分类标题等 #}
    <h1>{% categoryDetail with name="Title" %}</h1>
</div>

Code analysis:

  • {% set firstBannerUrl = categoryBanners[0] %}: By index[0]Directly obtaincategoryBannersThe first element in the array, which is the URL of the first Banner image.
  • style="background-image: url('{{ firstBannerUrl }}');": Set the obtained image URL todivThe background image of the element. This method is often used for responsive large images or banners that need to cover content.
  • {% categoryDetail with name="Title" %}: Call the category title again, which can be used for text information on the Banner.

4. Integrate into your category template.

Integrate the above code snippet into your category list page template (for examplearticle/list.htmlorproduct/list.html), which is usually placed at the top or main area of the page content.

”`twig {% extends ‘base.html’ %} {# Inherit your base template #}

{% block content %}

<div class="category-header">
    {# 获取当前分类的标题，作为页面主要标题 #}
    <h1>{% categoryDetail with name="Title" %}</h1>

    {# 显示分类简介 #}
    <div class="category-intro">
        {% categoryDetail categoryDesc with name="Description" %}
        {{ categoryDesc|safe }}
    </div>

    {# 显示分类 Banner，这里选择只显示第一张作为头部背景 #}
    <div class="category-main-banner"
         {% categoryDetail categoryBanners with name="Images" %}
         {% if categoryBanners %}
            {% set firstBannerUrl = categoryBanners[0] %}
            style="background-image: url('{{ firstBannerUrl }}');"
         {% else %}
            style="background-image: url('/public/static/images/default-category-banner.webp');"
         {% endif %}
         >
        {# 您可以在 Banner 上叠加其他元素，例如分类名称或标语 #}
    </div>
</div>

<div class="category-content">
    {# 这里放置您的文档列表标签，例如 archiveList，用于显示分类下的文章或产品 #}
    {% archiveList archives with type