How does the `categoryDetail` tag display the specific category details of AnQiCMS, such as the introduction or Banner image?

In Anqi CMS template development, effectively displaying detailed category information is crucial for improving website user experience and SEO performance.categoryDetailThe label is born for this, it allows us to flexibly obtain and present various information of a specific category, from basic introduction text to visually striking banner images, all can be easily handled.

Core function analysis:categoryDetailLabel Overview

categoryDetailTags are mainly used to obtain detailed data for a single category. Its basic usage is{% categoryDetail 变量名称 with name="字段名称" id="分类ID" %}. Among them,nameThe parameter is the core, it 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 certain category page (such as, visitinghttp://yourdomain.com/category/your-category-name), if you do not specifyidortokenThe parameter automatically identifies and retrieves the classification information of the current page, which greatly simplifies the template code. Of course, if you need to retrieve information for any specific category, you just need to useid="分类ID"ortoken="分类URL别名"Please specify clearly.

Configure category details in the background.

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

  • Category Name: This is the title displayed on the front end for the category, corresponding toTitlefield.
  • Category introduction: Usually used to provide a brief overview of the category, also important for SEO indescriptionthe source of important tags corresponding toDescriptionfield.
  • Category contentIf the category page needs to display more rich introduction text, images, or other rich text content, it can be filled in here, corresponding toContentfield.
  • Thumbnail: You can upload a representative image for the category, usually used for list display or as the header image of the category page. In the template, it is divided intoLogo(possibly referring to the main image or large 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 displayed as a group of data.Imagesthe field.
  • .: This is the place for the extended category field. If you customize fields such as 'Contact Phone', 'Special Services', etc., they will also be called throughcategoryDetailthe label is called.

Make sure this information is filled in on the back-end, so it can be presented beautifully in the front-end template.

Flexible application in the front-end template

With the support of back-end data, we can make use of it in the front-end template.categoryDetailThe label showcases its talents.

Get basic information: title, description, and content.

The most common requirement is to display the title, description, and detailed content of categories.

{# 假设我们正在一个分类页面，或者通过 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 use for the content obtained for later processing.|safeThe filter ensures that the HTML tags in the content are parsed and displayed correctly whilerender=trueLet Markdown 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,categoryDetailThe tag also provides strong support in displaying images.

If you only need to display a single thumbnail or main image for 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 uploaded on the backend, since it may contain multiple images, we need to go throughforloop through and display：

<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 field

Custom fields defined in the "Document Classification" "Other Parameters" in the background can also be accessed throughcategoryDetailFlexible label calling.

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

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

If you want to iterate over all custom fields and display them, you can useExtraField (This is an array that includes all the extra 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 frontend of the website.

Advanced tips and注意事项

  1. DifferentiatecategoryListwithcategoryDetail:categoryDetail主要用于显示单个分类的详细信息，而categoryListIt is used to retrieve and iterate over multiple categories. When designing templates, you should choose appropriate tags according to the needs. For example, use them to display all top-level categories on the homepage.categoryListClick on a category to view its details.categoryDetailGet the details of the current category.

  2. Under a multi-site environmentsiteId: If your Anqi CMS is deployed with multiple sites and needs to call category information across sites, you cancategoryDetailtagssiteId="站点ID"Specify the target site with parameters

  3. The location of the template files: Remember that all template files should be placed in/templatethe directory and use.htmlas a file extension.

By means of the above detailed explanations and examples, I believe you have gained an understanding of the Anq CMS.categoryDetailHow tags display the introduction of categories, Banner images, and other detailed information has been fully understood.Mastering these will help you build websites with more comprehensive functionality and richer content.

Frequently Asked 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 retrievedcategoryImagesAfter the variable, through{% for imageSrc in categoryImages %}Looped through the image URL. In addition, also confirm that the background indeed uploaded images for this category, and that the image path is valid.

Q2: Why is the HTML code written in the category content not parsed and displayed as tag text instead?A2: When you are fromContentWhen retrieving content, if it contains HTML code, it is necessary to use|safeA filter to indicate that the template engine should output content as safe HTML, rather than escaping it. For example:{{ categoryHtmlContent|safe }}. If the content is in Markdown format, you also need to addrender=trueParameters 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), how should I do it?A3: In this case, you need to explicitly tellcategoryDetailTo get information about which category the tag refers to, specify itsidortokenParameters. For example, to display the category description for ID "5", you can use:{% categoryDetail with name="Description" id="5" %}Or if the URL alias of the category is "about-us", you can use: `{% categoryDetail with name