In website operation, we often need to summarize long content for display to attract users to click and view the details. However, directly truncating rich text content containing HTML tags often leads to page structure disorder, for example, a<p><b>重要的信息</p>Truncated into<p><b>重要的Such incomplete tags not only destroy the visual aesthetics of the page, but may also lead to the disarray of the entire page layout. This is undoubtedly one of the most headache-inducing problems for content operators.
The Anqi CMS understands this pain point and provides an extremely practical solution -truncatewords_htmlFilter. This filter is designed to address how to correctly handle nested HTML tags during the truncation of rich text content to prevent page structure chaos.
truncatewords_htmlSmart truncation, maintaining HTML integrity
Different from filters that simply truncate by characters or word count,truncatewords_htmlThe filter intelligently 'understands' the HTML structure when performing truncation operations.The core advantage lies in its ability to automatically complete all unclosed HTML tags even if the content is truncated in the middle of a tag.<b>/<i>/<a>Or<strong>including any nested tags,truncatewords_htmlEnsure that the truncated code remains a complete and valid HTML snippet, thereby avoiding page structure confusion caused by unclosed tags.
This filter truncates content at 'word' units, making the truncated content more readable and natural, avoiding the awkwardness of the text being cut off abruptly.
How to usetruncatewords_htmlFilter
In the templates of Anqi CMS, usetruncatewords_htmlThe filter is very intuitive. You need to pass the variable to be processed through the pipe symbol.|Pass to the filter and specify the number of words you want to truncate. Additionally, to ensure that the browser can correctly parse and render the safely truncated HTML code, we also need to use in conjunction with|safeFilter.
The basic syntax is as follows:
{{ 变量|truncatewords_html:截断字数|safe }}
For example, suppose we have a complex article content stored inarticle_contenta variable:
{% set article_content = '<p>这是一段非常重要的<b>网站运营</b>经验，<i>值得所有人</i>学习和借鉴。里面包含了大量关于<a href="#">AnQiCMS</a>的功能介绍。</p>' %}
<div class="summary">
{{ article_content|truncatewords_html:15|safe }}
</div>
In the above example, even if the content is<a href="#">AnQiCMS</a>truncated in the middle of a tagtruncatewords_htmlit will still be smartly closed<p>and<a>Tags, ensure that the output HTML code is complete. The actual output may look like this (the specific truncation position depends on the number of words):
<div class="summary">
<p>这是一段非常重要的<b>网站运营</b>经验，<i>值得所有人</i>学习和借鉴。里面包含了大量关于<a href="#">AnQiCMS</a>...</p>
</div>
As you can see,truncatewords_htmlThe filter not only truncates the content but also ensures that all tags are properly closed, even if the original content has multiple nested layers.This is crucial for maintaining the correct rendering of the page and avoiding various front-end issues caused by HTML structure errors.
[en] Application scenarios
truncatewords_htmlThe filter is widely used in content management systems.No matter whether it's displaying article abstracts on article list pages, presenting product briefs on product list pages, or in any scenario where a concise display of rich text content is required, it plays a key role.By using this filter, we can safely truncate formatted content that has been edited without worrying about the page layout being affected.
Other than those truncated by words,truncatewords_htmlThe [en] version is: The [en] version is: , the [en] CMS also provides character truncation.truncatechars_htmlA filter with a similar working principle, but the unit of truncation is changed to characters. According to your specific needs, you can choose a more suitable filter to handle the content.
In short,truncatewords_htmlThe filter is a powerful and thoughtful feature provided by Anqi CMS for content operation, which greatly simplifies the generation process of rich text abstracts and helps us manage and display website content more efficiently and professionally.
Common Questions (FAQ)
Q1:truncatewordsWithtruncatewords_htmlWhat are the differences between filters?
truncatewordsThe filter will truncate plain text strings based on word count and will not recognize or process any HTML tags. If HTML tags are present in the content, it may result in incomplete HTML code after truncation, potentially破坏页面结构.truncatewords_htmlThe filter is specifically designed to handle rich text content containing HTML tags. It intelligently checks and closes all unclosed HTML tags while truncating, ensuring the integrity of the HTML code structure after truncation. In simple terms, if you are dealing with plain text, usetruncatewordsIf the text being processed is rich text with HTML tags, be sure to usetruncatewords_html.
Q2: Why do I need to addtruncatewords_htmla filter after that|safeFilter?
The template engine of Anqi CMS defaults to escaping all output content for security reasons to prevent cross-site scripting (XSS) attacks. This means that iftruncatewords_htmlReturns the HTML code (such as<p>...</p>) is not processed|safeThe characters in<and>are escaped into<and>causing the browser to be unable to render it as a real HTML element, but to display it as plain text. Add|safeThe filter explicitly tells the template engine that this content is safe HTML, which can be output with confidence without further escaping, thus allowing the browser to correctly render the truncated rich text content.
Q3:truncatewords_htmlCan it handle content with complex HTML structures such as nested images, tables, etc.?
Yes,truncatewords_htmlIntended to handle various complex HTML structures, including nested ones<img>/<table>/<div>Labels such as these. It will try to smartly close all open tags at the truncation point. For example, if an image tag<img src="a.jpg">is truncated, it is self-closing and there will be no problem; if a<table>The tag is truncated in the middle,truncatewords_htmlIt will be automatically added after the truncation point.</table>Close the table to prevent page disarrangement. However, it is important to note that if the original HTML content already contains serious structural errors (such as severe tag disorder, missing attribute values, etc.),truncatewords_htmlThe filter will try its best to correct, but it may also not be able to make it perfect 'magically'.Therefore, providing well-structured original HTML content is still**practical**.