How to retrieve and display details information of a specific category, including description, content, and Banner image?

When operating a website, we often need to display unique content for different category pages, such as a product category may have detailed descriptions and eye-catching Banner images, while a news category may emphasize concise descriptions.The Auto CMS provides a flexible mechanism that allows us to easily obtain and display detailed information of specific categories, including descriptions, content, and Banner images.

Backend settings are fundamental: enrich the content of categories

Before displaying category details on the front end, we need to fill in this information in the Anqi CMS backend. It's like preparing a 'business card' for your category.

  1. Enter Category Management:Login to the Aiqi CMS backend, navigate to the 'Content Management' menu, and then click 'Document Category'. Here, you can see all the category lists.
  2. Edit or add categories:Select a category that needs to display detailed information, click the "Edit" button to enter its detail page; or, you can also add a new category.
  3. Fill in the key information:
    • Category nameThis is the category title, which will be displayed on the front end.
    • Category IntroductionThis is usually used for Search Engine Optimization (SEO).descriptionTags can also be used as a brief introduction on the page.
    • Category ContentThis is a rich text editor, you can add more detailed category descriptions, images, and text content here.
    • Banner imageIn the "Other ParametersHere you can upload multiple images, which can be used as carousel images or main visual images on the category page.It is recommended to use images of the same size when uploading to maintain aesthetics.
    • ThumbnailSimilarly, in the "Other Parameters", you can upload a category thumbnail, which is used to display in lists or other places where small images are needed.

Ensure that this content is filled in and saved properly so that the front-end template can correctly call and display it.

Core tags:categoryDetailuses

Safe CMS provides a namedcategoryDetailThe template tag, which is a powerful tool for obtaining category details. This tag can help us get information about the current category page being accessed, or about various information of a category with a specified ID.

Get the details of the category of the current page

When your visitor is browsing a category page, such as the "Product DisplaycategoryDetailThe label will intelligently identify the category of the current page, and we do not need to specify any ID, directly throughnameparameters to obtain the corresponding field.

For example, to display the title of the current category:

{% categoryDetail with name="Title" %}

Get details of a specified category

Sometimes, you may need to specify on a non-category page, or want to display information of multiple categories on a single page, in which case you need to make it clear thatcategoryDetailThe label needs to get which category's data. We can specify it throughidortokenthe (category URL alias) parameter.

For example, if you know the ID of a category is10, and you want to get its title:

{% categoryDetail with name="Title" id="10" %}

or, if the category URL alias isabout-us:

{% categoryDetail with name="Title" token="about-us" %}

display the description and content of the category

HencecategoryDetailtags, displaying the description and content becomes very direct.

display the category description (Description)

The description of the category is usually plain text, which can be output directly:

<p>分类描述：{% categoryDetail with name="Description" %}</p>

If you want to assign the description content to a variable for subsequent processing, you can do it like this:

{% set categoryDescription = categoryDetail with name="Description" %}
<p>{{ categoryDescription }}</p>

Display the content of the category (Content)

The category content usually includes HTML code generated by a rich text editor, in order for the browser to correctly parse and render these HTML, we need to use|safeFilter. If the content is in Markdown format, we can also choose to userender=trueparameters to let the system convert it to HTML.

<div class="category-content">
    {% set categoryContent = categoryDetail with name="Content" %}
    {{ categoryContent|safe }}
</div>

If the background content is in Markdown format and you want the system to automatically render it as HTML:

<div class="category-content">
    {% set categoryContent = categoryDetail with name="Content" render=true %}
    {{ categoryContent|safe }}
</div>

Display the Banner image and thumbnail of the category

The visual elements of categories are crucial for enhancing the aesthetics and information conveyance of the page.

Display category banner image (Images)

The Banner images for categories are usually supported to upload multiple images in the background.categoryDetailtags to getImagesWhen the field is specified, it will return an array of image URLs. We can iterate through this array to display all the Banner images, or take the first one as the main Banner.

Traverse all Banner images:

<div class="category-banners">
    {% categoryDetail categoryImages with name="Images" %}
    {% for imageUrl in categoryImages %}
        <img src="{{ imageUrl }}" alt="分类Banner图">
    {% endfor %}
</div>

Only display the first Banner image:If you only want to display the first Banner image and need to judge if it exists, you can do it like this:

{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
    <img src="{{ categoryImages[0] }}" alt="分类主Banner图">
    {# 也可以把它作为背景图 #}
    <div class="hero-banner" style="background-image: url('{{ categoryImages[0] }}');">
        <!-- 页面其他内容 -->
    </div>
{% endif %}

Display category thumbnails (LogoorThumb)

Category thumbnails are typically used in lists or other small-sized display scenarios.LogoGenerally refers to large-sized thumbnails,Thumbreferring to the thumbnails that have been processed by the system and are smaller in size.

<div class="category-thumbnail">
    <img src="{% categoryDetail with name="Thumb" %}" alt="分类缩略图">
</div>
<div class="category-logo">
    <img src="{% categoryDetail with name="Logo" %}" alt="分类大图">
</div>

Comprehensive Practice: Build a Category Detail Page

Now, let's combine these tags to create a typical category detail page layout:

<meta charset="UTF-8">
{# 获取分类标题，并附加网站名称 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 获取分类描述作为页面Meta Description #}
<meta name="description" content="{% categoryDetail with name="Description" %}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">


<header>
    {# 头部导航等通用元素 #}
</header>

<main class="container">
    <nav class="breadcrumb">
        {% breadcrumb crumbs with index="首页" %}
        <ul>
            {% for item in crumbs %}
                <li><a href="{{item.Link}}">{{item.Name}}</a></li>
            {% endfor %}
        </ul>
        {% endbreadcrumb %}
    </nav>

    <section class="category-header">
        {# 显示分类标题 #}
        <h1>{% categoryDetail with name="Title" %}</h1>

        {# 显示分类Banner图（取第一张作为主图） #}
        {% categoryDetail categoryBanners with name="Images" %}
        {% if categoryBanners %}
        <div class="main-banner">
            <img src="{{ categoryBanners[0] }}" alt="{% categoryDetail with name="Title" %} Banner">
        </div>
        {% endif %}

        {# 显示分类描述 #}
        {% set categoryDescription = categoryDetail with name="Description" %}
        {% if categoryDescription %}
        <p class="category-intro">{{ categoryDescription }}</p>
        {% endif %}
    </section>

    <section class="category-full-content">
        {# 显示分类详细内容 #}
        {% set categoryFullContent = categoryDetail with name="Content" render=true %} {# 假设后台内容可能是Markdown #}
        {% if categoryFullContent %}
        <div class="rich-text-content">
            {{ categoryFullContent|safe }}
        </div>
        {% endif %}
    </section>

    <section class="category-products-list">
        <h2>{% categoryDetail with name="Title" %} 下的文章/产品</h2>
        {# 在这里可以调用 archiveList