How to safely extract the content of an article containing HTML tags without destroying its structure?

In website content management and display, we often need to display a part of the article content in the article list, homepage summary, or related recommendation area to attract readers to click.However, directly truncating the text or character count of an article containing HTML tags can easily destroy its original HTML structure, leading to incorrect display of the page and even affecting the overall layout and user experience.

AutoCMS (AutoCMS) understands this pain point, its powerful template engine and built-in filters provide an elegant and secure solution, allowing you to worry-free about display issues caused by content truncation.Next, we will discuss how to safely extract the content of articles containing HTML tags in the Aiqi CMS.

Why would the conventional truncation method destroy the HTML structure?

Imagine that the content of an article might be something like this:

<p>这是一段包含<strong>重要信息</strong>的文字。</p>
<div class="image-box">
  <img src="/path/to/image.jpg" alt="图片描述">
</div>
<p>更多精彩内容。</p>

If you only use string slicing features, such as limiting the display to the first 50 characters, and these 50 characters happen to be<strong>cut off inside the tag, or<div class="image-box">After the tag but before its closing tag</div>Before, then the code displayed on the final page may be<p>这是一段包含<strong>重要信or<div class="image-box">.Incomplete HTML code will cause the browser to fail to render correctly, resulting in lost styles at best and chaotic page layout at worst, and even affecting the normal display of other elements.

English CMS Solution: HTML Secure Extraction Filter

AutoCMS uses a template engine syntax similar to Django, providing rich filters (Filters) to process content. The system has built-in security clipping for HTML content.truncatechars_htmlandtruncatewords_htmlThese are two very practical filters.Their core advantage lies in the ability to intelligently identify and close incomplete HTML tags when extracting content, thereby ensuring the structural integrity of the output.

1. English: Safely truncate by character count:truncatechars_html

If you need more precise control over the truncation length, for example, requiring the abstract to be within 100 characters, even if this truncates a word,truncatechars_htmlIt is your ideal choice. It will truncate according to the number of characters you specify, while ensuring that all HTML tags 'opened' at the truncation point are correctly closed.

Example Usage:Assuming your article content is stored initem.ContentIn the variable, you want to extract the first 120 characters as a summary.

{{ item.Content|truncatechars_html:120|safe }}

Here are the120That is the number of characters you want to extract.|safeThe filter is crucial here, it tells the template engine that the output content is safe HTML, which should not be automatically escaped, so that the browser can normally parse the extracted HTML structure.

2. English safe truncation by word count:truncatewords_html

Compared to this, if your content pays more attention to semantic integrity and wants to avoid truncating words, even though this may cause the actual character count to fluctuate slightly,truncatewords_htmlIt would be a better choice. It will truncate according to the number of words you specify and will also intelligently handle the closing of HTML tags.

Example Usage:If you want the article abstract to display about 30 words.

{{ item.Content|truncatewords_html:30|safe }}

Here are the30That is the number of words you want to extract. Similarly,|safeThe filter is indispensable.

Actual operation example

In the template of AnQi CMS, you usually loop through to display the article list (for example, using the English translation: [English])}]archiveList标签）时用到这些截取功能。一个典型的场景是，如果文章有独立的“简介/摘要”字段（例如item.Description），we prioritize its use; if the article does not have a summary, we extract a part from the article bodyitem.Contentfrom the safety.

{# 假设我们正在循环输出一个文章列表 #}
{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <article 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>分类: <a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
        </div>
        <div class="article-summary">
            {# 优先使用文章的简介字段，如果为空，则从内容中安全截取前180个字符 #}
            <p>{{ item.Description|default:item.Content|truncatechars_html:180|safe }}</p>
        </div>
        <a href="{{item.Link}}" class class="read-more">阅读全文 &gt;&gt;</a>
    </article>
    {% endfor %}
{% endarchiveList %}

In this example,item.Description|default:item.Contentmeans: ifitem.Descriptionhas a value, then use it; otherwise,item.Content. Then, whether it is a brief introduction or the main text, it is intercepted and output through thetruncatechars_html:180|safefilter for safe truncation and output. This ensures the flexibility of content configuration while also considering the stability of the page structure.

Precautions

  • |safeFilter cannot be omitted:This is the most critical point.truncatechars_htmlandtruncatewords_htmlThe content processed by the filter is still a string with HTML tags. To ensure the browser correctly interprets these tags and not as plain text, it must be added when outputting.|safeFilter. Otherwise, you might see the original HTML tags, such as&lt;p&gt;.
  • Use the standalone abstract field first:In content operation practice, the best practice is to fill in an independent abstract or summary field when publishing articles (",item.DescriptionEnglishThis ensures the preciseness and attractiveness of the abstract, as well as reduces the burden of the template engine parsing and extracting HTML on each page load.truncate_htmlas a backup solution.
  • Consideration of截取 length:Based on the design and layout of your website, set the character or word truncation length reasonably. Too short may not convey sufficient information, and too long may lose the meaning of the summary.

With the powerful template filters provided by AnQi CMS, you can easily achieve safe truncation of article content containing HTML tags, which can optimize page display, enhance user experience, and effectively manage your website content, making website operation more efficient.

Common Questions (FAQ)

Q1:truncatechars_htmlandtruncatecharsWhat is the essential difference?

A1: truncatechars_htmlandtruncatecharsAll are used to truncate strings by character count, but they handle HTML content in completely different ways.truncatecharsIs purely string truncation, regardless of whether the content contains HTML tags, if the truncation point is exactly within a tag, it will destroy the HTML structure.truncatechars_html则是 HTML 感知的，它会在截取后智能地闭合所有未完成的 HTML 标签，从而保证截取后内容的 HTML 结构是完整的和有效的。因此，处理包含 HTML 的文章内容时，务必使用 Englishtruncatechars_html.

Q2: Why is the content not displayed correctly after usingtruncatechars_html, and instead, the HTML tags are displayed as well?

A2:This is usually because you forget to add in the output the content after truncation|safeFilter.AutoCMS (and most modern template engines) defaults to HTML-escaping all output content for security reasons to prevent XSS attacks.truncatechars_htmlAfter processing the content, the output is still a string containing HTML tags. If you don't add|safeThese tags (such as<p>) will be escaped to&lt;p&gt;, thus displayed as plain text on the page. Plus|safeAfter, it will inform the template engine that this content is safe HTML and can be output directly without escaping.

Q3: Can I set the global article summary truncation length directly in the Anqi CMS backend?

A3:The auto CMS provides the custom field feature for content models, encouraging you to set a 'summary' or 'abstract' field separately for articles and fill it manually when publishing.This can control the summary quality to the maximum extent.truncatechars_htmlortruncatewords_htmlFilter to flexibly control the capture length.This means that you need to set and apply the truncation logic according to the requirements of different areas (such as the homepage, category page, search results page) in the template file, rather than through the global unified setting in the background.This approach provides greater flexibility and customization space.