In 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 concise introductions of categories rather than complete long descriptions.This article will introduce how to obtain the specified ID category description in Anqi CMS template, and perform appropriate truncation processing to ensure that the content is both concise and beautiful.
Obtain the category description of a specified ID
In the AnQi CMS template, getting category details mainly relies oncategoryDetailthe tag. This tag can help us accurately extract various information of a category.
To get the description of the category, you need to pay attention tonamethe parameter and set it toDescription. If you want to get the description of a specific ID category, such as the category with ID 1, you can do so byidparameter.
For convenience of subsequent operations, we usually assign the obtained content to a temporary variable. For example, the following code demonstrates how to obtain the category description with ID 1 and store it inmyCategoryDescriptionvariables:
{# 假设要获取ID为1的分类描述 #}
{% categoryDetail myCategoryDescription with name="Description" id="1" %}
{# 此时,你可以通过 {{ myCategoryDescription }} 来使用这个描述内容 #}
<p>{{ myCategoryDescription }}</p>
It is worth mentioning that if you are on a category page (such as visiting the category details page) and you want to get the description of the current category, thenidThe parameter can be omitted. In this case,categoryDetailThe tag will intelligently recognize the context, automatically obtaining information about the current category:
{# 在分类详情页,获取当前分类的描述 #}
{% categoryDetail currentCategoryDescription with name="Description" %}
<p>{{ currentCategoryDescription }}</p>
Truncate the category description
Categories often contain rich descriptions, and if presented in full within the limited space of a page, it may cause layout chaos or affect user experience.Therefore, it is particularly important to truncate the description content.The Anqi CMS provides powerful filter functions that can easily truncate text.
Truncate by character count:
truncatecharsIf you want to truncate the description to a fixed number of characters, you can usetruncatecharsa filter. It will automatically add "..." at the end when reaching the specified character count.{# 截断为50个字符 #} <p>{{ myCategoryDescription|truncatechars:50 }}</p>Truncate by word count:
truncatewordsTo avoid truncating words and making the text incoherent, you can choose to usetruncatewordsa filter that truncates by word count and adds “…” at the end.{# 截断为10个单词 #} <p>{{ myCategoryDescription|truncatewords:10 }}</p>Handle descriptions that contain HTML content:
truncatechars_htmlandtruncatewords_htmlWhen editing category descriptions in the background, they may contain bold, links, lists, and other HTML tags. Use them directly.truncatecharsortruncatewordsIt may destroy the HTML structure, causing the page to display abnormally. Anqi CMS provides a special filter to handle this situation:truncatechars_htmlandtruncatewords_html. They will intelligently parse HTML tags when truncated, trying to preserve their integrity.At the same time, when outputting variables that may contain HTML content, in order to ensure that the browser can correctly parse these HTML tags instead of 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
Assume we want to display the introduction of the "News Center" category with ID 5 in a module on the homepage.This introduction may be very 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>
By this example, we can see that combiningcategoryDetailThe tag and text processing filter 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 enhances the professionalism and user experience of the website content.
Frequently Asked Questions (FAQ)
Ask: Will truncating a category description containing HTML tags cause the page structure to be confused?Answer: If the category description contains HTML tags and is used directly
truncatecharsortruncatewordsTruncation may indeed destroy the HTML structure, thereby affecting the page layout. To avoid this situation, 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, it is necessary to cooperatesafewith filters to ensure that the HTML content is parsed correctly.Ask: Do I need to specify the category ID to get the description of the current page category?Answer: No need. When you are visiting a category page (such as a category details page or a category list page),
categoryDetailThe label will intelligently recognize the context of the current category. At this point, you can omitidthe parameter, the label will automatically obtain the description of the current category. For example:{% categoryDetail currentCategoryDesc with name="Description" %}.Ask: Besides truncation, are there any other methods to handle long category descriptions, such as removing all HTML tags?Of course there is. 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 }}