In website operation, clear and detailed categorization descriptions are crucial for user experience and search engine optimization.AnQiCMS as a powerful content management system provides a flexible way to manage and display these category information.This article will delve into how to obtain and effectively display detailed descriptions of categories on the frontend of AnQiCMS.
Understand the classification description information in AnQiCMS
In AnQiCMS, the description information of categories is usually managed through two main fields:Category introductionandCategory content. Understanding their differences and uses can help us better organize website content.
- Category Overview (Description field)This field is mainly used to provide a brief overview of the classification.It is usually used by search engines to generate search result snippets (meta description), and may also be displayed as a category summary on website list pages.Therefore, the category introduction should be concise, accurate, and include core keywords to facilitate SEO optimization.
- Category Content (Content Field): Unlike the category overview, the category content aims to provide richer and more detailed classification information.This field supports rich text editing, you can insert images, links, formatting styles, etc., to present a rich content category introduction page to users.For example, a "product type" category can provide a detailed introduction of the characteristics, application scenarios, and advantages of the products of this type.
- Custom field: Besides these two built-in fields, AnQiCMS also supports adding custom fields to the content model.If your category requires some specific, structured description information (such as 'Feature Attributes', 'Recommendation Index', etc.), you can create custom fields to store this data and call it flexibly on the front-end.
How to get the category description information
To obtain and display the category description information in the AnQiCMS template, we mainly rely on the powerfulcategoryDetailLabel. This label helps us obtain various detailed data for the current page or specified category.
UsecategoryDetailThe basic syntax of tags is:{% categoryDetail 变量名称 with name="字段名称" %}. Among them,变量名称Optional, if set, you can store the data retrieved in a variable for later processing; if omitted, the label will output the value of the field directly.nameThe parameter specifies the specific field you want to retrieve.
Get the category description (Description)
To get the category description, you can usename="Description"parameters:
{# 默认用法，自动获取当前页面的分类简介 #}
<p>分类简介：{% categoryDetail with name="Description" %}</p>
{# 将分类简介存储到变量中再输出 #}
{% categoryDetail categoryDescription with name="Description" %}
<p>分类简介：{{categoryDescription}}</p>
This code will directly display the brief description of the current category on the page.
Get category content (Content)
For the 'Category Content' field that needs to display detailed information, you can usename="Content"parameters:
{# 默认用法，自动获取当前页面的分类内容 #}
<div>分类内容：{% categoryDetail with name="Content" %}</div>
{# 将分类内容存储到变量中再输出 #}
{% categoryDetail categoryContent with name="Content" %}
<div>分类内容：{{categoryContent}}</div>
It should be noted that since the classification content usually contains HTML tags (such as paragraphs, images, links, etc.), in order to allow the browser to correctly parse and display these formats, you need to use in combination|safeFilter. Also, if your category content supports Markdown editing, you can addrender=trueparameters to render correctly as HTML on the front end:
{# 安全地输出分类内容，并渲染Markdown格式 #}
{% categoryDetail categoryContent with name="Content" render=true %}
<div class="category-detail-content">
{{categoryContent|safe}}
</div>
This ensures that the rich text content of the category is displayed in the expected manner on the page.
Get the description information of the specified category.
Sometimes, you may need to obtain the description information of other categories outside the current page. This can be achieved byidparameter to specify the ID of the target category:
{# 获取ID为10的分类的标题和描述 #}
{% categoryDetail targetCategoryTitle with name="Title" id="10" %}
{% categoryDetail targetCategoryDescription with name="Description" id="10" %}
<h3>{{targetCategoryTitle}}</h3>
<p>{{targetCategoryDescription}}</p>
Actual application scenarios and code examples
In a typical category detail page, you may want to combine the category title, introduction, and detailed content to display. Here is a code snippet that integrates these elements.
<main class="category-page-wrapper">
<header class="category-header">
{# 显示分类标题 #}
<h1>{% categoryDetail with name="Title" %}</h1>
{# 显示分类简介，通常放在标题下方或页面顶部 #}
{% categoryDetail categoryIntro with name="Description" %}
{% if categoryIntro %}
<p class="category-intro">{{categoryIntro}}</p>
{% endif %}
</header>
<section class="category-main-content">
{# 显示分类详细内容，通常是页面的主体部分 #}
{% categoryDetail categoryFullContent with name="Content" render=true %}
{% if categoryFullContent %}
<div class="rich-text-description">
{{categoryFullContent|safe}}
</div>
{% else %}
<p>该分类暂无详细内容。</p>
{% endif %}
{# 示例：展示分类的Banner图片，如果存在的话 #}
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
<div class="category-banner-slider">
{% for img in categoryImages %}
<img src="{{img}}" alt="{% categoryDetail with name="Title" %} Banner" />
{% endfor %}
</div>
{% endif %}
</section>
{# 您还可以在这里显示该分类下的文档列表等 #}
<section class="category-archive-list">
<h2>{{categoryTitle}} 相关文档</h2>
{% archiveList archives with type="page" categoryId=category.Id limit="10" %}
{% for item in archives %}
<div class="archive-item">
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
</section>
</main>
This code first displays the category title and introduction, followed by detailed category content, and finally considers the possible Banner images and the document list under the category.In this way, you can provide users with a well-structured and informative classification page.
Prompt with **practice
- Keep it concise, comprehensive in contentTake full advantage of the SEO value of the 'category introduction', using concise text to attract users and search engines. Place all detailed, illustrated introductions in the 'category content'.
- Rich text and Markdown rendering: If your category content is written using a rich text editor or Markdown, please make sure to add it to the template.
render=trueparameters, and use|safeFilter to ensure that the content can be displayed correctly in HTML format and style. - Test and optimizeBefore deploying to the production environment, be sure to test the display effect of the category page on different devices and browsers. Pay attention to the layout of the content, the loading speed of images, and the responsive layout.
- Consider multilingualismIf your website supports multilingual, make sure each language version of the category has the corresponding description information, and call and display it through the AnQiCMS multilingual function.
By using the above method, you can easily obtain and display the detailed description information of the category in AnQiCMS, thereby enhancing the professionalism and user experience of the website content.
Frequently Asked Questions (FAQ)
1. What is the main difference between Category Description and Category Content? How should I choose to use them?
Category description is a concise text field, mainly used for search engine optimization (as meta description) and to display in the category list page summary. It is recommended to keep it within 100-150 characters and include key keywords.A category content is a rich text field, used to display more detailed and richer text and image introductions on the category detail page, you can freely arrange, insert images and links.If you want to provide comprehensive information on the category page, these two fields should be used together. The summary is used for external abstract and SEO, and the content is used for internal detailed display.
2. Why does my category content display on the front end without parsing HTML tags and instead shows the source code directly?
This is usually because you have not used the category content field in the template|safeFilter.AnQiCMS for security reasons, it defaults to HTML escaping all output content to prevent XSS attacks.Contentwhen adding the field|safeFilter, for example{{categoryContent|safe}}. If the content is in Markdown format, you should also addrender=true.
3. Can I get the description information of other categories on a category page, such as the introduction of sibling categories or subcategories?
Of course you can.categoryDetailTags support throughidortokenSpecify the category of information to be obtained. For example, if you want to get the introduction of the category with ID 10, you can use{% categoryDetail otherCategoryDesc with name="Description" id="10" %}{{otherCategoryDesc}}Similarly, bycategoryListWhen looping through child or sibling categories, you can also pass through them within the loopitem.Descriptionoritem.Contentto get their description information.