In content management, in order to maintain the neatness and loading efficiency of the website pages, we often need to truncate articles, product descriptions, or other long text content to display only part of the summary.However, if the content itself contains HTML tags, simple character truncation often breaks the structure of these tags, leading to chaotic page display and even affecting the layout and functionality of the website.<p>这是一个<b>重要</b>的段落</p>If the content is simply truncated to<p>这是一个<b>重要</b, this will leave an unclosed tag, thereby disrupting the structure of all subsequent HTML.
AnQiCMS is well aware of this pain point and provides a dedicated solution for content processing to ensure that it can intelligently recognize and close tags when truncating HTML text, thereby elegantly presenting the content summary while maintaining the integrity of the page structure.
Understand the challenge of HTML truncation
The traditional text truncation method is usually performed by character or word. When encountering<p>Lorem <b>ipsum</b> dolor</p>such an HTML segment, if the truncation point falls on<p>Loor<b>ipswill result in<b>or<p>
AnQiCMS's intelligent solution: HTML truncation filter
AnQiCMS template engine built-in powerful filters, wheretruncatechars_htmlandtruncatewords_htmlIt is specially designed to handle HTML content.They are not just simply cutting strings, but also intelligently parsing HTML structures, ensuring that all open HTML tags are properly closed while truncating text, thereby avoiding structural damage.
truncatechars_html: This filter allows you to specify a character count, AnQiCMS will try to truncate the content within this character limit and ensure that the truncated HTML tags are closed.truncatewords_html: Similarly, this filter allows you to specify a word count.AnQiCMS will truncate the content within the word count limit and ensure the integrity of the HTML structure.
These filters are the ideal choice for processing rich text content summaries, allowing content operators to worry about manually adjusting HTML tags, just focusing on the length control.
How to elegantly apply these filters in the template
While usingtruncatechars_htmlortruncatewords_htmlWhen filtering, it is important to apply it to variables containing HTML content, and since these filters output processed HTML fragments, it is usually also necessary to|safeThe filter is used to prevent the template engine from escaping HTML content again, causing tags to be displayed as plain text.
Assuming you are displaying article summaries on an article list page, and the summary content (such asarchive.Descriptionorarchive.Content) may contain HTML tags.
Example 1: Truncate HTML content by character count
If you want to truncate the article content to a maximum of 150 characters (including HTML tags, but the actual visible characters will be fewer), and ensure that the HTML structure is complete:
{# 假设 articleContent 变量中包含了文章的富文本内容 #}
{% archiveDetail articleContent with name="Content" %}
<div class="article-summary">
{{ articleContent|truncatechars_html:150|safe }}
<a href="{{ archive.Link }}">阅读更多</a>
</div>
In this example,articleContentwill be truncated, and if the truncation point is within<div>or<strong>the tag, AnQiCMS will automatically add a closing tag todiv.article-summaryensure that the internal HTML is valid.
Example two: Truncate HTML content by word count
If your content is better suited for word truncation, for example, if you want to display the first 30 words:
{# 假设 productDescription 变量中包含了产品的详细描述，可能带有 HTML #}
{% pageDetail productDescription with name="Description" %}
<div class="product-teaser">
{{ productDescription|truncatewords_html:30|safe }}
<a href="{{ page.Link }}">查看详情</a>
</div>
productDescriptionAfter being truncated, it will still ensure the correct closure of HTML tags.
Key reminder:|safeUse of filters
|safe<p>Hello</p>, without adding|safeMay be displayed as<p>Hello</p>. When usingtruncatechars_htmlAfter the filter is processed, we hope to get a parseable HTML, therefore|safeClearly tell the system: "This content is safe HTML, please output directly without escaping."
Summary
provided by AnQiCMStruncatechars_htmlandtruncatewords_htmlFilter, is a powerful assistant for content operators when processing rich text content summaries.They completely solve the problem of structural damage that may occur when truncating HTML text by intelligent recognition and closing HTML tags, greatly enhancing the stability and user experience of content display.|safeUsing it, you can easily achieve a content summary display that is both beautiful and robust.
Frequently Asked Questions (FAQ)
1. If you use a filter at the end of content that includes HTML tagstruncatecharsortruncatewordsFilter, rather than_htmlWhat will happen?
If you incorrectly use a filter on content that contains HTML tagstruncatecharsortruncatewordsSuch a plain text truncation filter, the system will treat it as a normal string for truncation and will not parse or process HTML tags.This is likely to cause the tag to be cut off in the middle, leaving an unclosed tag.<b>重要</b>May be truncated to<b>重.This way, the page structure will be destroyed, causing subsequent HTML elements to display abnormally, style chaos, and even possibly affect the page function._htmlA filter at the end.
2. Why do you need to addtruncatechars_htmlortruncatewords_htmlPlus after the filter,|safeFilter?
The AnQiCMS template engine, for security reasons, defaults to automatically escaping all content from variables output to the page, which will<to<etc. althoughtruncatechars_htmlandtruncatewords_htmlThe filter can generate a structurally complete HTML fragment, but if it is not added|safeThe filter, these generated HTML tags (such as<p>/<div>The character ）is escaped, causing it to be displayed on the page as is<p>Instead of being a real paragraph.|safeThe filter explicitly tells the template engine: This content is processed and safe HTML, please output it as is without escaping, to ensure that the truncated HTML can be rendered correctly on the page.
Can I customize the ellipsis (…) displayed after truncation?
Currently, AnQiCMS built-in thetruncatechars_htmlandtruncatewords_htmlThe filter uses the standard ellipsis “…” to indicate that content has been truncated.In the parameters of the filter itself, there is no direct option to modify or customize this ellipsis character.This is to maintain the consistency and conciseness of display, usually in web design, the ellipsis has already become a widely accepted symbol to represent content truncation.