How to safely truncate text to a specified length for articles containing HTML tags using `truncatechars_html`?

When managing website content with AnQiCMS, we often encounter such a scenario: to make the article content more visually appealing for layout, various HTML tags are used to enrich the visual effects, such as paragraphs (<p>）、picture（<img>), link (<a>）、bold（<strong>etc.However, on the article list page or related recommendation modules, we often need to display the summaries or parts of these articles, but we cannot directly display the entire long treatise.

This is a common practice to extract a fixed-length text from the beginning of the article.If you directly and simply truncate text containing HTML tags, such as truncating the first 100 characters, the result is often not satisfactory.Because this rough cutting method may truncate HTML tags, causing page rendering errors, such as unclosed tags, chaotic styles, and even destroying the entire page layout.This not only affects user experience, but may also cause compatibility issues with browsers.

To handle the requirement of safely and elegantly truncating article content with HTML tags, Anqi CMS provides a very practical template filter -truncatechars_html.

Why choosetruncatechars_html?

truncatechars_htmlThe core value of the filter lies in its ability to intelligently process HTML structure. It does not simply count characters like ordinary string truncation, but ratherparse HTML tagsAfter extracting text of specified length (excluding the characters of HTML tags themselves), itautomatically closes all unclosed HTML tagsThus, to ensure that the output HTML code is complete and valid.This means that you do not have to worry that truncated HTML content will disrupt the layout or style of the page, as it will strive to maintain the semantic and visual integrity of the content.

How to use in Anqi CMS templatetruncatechars_html?

Using in Anqi CMS template systemtruncatechars_htmlVery intuitive. You just need to apply it as a filter to the content variable you want to extract, and specify the desired character length.

The basic syntax is:{{ 变量名|truncatechars_html:长度|safe }}.

For example, on the article list page, you may need to display the abstract of each article. Suppose your article content is stored inarchive.Contentvariables, and you want to truncate the first 120 visible characters as the abstract:

{# 假设我们正在遍历一个文章列表 archives #}
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
        <div class="article-summary">
            {# 安全地截取文章内容的前120个可见字符，并保持HTML结构完整 #}
            {{ item.Content|truncatechars_html:120|safe }}
        </div>
        <a href="{{ item.Link }}" class="read-more">阅读更多</a>
    </div>
    {% endfor %}
{% endarchiveList %}

Here,item.ContentThis is the detailed content of the article, which may include such as<p>这是文章的<strong>第一段</strong>内容。</p><img src="/image.jpg" alt="图片描述">This kind of HTML.

  1. truncatechars_html:120It will tell the system to截取前120个visible characters(HTML tag itself is not counted in length), and intelligently closes any tags that are opened at the cut point.
  2. |safeThe filter isindispensablebecausetruncatechars_htmlThe output itself is processed HTML code. For security reasons, the Anqi CMS template engine defaults to escaping all output content (such as converting "<Converted to&lt;）。If not added|safe, the HTML tag after truncation will be displayed as plain text instead of being parsed by the browser, thereby losing its original style.

truncatechars_htmlExample of the working principle

Suppose there is the following HTML content:

<p>这是一段很长的文本，其中包含<strong>加粗</strong>和<a href="#">链接</a>，我们希望截取它的部分内容，同时保持格式。</p>
<p>第二段内容，可能也会被截取到。</p>

If you use{{ original_html_content|truncatechars_html:50|safe }}to cut it,truncatechars_htmlit will calculate the visible characters and may output something like this:

<p>这是一段很长的文本，其中包含<strong>加粗</strong>和<a href="#">链接</a>，我们希望截取它的部分内容，同时保持格式...</p>

It can be seen that although truncated after the link,<a>and<strong>/<p>the tags are properly closed, and an ellipsis is added at the end,...Ensured the validity of HTML and the tidiness of the page.

Actual application scenarios

  • List of articles/news summary:In the article list of blogs and news websites, show a brief summary of each article to guide users to click and read the full text.
  • Product list/introduction:On the product list page of an e-commerce website, display the beginning part of the product detailed description while maintaining the style and availability of links.
  • Search results page:Search engine internal search results, providing a preview of relevant content fragments.
  • Recommended module:At the bottom or side栏 of the article, recommend other relevant articles and display their summaries.

By using flexibilitytruncatechars_htmlFilter, which can greatly enhance the display effect and user experience of the security CMS website, ensuring that even abstract content is presented in a professional and beautiful manner.

Common Questions (FAQ)

1.truncatechars_htmlandtruncatecharsWhat is the difference? truncatecharsIt is used for extracting text content, it simply truncates by character count and does not consider HTML tags.It is easy to truncate tags when using HTML content, which can lead to incorrect display of the page.truncatechars_htmlIt will intelligently recognize HTML tags, while extracting visible characters, ensuring that all opened tags are correctly closed, thus outputting a valid HTML snippet.

2. Why do you need to addtruncatechars_htmlafter using|safeFilter?The template engine of Anqi CMS defaults to escaping all output content for security reasons to prevent cross-site scripting (XSS) attacks.truncatechars_htmlAlthough it outputs a legal HTML fragment, but if not|safea filter is added, the template engine will escape it again, for example, by<p>displayed as&lt;p&gt;.|safeIs explicitly telling the template engine: This content is safe, please parse and display it directly as HTML.

3. If my content is plain text, it can be usedtruncatechars_html?OK.truncatechars_htmlIt is also effective for plain text content, treating it as untagged HTML and truncating it to the specified length. However, for plain text, it is more recommended to usetruncatecharsFilter, as it is lightweight, does not require HTML parsing, and is more efficient. It is usually only necessary when the content may contain HTML tags.truncatechars_html.