In Anqi CMS, the description (Description) and content (Content) are key elements for website content organization and search engine optimization (SEO).Effectively display this information on the front page, which not only provides visitors with clear navigation and in-depth information, but also helps search engines better understand the theme of the page, thereby enhancing the visibility of the website.Let's discuss how to flexibly display the description and content of categories in the Anqi CMS front-end template.

Understand the value of classification description and content

In the Anqi CMS backend, we can set 'classification introduction' and 'classification content' for each category.

  • Category Introduction (Description): It is usually a brief text used to summarize the theme of the category.It plays an important role in SEO, often used as the Meta Description of a page, and also displayed as a category summary on list pages.A concise and attractive description can effectively increase click-through rate.
  • Category Content (Content): It can include more detailed text, images, videos, and other multimedia information to provide an in-depth introduction to the themes contained in the category.This is crucial for users to deeply understand a field or product series, and it can also provide rich text content for the page, enhancing SEO effects.

This information is edited and managed in the background under 'Content Management' -> 'Document Category'.

II. Display the description (Description) on the category list page.

When we need to list multiple categories on a page and display their brief descriptions, we can usecategoryListThe label is often used on the homepage or category page to display the sub-categories or specific model categories under the current page.

For example, to display all article category titles and descriptions on the homepage, you can use the following code in the template:

{% categoryList categories with moduleId="1" parentId="0" %}
    <div class="category-list-wrapper">
        {% for item in categories %}
            <div class="category-item">
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                {# 直接通过 item.Description 获取分类简介 #}
                <p class="category-description">{{ item.Description }}</p>
                <a href="{{ item.Link }}" class="read-more">查看更多</a>
            </div>
        {% endfor %}
    </div>
{% endcategoryList %}

In this code block,itemThe variable representscategoryListEach category object in the loop. By using{{ item.Description }}You can directly access and display the introduction information of the category. Usually, on the list page, we only display a brief description to avoid long content affecting the page layout and loading speed.

Three, display description (Description) and content (Content) on the category detail page

When a visitor clicks on a category to enter its detail page, we usually need to display the complete information of the category, including its description and detailed content. At this time,categoryDetailThe label comes into play. This label is specifically used to obtain the detailed classification data of the current page.

1. Display classification description (Description)

Category descriptions are often used at the top or key positions on the page, emphasizing the core information of the category again:

<div class="category-header">
    <h1>{% categoryDetail with name="Title" %}</h1>
    <p class="category-page-description">
        {# 通过 categoryDetail 标签获取当前分类的描述 #}
        {% categoryDetail with name="Description" %}
    </p>
</div>

here,{% categoryDetail with name="Description" %}It will directly output the introduction of the current category.

2. Display Category Content (Content)

The category content is the most detailed information provided to visitors.The AnQi CMS supports rich text editing for categorized content and may also contain HTML code or Markdown format.Therefore, special attention needs to be paid to the parsing and rendering of the content when displayed on the front end.

  • Process HTML Content: If the category content is edited by a rich text editor in HTML, in order to ensure that the HTML tags are rendered correctly rather than displayed as plain text, we need to use|safefilter.

    <div class="category-main-content">
    {# 使用 categoryDetail 获取分类内容，并通过 |safe 过滤器确保HTML正确渲染 #}
    {% categoryDetail categoryFullContent with name="Content" %}
    {{ categoryFullContent|safe }}
</div>

    Here, we first assign the classified content tocategoryFullContentthe variable, and then use{{ categoryFullContent|safe }}to safely output HTML content.

  • to process Markdown contentIf your AnQi CMS backend has enabled the Markdown editor and the category content is written in Markdown format, it needs to be converted to HTML before being displayed on the front end. AnQi CMS provides two methods:

    • Specify in the tagrender=true:
      
<div class="category-main-content">
    {# 指定 render=true 让安企CMS自动将Markdown内容转换为HTML #}
    {% categoryDetail categoryMarkdownContent with name="Content" render=true %}
    {{ categoryMarkdownContent|safe }}
</div>
    • Use|renderFilterIf you wish to manually control the Markdown conversion in the template, or if the content source is uncertain whether it is Markdown, you can use|renderfilter.
      
<div class="category-main-content">
    {# 使用 |render 过滤器将内容转换为HTML，再用 |safe 输出 #}
    {% categoryDetail categoryContent with name="Content" %}
    {{ categoryContent|render|safe }}
</div>
      Choose the method based on your specific needs and content management habits, but the core is to ensure that the content can be correctly parsed and displayed.

Section 4: Custom display of classification fields

The strength of AnQi CMS lies in its flexible content model.If your category model defines additional custom fields (such as "Category Features

For example, if you define a custom field named 'Category Features' in a classification model, you can access it like this:

<div class="category-features">
    <h4>分类特色</h4>
    <p>{% categoryDetail with name="分类特色" %}</p>
</div>

Or, if you want to iterate through all custom fields:

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

This method is particularly suitable for those with many custom fields or uncertain specific field names.

Five, Optimization of SEO: The application of TDK tags.

A category description (Description) is an important use as the page's Meta Description, which has a direct impact on search engine rankings and user click decisions. Anqi CMS providestdkTag to manage the page TDK (Title,