How to safely truncate a long text containing HTML tags in AnQiCMS template?

In AnQiCMS template design, we often encounter scenarios where we need to display long text content, such as abstracts on article list pages, brief introductions of product details, and so on.If this long text content is displayed directly, it may cause the page to be long, affecting user experience and layout aesthetics.Therefore, truncating long text is a common requirement.

However, when this long text content contains HTML tags, simple character truncation may cause problems. For example, a<p>这是一段<b>重要的</b>文本</p>such content, if truncated at<b>If the label is in the middle, it may cause the HTML structure to be destroyed, resulting in abnormal display of the page.At this point, we need a safe way to truncate long text that contains HTML tags.

AnQiCMS provides a powerful and flexible template engine, its syntax is similar to Django templates.In this engine, we can take advantage of built-in filters (filters) to elegantly solve this problem.Among them, there is a truncation filter specifically designed to handle text containing HTML, which can intelligently truncate the content while maintaining the integrity of the HTML tags to avoid chaos in the page structure.

Understand HTML safe truncation filter

In the AnQiCMS template, there are two core truncation filters that can help us safely handle long text:truncatechars_htmlandtruncatewords_htmlThey are ordinarytruncatecharsandtruncatewordsThe main difference is that they are "HTML sensitive", trying to recognize and close incomplete HTML tags to avoid rendering errors caused by truncation.

• truncatechars_html:长度This filter will truncate text according to the specified character count.It calculates the visible characters (excluding the characters of the HTML tags themselves) and tries to ensure that all open HTML tags are properly closed when truncating.If content is truncated, it is usually followed by “…”.
• truncatewords_html:单词数This filter then truncates the text according to the specified word count.Similar to character truncation, it also pays attention to the integrity of the HTML structure and performs necessary tag closures when truncating.

Why can't it be used directly?truncatecharsTruncate HTML content?

OrdinarytruncatecharsThe filter simply calculates characters from the beginning and stops once it reaches the specified length.It does not distinguish between visible text and HTML tags, nor does it attempt to close incomplete tags after truncation.truncatecharsTruncate<b>重要的</b>, it may result in a<b>重要This result causes all subsequent text on the page to become bold, or other unexpected style issues. And_htmlThe suffix filter will avoid this situation.

Apply HTML safe truncation in AnQiCMS template

We take common article content as an example,archiveDetailThe tag is used to obtain document details, among which,ContentThe field usually contains text with HTML formatting.

Assuming we need to display a short preview of the article content on a list page or in an abstract area, limited to 100 characters. The steps are as follows:

1. Get the document content:First, you need to usearchiveDetailtags to get the article'sContentfield. For the convenience of subsequent operations, we can assign it to a variable, such asarticleContent.

   {% archiveDetail articleContent with name="Content" %}
   

   orarchiveListuse it directly in the loopitem.Content.

   {% for item in archives %}
       {# 这里可以直接访问 item.Content #}
   {% endfor %}
   

2. Apply the truncation filter and ensure safe output:In the AnQiCMS template, any content containing HTML should be used when outputting:|safeA filter to prevent the template engine from escaping HTML tags to plain text.This is particularly important for truncating HTML content because we want the browser to parse these tags normally.

   toarticleContentTruncate to 100 characters and safely output:

   {{ articleContent|truncatechars_html:100|safe }}
   

   If you prefer to truncate by word count, for example, truncate to 30 words:

   {{ articleContent|truncatewords_html:30|safe }}
   

Complete example scenario: Display HTML formatted summary on the article list page

Assume the loop name of your article list isarchivesYou want each article to display a summary of up to 150 characters and retain the basic format such as bold and links:

`twig {% 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-meta">
        <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量: {{ item.Views }}</span>
    </div>
    <div class="article-summary">
        {# 安全地截断HTML内容，并使用|safe避免转义 #}
        {{ item.Content|truncatechars_html:150|safe }}
        <a href="{{ item.Link