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

As an experienced CMS website operation personnel of an enterprise, I am well aware of the core position of the classification page in the website structure and user experience.A well-designed, informative category page can not only help users quickly find the content they need, but also enhance the overall professionalism of the website through clear hierarchy and attractive visual elements, and 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 Anqi CMS, including their names, descriptions, and associated images.

Enhancing User Experience and SEO: The Way of Information Display on Anqi CMS Category Page

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

Analysis of Anqi CMS Category Page Template Mechanism

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}.htmlThese template files are the basis for building the display logic of the classification page. The template syntax of Anqi CMS is similar to Django, and variables are passed through double curly braces{{变量}}reference, while control logic such as conditional judgment and loop uses single curly braces and percent signs{% 标签 %}Understanding this mechanism is the first step to successfully customizing the category page

Core weapon: Category detail tags(categoryDetail)

To retrieve and display the detailed information of the category page, Anqi CMS providescategoryDetailthe tag. This tag is the entry point for obtaining all related data of the current category. Its basic usage is{% categoryDetail with name="字段名称" %}. In the category page,categoryDetailThe tag will automatically recognize and retrieve the category information of the currently visited category, without the need to specify an ID. Of course, if you need to retrieve information about a non-current category, you can also do so byid="分类ID"ortoken="分类URL别名"Specify parameters precisely.

Accurately present the category name (Title)

The category name is the core identifier of the category page. In the template, you can use thecategoryDetailLabel combinationTitleField to retrieve and display it. Typically, the category name will be used as the main title of the page and the title of the browser tab<h1>）and browser tab title（<title>One of the components, crucial for users to recognize the page theme and SEO ranking.

For example, in your category page template, you can call the category name like this:

<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 a deeper understanding of the background information of the category, helping them understand the scope or characteristics of the content included in the category. In Anqi CMS, you can useDescriptionField to display a brief category summary, this content is often used on pages.<meta name="description">Tags are crucial for SEO.

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

AndContentThe field allows you to provide a more detailed text description for the category page, 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 can addContentto the fieldrender=trueParameter.

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

Visual appeal: Category associated images (Logo,Thumb,Images)

Images are key elements to enhance the visual appeal of a webpage. Anqi CMS provides three main types of images for categorization:Logo/ThumbandImagesThey have different uses.

• 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 in parent category lists or home page recommendation modules to provide a 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 slideshow or gallery effect, displaying multiple highlights under the category.Imagesfield 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 core information mentioned above,categoryDetailTags can also obtain other useful category 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 statistical information.

It is more powerful that, Anqi CMS allows you to define custom fields for category models (configured in the "Content Model" backend). These custom fields can also be accessed throughcategoryDetailLabel retrieval. For example, if you define a category with the namebannerTextThe custom field can be accessed directly{% categoryDetail with name="bannerText" %}to retrieve 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, where you need to design it reasonably according to the website's 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, and the document list under this category (througharchiveListLabel implementation), it may also include related subcategory navigation or custom information.

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

By flexible applicationcategoryDetailThe label and its rich fields allow you to create a comprehensive, visually appealing, and SEO-friendly user experience for the category pages of the Anqi CMS website.

Frequently Asked Questions (FAQ)

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

You can use tocategoryDetailSpecify the tagidortokenParameters to obtain 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 go throughtoken="分类URL别名"specify.

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

WhenDescriptionorContentWhen a field contains HTML content, to prevent the browser from displaying or escaping it as plain text, you need to use|safeFilter. For example,{{ categoryDescription|safe }}or{{ categoryFullContent|safe }}. For Markdown formattedContentField, you should also make sure to addrender=trueParameters to convert Markdown to HTML.

3. How toImagesField to display multiple images, and only show the first one 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 %}a loop. If you only want to display the first image, you can get it aftercategoryImagesAfter the variable, by index[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 %}