Can the `truncatewords_html` filter correctly handle nested HTML tags while truncating, preventing page layout chaos?

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 cause the entire page layout to be disordered. This is undoubtedly one of the most annoying problems for content operators.

A security CMS understands this pain point and provides a very practical solutiontruncatewords_htmlFilter. This filter is designed to solve how to correctly handle nested HTML tags when truncating rich text content, to prevent the page structure from becoming disordered.

truncatewords_html: Smart truncation, maintain HTML integrity

Different from the filter that simply truncates by characters or word count,truncatewords_htmlThe filter intelligently "understands" the HTML structure when performing truncation operations.The core advantage is that it can automatically fill in all unclosed HTML tags even if the content is cut off in the middle of a tag.This means, regardless of what your content contains<b>/<i>/<a>Or<strong>and any nested tags, truncatewords_htmlEnsure that the truncated code is still a complete and valid HTML fragment, thus avoiding page structure chaos caused by unclosed tags.

This filter truncates by 'word', making the truncated content more readable and natural, avoiding the awkwardness of cutting words off abruptly.

How to usetruncatewords_htmlFilter

Using in Anqi CMS template,truncatewords_htmlThe filter is very intuitive. You need to pass the variable to be processed through the pipe character|Pass it to the filter and specify the number of words you want to truncate. At the same time, in order for the browser to correctly parse and render the HTML code that has been safely truncated, we also need to use it in conjunction with|safefilter.

Basic syntax is as follows:

{{ 变量|truncatewords_html:截断字数|safe }}

For example, let's assume we have a complex article content stored inarticle_contentvariables:

{% set article_content = '<p>这是一段非常重要的<b>网站运营</b>经验，<i>值得所有人</i>学习和借鉴。里面包含了大量关于<a href="#">AnQiCMS</a>的功能介绍。</p>' %}

<div class="summary">
    {{ article_content|truncatewords_html:15|safe }}
</div>

Even if the content in<a href="#">AnQiCMS</a>is truncated in the middle of a wordtruncatewords_htmlit will also intelligently close<p>and<a>Label, make sure 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 truncated the content but also ensured that all tags were properly closed, even if the original content had multiple levels of nesting.This is crucial for maintaining the correct rendering of the page and avoiding various front-end problems caused by HTML structure errors.

Application scenario

truncatewords_htmlThe filter is widely used in content management systems. Whether it is to display article summaries on article list pages, product descriptions on product list pages, or in any scenario where it is necessary to simplify the display of rich text content, it plays a crucial role.By using this filter, we can safely truncate the formatted content we have edited without worrying that the page layout will be affected.

Except for truncating by wordtruncatewords_html，AnQi CMS also provides character truncation oftruncatechars_htmlA filter with a similar principle, but the unit of truncation has become characters. Choose a more appropriate filter to process the content according to your specific needs.

In short,truncatewords_htmlThe filter is a powerful and thoughtful feature provided by AnQi CMS in the field of content operation, which greatly simplifies the process of generating rich text abstracts, helping us manage and display website content more efficiently and professionally.

Frequently Asked Questions (FAQ)

Q1:truncatewordswithtruncatewords_htmlWhat are the differences between filters?

truncatewordsThe filter will truncate plain text strings based on word count, it will not recognize or process any HTML tags, and if the content contains HTML tags, it may lead to incomplete HTML code after truncation, thus destroying the page structure. Andtruncatewords_htmlThe filter is specifically used to process rich text content containing HTML tags, while truncating it, it intelligently checks and closes all unclosed HTML tags to ensure the structure of the truncated HTML code is complete. Simply put, if you are dealing with plain text, usetruncatewordsIf the text contains HTML tags, be sure to usetruncatewords_html.

Q2: Why is it used intruncatewords_htmlNeed to be added after the filter|safeFilter?

The template engine of AnQi CMS defaults to escaping all output content for security reasons to prevent cross-site scripting attacks (XSS). This means that iftruncatewords_htmlHTML code returned (such as<p>...</p>) is not processed|safeIn the process,<and>characters will be escaped to<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 clearly informs the template engine that this content is safe HTML that can be safely output without further escaping, so that the browser can correctly render the truncated rich text content.

Q3:truncatewords_htmlCan it handle complex HTML structures with nested images, tables, etc?

Yes,truncatewords_htmlAims to handle various complex HTML structures, including nested ones<img>/<table>/<div>Tags. It will try its best to smartly close all open tags at the truncation point. For example, if a picture tag<img src="a.jpg">is truncated, it is self-closed and there will be no problem; if a<table>The label is truncated in the middle,truncatewords_htmlIt will be automatically added after the truncation point</table>Close the table to prevent page chaos. However, it is important to note that if the original HTML content itself has serious structural errors (such as tag disorder, missing attribute values, etc.),truncatewords_htmlThe filter will try its best to correct, but may not be able to make it completely perfect in a 'magical' way.Therefore, providing well-structured original HTML content is still**practical.