In the AnQi CMS template, effectively managing and displaying category descriptions is a common requirement.Especially when displaying on list pages or blocks, we often need to show a concise introduction of the category, rather than a complete long description.This article will detail how to obtain the category description with a specified ID in the Anqi CMS template, and properly truncate it to ensure the content is both concise and aesthetically pleasing.
Get the category description with a specific ID
In the Anqi CMS template, obtaining category details mainly depends oncategoryDetailtags. This tag helps us accurately extract various information of a specific category.
To get the description content of the category, you need to pay attention tonamethe parameter, and set it toDescription. If you want to get the description of a specific category ID, such as the category with ID 1, you can get it byidParameters can be specified.
To facilitate subsequent operations, we usually assign the obtained content to a temporary variable. For example, the following code demonstrates how to retrieve the category description with ID 1 and store it inmyCategoryDescriptiona variable:
{# 假设要获取ID为1的分类描述 #}
{% categoryDetail myCategoryDescription with name="Description" id="1" %}
{# 此时,你可以通过 {{ myCategoryDescription }} 来使用这个描述内容 #}
<p>{{ myCategoryDescription }}</p>
It is worth mentioning that if you are on a page of a certain category (such as visiting the category details page), and you want to get the description of the current category, thenidParameters can be omitted. In this case,categoryDetailTags will intelligently recognize the context and automatically retrieve the information of the current category:
{# 在分类详情页,获取当前分类的描述 #}
{% categoryDetail currentCategoryDescription with name="Description" %}
<p>{{ currentCategoryDescription }}</p>
Truncate the classification description
Category descriptions are often rich in content. If they are displayed fully within the limited page space, it may cause layout chaos or affect user experience.Therefore, truncating the description content is particularly important.The AnQi CMS provides powerful filter functions that can easily achieve text truncation.
Truncate by character count:
truncatecharsIf you want to truncate the description at a fixed character count, you can usetruncatecharsa filter. It will automatically add “…” at the end after reaching the specified character count.{# 截断为50个字符 #} <p>{{ myCategoryDescription|truncatechars:50 }}</p>Truncate by word count:
truncatewordsTo avoid truncating words and making the text awkward, you can choose to usetruncatewordsa filter that truncates by word count and adds “…” at the end.{# 截断为10个单词 #} <p>{{ myCategoryDescription|truncatewords:10 }}</p>Process descriptions containing HTML content:
truncatechars_htmlandtruncatewords_htmlCategory descriptions may contain bold, links, lists, and other HTML tags when edited in the background. Use directly:truncatecharsortruncatewordsMay disrupt the HTML structure, causing the page to display abnormally. Anqi CMS provides a special filter to handle this situation:truncatechars_htmlandtruncatewords_htmlThey intelligently parse HTML tags when truncated, trying to preserve their integrity as much as possible.Also, when outputting variables that may contain HTML content, in order to ensure that the browser can correctly parse these HTML tags rather than displaying them as plain text, you need to use in conjunction with
safeFilter.safeThe filter tells the template engine that this content is safe and does not need to be escaped by default HTML entities.{# 截断为100个字符,并安全输出HTML内容 #} <p>{{ myCategoryDescription|truncatechars_html:100|safe }}</p> {# 截断为20个单词,并安全输出HTML内容 #} <p>{{ myCategoryDescription|truncatewords_html:20|safe }}</p>
Comprehensive practical example
Assuming we want to display the summary of the 'News Center' category with ID 5 in a module on the homepage.This introduction may be long and may also contain some formatted content.We hope to truncate the first 80 characters and display a 'Learn more' link.
<div class="news-center-section">
<h3>新闻中心</h3>
{# 步骤1:获取ID为5的分类描述内容 #}
{% categoryDetail newsDescription with name="Description" id="5" %}
{# 步骤2:获取ID为5的分类链接,用于“了解更多”按钮 #}
{% categoryDetail newsLink with name="Link" id="5" %}
<div class="news-intro">
{# 步骤3:对描述内容进行字符截断(保留HTML),并安全输出 #}
<p>
{{ newsDescription|truncatechars_html:80|safe }}
{# 步骤4:判断描述是否被截断,如果是则显示“了解更多”链接 #}
{% if newsDescription|length > 80 %}
<a href="{{ newsLink }}" class="read-more">...了解更多</a>
{% endif %}
</p>
</div>
</div>
Through this example, we can see, combinedcategoryDetailTags and text processing filters, which can be very flexible in displaying and controlling the presentation of category descriptions in templates.This not only helps optimize the page layout, but also improves the professionalism and user experience of the website content.
Common Questions (FAQ)
Ask: When truncating the category description containing HTML tags, will it cause the page structure to be chaotic?Answer: If the category description contains HTML tags and is used directly
truncatecharsortruncatewordsTruncating may indeed disrupt the HTML structure, which in turn can affect the page layout. To avoid this, it is strongly recommended to use a dedicated filter for handling HTML content, such astruncatechars_htmlortruncatewords_htmlThey parse HTML tags intelligently when truncated, trying to preserve their integrity. At the same time, be sure to cooperatesafewith filters to ensure that HTML content is parsed correctly.Question: Do I need to specify the category ID to get the description of the current page category?Answer: No. When you are visiting a category page (such as category details page or category list page),
categoryDetailLabels will intelligently identify the context of the current category. At this time, you can omitidparameters, labels will automatically obtain the description of the current category. For example:{% categoryDetail currentCategoryDesc with name="Description" %}.Question: Are there any other methods to handle overly long category descriptions besides truncation, such as removing all HTML tags?Answer: Of course. If you want to remove all HTML tags from the category description and keep only plain text content, you can use
striptagsFilter. For example: `{{ myCategoryDescription|striptags|truncatechars:100 }}`