How to display the current category's introduction and Banner image in AnQiCMS templates?

How to make your category page more attractive in website operation and clearly convey information is the key to improving user experience and SEO effect.The AnQiCMS (AnQiCMS) enables you to easily display the introduction of the current category and personalized Banner images on the category page with its flexible template system.

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

1. English translation of auto: Deeply understand AnQiCMS template system

AnQiCMS's template creation uses 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 percentage signs{% 标签 %}：Used for controlling logic, such as conditional judgment (if)、loop (for) as well as calling built-in function tags.

All template files are stored in:/templatedirectory, and named with.htmlAs a file extension. The template of the category page is usually named{模型table}/list.htmlor a custom onelist-{分类ID}.html. In these templates, AnQiCMS will automatically provide the context data of the current category, making it convenient for you to directly call it.

2. Obtain 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 get this information through tags.categoryDetailTags can be used to easily obtain this information.

In the "Content Management" -> "Document CategoryThis text 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 detailed information of the current category.name="Description"The parameter specifies that we want to get the brief content of the category.currentCategoryDescriptionIt is a custom variable name used to store the brief text obtained.
  • {{ 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|safeCan ensure 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

An exquisite Banner image can instantly capture the visitor's attention and enhance the visual effects and professionalism of the page.The CMS allows you to set multiple Banner images for each category.

In the "Content Management" -u003e "Document CategoryYou can upload one or more images here.

Since the Banner image supports multiple uploads, when called in the template, it returns an array of image addresses. You need to use a loop to iterate through and display them.

3.1 Show all Banner images

If you want to display all uploaded Banner images in the form of a carousel, you can do it like 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.categoryBannersthe variable.
  • {% if categoryBanners %}: CheckcategoryBannersCheck if the array is not empty, ensuring that only images uploaded are displayed.
  • {% for imageUrl in categoryBanners %}: Iterate overcategoryBannersArray,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.altProperties are very important for SEO and accessibility, here we use the title of the current category asalttext, making it more semantically meaningful.

3.2 Only display the first Banner image

In many cases, you may only need to display the first image in the category Banner, such as as the header large image 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 Banner that needs to cover content.
  • {% categoryDetail with name="Title" %}：Again call the classification title, which can be used for text information on the Banner.

4. Integrate into your classification template

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

auto

{% 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