How to display the detailed information (name, description, image) of a category on the category page?

As an experienced CMS website operation personnel in the security industry, I am well aware of the core position of the category page in the website structure and user experience.An well-designed, informative category page can not only help users find the content they need quickly, but also enhance the overall professionalism of the website through clear hierarchy and attractive visual elements, which is also crucial for Search Engine Optimization (SEO).Today, I will elaborate on how to effectively configure and display the detailed information of category pages in the Anqi CMS, including their names, descriptions, and associated images.

Enhance User Experience and SEO: The Way of Information Display on Classification Pages of Anqi CMS

In the Anqi CMS, the category page is the core hub of website content organization. It not only carries the responsibility of guiding users to browse, but also is the key to transmitting the website structure and content theme to search engines.Effectively display the name, description, and related images of the category page, which can greatly enrich the information volume of the page, enhance user stay time, and optimize SEO performance.Auto CMS provides flexible template tags, allowing us to easily implement these customized requirements.

Analysis of the Classification Page Template Mechanism of Anqi CMS

The template design of AnQi CMS follows intuitive and flexible principles. For category pages, the system usually uses specific path files located under the root directory of the template, such as{模型table}/list.htmlor more targeted{模型table}/list-{分类ID}.html. These template files are the foundation for building the logic of your classification page display. The template syntax of Anqi CMS is similar to Django, variables are passed through double curly braces{{变量}}Reference, while control logic such as conditional judgment and loop is implemented using single curly braces and percent signs{% 标签 %}Understanding this mechanism is the first step to successfully customizing the category page

Core Tool: Category Details Tag (categoryDetail)

To retrieve and display the detailed information of the category page, Safe CMS providescategoryDetailtags. This tag is your entry point to obtain all related data for the current category. Its basic usage is{% categoryDetail with name="字段名称" %}In the category page,categoryDetailThe label will automatically identify and retrieve the current category information being accessed, without the need to specify an ID. Of course, if you need to retrieve information from a non-current category, you can also do so throughid="分类ID"ortoken="分类URL别名"Parameter is specified accurately.

Accurately present the category name (Title)

The category name is the core identifier of the category page. In the template, you can usecategoryDetailTag combinationTitleField to get and display it. Typically, the category name is used as the main title of the page (<h1>) and the title of the browser tab (<title>）的一部分，对用户识别页面主题和SEO排名都至关重要。

例如，在您的分类页面模板中，您可以这样调用分类名称：

<h1 class="category-title">{% categoryDetail with name="Title" %}</h1>

If you want to assign it to a variable for reuse in other parts of the template, you can do it like this:

{% categoryDetail currentCategoryTitle with name="Title" %}
<h1 class="category-title">{{ currentCategoryTitle }}</h1>

Rich information: display category description (DescriptionandContent)

The category description can provide users with deeper background information about the category, helping them understand the content scope or characteristics included in the category. In AnQi CMS, you can utilizeDescriptionField to display a brief category summary, this content is often used on the page<meta name="description">Tags, crucial for SEO.

<p class="category-description">{% categoryDetail with name="Description" %}</p>

whileContentThe field allows you to provide more detailed text descriptions for category pages, even including rich text content. If your category content is edited using a Markdown editor and contains HTML tags, to ensure that the content is rendered correctly, you need to use|safeFilter. Moreover, to ensure that Markdown content is correctly parsed as HTML, you canContentfield addrender=trueParameter.

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

Visual Attraction: Associated images of categories (Logo,Thumb,Images)

Images are key elements to enhance the visual appeal of a page. Anqi CMS provides three main image types for categories:Logo/ThumbandImagesThey serve different purposes.

  • Logo(Category Large Image/Banner Image):Generally used at the top of the category page, as an eye-catching visual focus.

    <div class="category-banner">
    <img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
</div>

  • Thumb(Category Thumbnail):A smaller size image, often used to display in parent category lists or home page recommendation modules for quick preview.

    <img class="category-thumbnail" src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />

  • Images(Category Carousel/Group):Allow multiple images to be uploaded for a category, usually used to create a carousel or gallery effect, showcasing multiple highlights under the category.ImagesA field returns an array of image URLs, you need to useforLoop to traverse and display them.

    <div class="category-gallery">
    {% categoryDetail categoryImages with name="Images" %}
    {% for image in categoryImages %}
        <img src="{{ image }}" alt="{% categoryDetail with name="Title" %}" />
    {% endfor %}
</div>

    If you only want to displayImagesThe first image in it, you can handle it like this:

    {% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
    <img src="{{ categoryImages[0] }}" alt="{% categoryDetail with name="Title" %}" />
{% endif %}

Integrate other metadata with custom fields

In addition to the above core information,categoryDetailThe label can also retrieve other useful metadata, such asLink(category link),ParentId(Parent Category ID) andArchiveCount(the number of documents in this category). These fields are very useful when building breadcrumb navigation, hierarchical lists, or statistics.

It is more powerful that, Anqi CMS allows you to define custom fields for category models (configured in the "Content Model" in the background). These custom fields can also becategoryDetailLabel acquisition. For example, if you define a category namedbannerTextyou can directly display its value through{% categoryDetail with name="bannerText" %}to get its value. If you want to iterate over all custom fields, you can getExtraField, it will return a list containing all custom field names and values for you to loop through:

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

Practical suggestions and summary

Integrate this information into a category page, you need to reasonably layout according to the website design and user needs. A typical category page may include a top Banner image, followed by the category name and a brief description, then the detailed category content, as well as the document list (througharchiveListLabel implementation), finally it may be related subcategory navigation or custom information.

Remember, the classification management backend of AnQi CMS allows you to set independent SEO titles, keywords, and descriptions for each category. ThroughtdkLabel, make sure these settings are rendered correctly on the page<head>Section, further optimize the search engine visibility of the category page.

By using flexibilitycategoryDetailTags and their rich fields, you will be able to create a comprehensive, visually appealing and SEO-friendly user experience for the classification page of the Anqi CMS website.

Common Questions and Answers (FAQ)

1. How can I get and display the details of other categories (not the current category) on the category page?

You can by settingcategoryDetaila tag specificationidortokenParameters to retrieve information for a specific category. For example, if you want to display the category name with ID 5 on a category page, you can use{% categoryDetail with name="Title" id="5" %}. Similarly, you can also usetoken="分类URL别名"Specify it.

2. How can I ensure that HTML tags I use in category descriptions or content are rendered correctly on the page rather than being displayed as plain text?

WhenDescriptionorContentField contains HTML content, in order to avoid the browser displaying it as plain text or escaping it, you need to use|safea filter. For example,{{ categoryDescription|safe }}or{{ categoryFullContent|safe }}. For Markdown formattedContentField, you should also ensure that it is addedrender=trueParameters to convert Markdown to HTML.

3. How toImagesField displays multiple images, and only the first one is shown as the category cover?

ImagesThe field returns an array of image URLs. To display all images, you can use{% for image in categoryImages %}<img src="{{ image }}" />{% endfor %}to iterate. If you only want to display the first image, you can getcategoryImagesAfter the variable[0]to access the first element of the array, and it is best to check if the array exists first to avoid errors:

{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %} {# 检查是否存在图片数组 #}
    <img src="{{ categoryImages[0] }}" alt="分类封面" />
{% endif %}