How to display the detailed information of AnQiCMS specific categories, such as introduction or Banner image, using the `categoryDetail` tag?

In the template development of Anqi CMS, effectively displaying the detailed information of categories is crucial for improving the user experience and SEO performance of the website.categoryDetailTags are born for this, allowing us to flexibly obtain and present various information of specific categories, from basic introduction text to visually striking Banner images, all can be easily handled.

Core Function Analysis:categoryDetailTag Overview

categoryDetailTags are mainly used to obtain detailed data of a single category. Its basic usage is{% categoryDetail 变量名称 with name="字段名称" id="分类ID" %}.nameThe parameter is the core, which determines which specific information of the category you want to obtain, such as category ID, title, link, description, content, thumbnail, or Banner image, etc.

The intelligence of this tag lies in the fact that when you are on a category page (for example, visitinghttp://yourdomain.com/category/your-category-name), if you do not specifyidortokenThe parameter, it will automatically recognize and retrieve the current page's category information, which greatly simplifies the template code. Of course, if you need to retrieve information for any specific category, you just need to passid="分类ID"ortoken="分类URL别名"Specify clearly.

Configure category details in the background.

Before delving into the template code, we first need to fill in the required information for the categories in the Anqi CMS backend. Go to the backend's 'Content Management' -> 'Document Categories', select or create a category, and in the editing page you will see the following key settings, which are related tocategoryDetailTags are closely related:

  • Category nameThis is the title displayed on the front end for the category, corresponding to:Titlefield.
  • Category IntroductionIt is usually used to provide a brief overview of the category, and it is also an important source of tags in SEO:descriptionTags are an important source of content corresponding to:Descriptionfield.
  • Category ContentIf the category page needs to display more detailed introduction text, images, or other rich text content, it can be filled in here, corresponding toContentfield.
  • ThumbnailAn image that represents a category can be uploaded, usually used for list display or as the header image on the category page. In the template, it is divided intoLogo(possibly refers to a large image or main image) andThumb(thumbnail).
  • Banner imageThis is a very practical feature. You can upload multiple images as the banner carousel for this category. These images will be presented as a set of data.Imagesfields.
  • Other parametersHere is the place for the extended category field. If you have customized fields such as 'Contact Phone', 'Special Services', etc., they will also be called by the tags.categoryDetailThe tags are called.

Ensure that this information is filled out completely in the background, so that it can be presented beautifully in the front-end template.

Flexible application in the front-end template

With the support of background data, we can make use of it in the front-end templatecategoryDetailTags showcase their skills.

Get basic information: title, description and content

The most common need is to display the title, description, and detailed content of the category.

{# 假设我们正在一个分类页面，或者通过 id 指定了一个分类 #}
<h1>{% categoryDetail with name="Title" %}</h1>
<p class="category-description">{% categoryDetail with name="Description" %}</p>

<div class="category-content">
    {# 分类内容通常包含HTML，所以需要使用 |safe 过滤器防止HTML被转义 #}
    {# 如果分类内容是通过Markdown编辑器编写的，可以添加 render=true 参数进行转换 #}
    {% categoryDetail categoryHtmlContent with name="Content" render=true %}
    {{ categoryHtmlContent|safe }}
</div>

Here,categoryHtmlContentThis is the variable name we assign to the content we obtain, for easy subsequent processing.|safeThe filter ensures that HTML tags in the content are correctly parsed and displayed.render=trueThen let Markdown format content be automatically converted to HTML on the front end.

Display category thumbnails and banner images.

Visual elements are an important part of attracting users.categoryDetailTags also provide strong support in image display.

If you only need to display a single thumbnail or main image of a category:

{# 显示分类主图或Logo #}
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}">

{# 显示分类缩略图 #}
<img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}">

For the Banner carousel images uploaded to the backend, as it may contain multiple images, we need to iterate over and display them throughfora loop:

<div class="category-banner-slider">
    {# 首先获取所有Banner图片，并赋值给一个变量，例如 categoryImages #}
    {% categoryDetail categoryImages with name="Images" %}
    {# 接着遍历这个图片数组 #}
    {% for imageSrc in categoryImages %}
        <div class="banner-item">
            <img src="{{ imageSrc }}" alt="{% categoryDetail with name="Title" %} Banner">
        </div>
    {% endfor %}
</div>

If you only need to display the first image in the Banner as the cover, you can handle it like this:

{% categoryDetail bannerList with name="Images" %}
{% if bannerList %} {# 判断是否存在Banner图片 #}
    {% set firstBanner = bannerList[0] %} {# 获取数组中的第一张图片 #}
    <div class="category-hero-banner" style="background-image: url('{{ firstBanner }}');">
        {# 这里可以放置其他内容，如分类标题等 #}
    </div>
{% endif %}

Call custom fields

Custom fields defined in the "Other Parameters" section of the "Document Categories" in the background, also accessible throughcategoryDetailflexible tag invocation.

If you know the name of a custom field (for example, you defined a field namedcontactEmail):

<p>分类联系邮箱：{% categoryDetail with name="contactEmail" %}</p>

If you want to iterate over all custom fields and display them,ExtraField (This is an array containing all additional parameters):

<div class="category-custom-fields">
    {% categoryDetail extras with name="Extra" %}
    {% for field in extras %}
        <p>{{ field.Name }}：{{ field.Value }}</p>
    {% endfor %}
</div>

In this way, you can clearly present various custom information configured on the backend to the front end of the website.

Advanced Techniques and Precautions

  1. DistinguishcategoryListWithcategoryDetail:categoryDetail主要用于显示单个分类的详细信息，而categoryListIt is used to retrieve and iterate over multiple categories. When designing a template, appropriate tags should be chosen according to the needs. For example, when displaying all top-level categories on the homepage, usecategoryListWhen clicking on a category to enter its detail page, use thiscategoryDetailGet the details of the current category.

  2. Environment with multiple sitessiteIdIf your security CMS has deployed multiple sites and needs to call category information across sites, you cancategoryDetailLabel addsiteId="站点ID"the parameter to specify the target site.

  3. the location of the template file.Remember that all template files should be placed in/templatedirectory, and use.htmlas the file extension.

With the detailed explanations and examples above, I believe you have gained a good understanding of the security CMScategoryDetailHow to display the introduction of categories, Banner images, and other detailed information has been fully understood.Master these, and you will be able to build websites that are more functional and content-rich.

Common Questions (FAQ)

Q1: Why did I upload a Banner image on the backend, but nothing is displayed on the front page?A1: Please check if your template code is using correctly.{% categoryDetail categoryImages with name="Images" %}Label, and ensure that it is obtainedcategoryImagesAfter the variable{% for imageSrc in categoryImages %}The image URL was traversed in a loop. Also, it must be confirmed that the background indeed uploaded images for this category, and the image path is valid.

Q2: Classification content HTML code is not parsed and the tag text is displayed directly, why is that?A2: When you are fromContentWhen retrieving content, if it includes HTML code, it is necessary to use|safeA filter to indicate that the template engine should output the content as safe HTML rather than escaping it. For example:{{ categoryHtmlContent|safe }}If the content is in Markdown format, an additionalrender=trueParameters can be used to convert it to HTML, such as:{% categoryDetail categoryHtmlContent with name="Content" render=true %}{{ categoryHtmlContent|safe }}.

Q3: I want to display the introduction of a specific category on other pages of the website (not category detail pages), what should I do?A3: In this case, you need to explicitly tellcategoryDetailthe label to get information about which category, by specifying itsidortokenParameters. For example, to display the category summary for ID "5", you can use:{% categoryDetail with name="Description" id="5" %}[en] Or if the URL alias for this category is “about-us”, then you can use: `{% categoryDetail with name %}`