When operating a website, we often encounter situations like this: an article's abstract is too long, causing the page layout to be chaotic; the product description is detailed, but seems redundant on the list page; or a title is too long, occupying space of other elements.These seemingly minor issues may affect user experience and the overall aesthetics of the page.Fortunately, AnQiCMS provides us with very convenient and powerful template tags, which can easily solve the needs of content truncation and adding ellipses, making our website content display more appropriate and professional.

The template engine of Anqi CMS built-in several very practical content truncation filters, which can work according to different needs (whether plain text or containing HTML, whether by word count or by word number). The core four filters are:truncatechars/truncatewords/truncatechars_htmlandtruncatewords_html.

Understand the CMS cropping tool of AnQing

Before we delve into the specific usage, we first need to clarify a few concepts:

  1. Plain text content vs. HTML content:

    • Plain text content: Refers to text without any HTML tags, such as article titles, brief descriptions, etc.
    • HTML content: Refers to text that includes HTML tags, such as the main body of articles, formatted product details, etc.When truncating HTML content, it is especially important not to disrupt the original tag structure, otherwise it may cause the page display to be abnormal.

  2. Character-based truncation vs. word-based truncation:

    • Character-based truncation：Cut strictly according to the set character count, regardless of whether these characters are Chinese, English, or punctuation marks, they will be counted in the total.
    • Cut by wordThis is mainly for English content, it will cut according to word boundaries to ensure that each cut word is complete.For Chinese content, due to the lack of clear word concepts, it usually falls back to character processing.

Understood the basics, we can then choose the appropriate filter to handle different content.

How to use these tools

In the AnQi CMS template, the syntax of using filters (Filters) is very intuitive:{{ 变量 | 过滤器: 参数 }}.|The symbol represents passing the value of the left variable to the right filter for processing,:The symbol is used to pass parameters to the filter.

1. Extracting plain text content

For text without HTML tags, we mainly usetruncatecharsandtruncatewords.

  • truncatechars: Truncate by character (including ellipsis)This filter will strictly cut according to the number of characters you specify and automatically add '...' as an ellipsis after the cut.It should be noted that the three characters of this ellipsis will also be counted in the total length you set.

    Usage example:Suppose we have an article description variablearchive.Descriptionand we want to truncate to the first 50 characters and add an ellipsis.

    <p>{{ archive.Description|truncatechars:50 }}</p>

    Effect:If the original description is 'This is a very long article description that needs to be truncated here to maintain the page's neatness.' The truncated display may be: 'This is a very long article description that needs to be truncated here to maintain the page's neatness…'

  • truncatewordsSplit by words (including ellipsis)This filter will truncate by word count and add an ellipsis (...) at the end.It tries to maintain the integrity of the word.Similarly, the characters of the ellipsis will also be counted in the total length set.

    Usage example:Suppose we have an English title variablearchive.Titleand we want to take the first 10 words.

    <h3>{{ archive.Title|truncatewords:10 }}</h3>

    Effect:If the original title is “AnQiCMS is a powerful and flexible content management system for enterprises.” It may be truncated and displayed as: “AnQiCMS is a powerful and flexible content management system…”

2. Extracting HTML content (Key point)

When we need to extract content containing HTML tags (such as a part of an article text), we directly usetruncatecharsortruncatewordsMay destroy HTML structure, causing the page to display incorrectly. Anqi CMS provides a special filter for handling HTML content.truncatechars_htmlandtruncatewords_htmlThey can intelligently preserve the integrity of HTML tags.

Special reminder:Extract the HTML content, and in order for the browser to correctly parse and render the HTML, it must be used at the end.|safeFilter. Otherwise, the browser may display HTML tags as plain text.

  • truncatechars_html: Truncate HTML content by character (retaining structure, including ellipsis)This filter will truncate HTML content by character count and intelligently close all unclosed HTML tags to ensure the output HTML structure is valid.Ellipsis is counted in total length.

    Usage example:Assuming we have a paragraph of HTML content.archive.ContentWe want to extract the first 200 characters.

    <div class="article-summary">{{ archive.Content|truncatechars_html:200|safe }}</div>

    Effect:If the original content is<strong>这是一段重要的内容，包含<em>粗体和斜体</em>文字。非常长...</strong>The extracted content might display as:<strong>这是一段重要的内容，包含<em>粗体和斜体</em>文字。非常...</strong>(Note: during the extraction process,<em>Label is smartly closed)

  • truncatewords_html: Cut HTML content by words (retain structure, including ellipsis)Withtruncatechars_htmlSimilarly, it truncates HTML content by word count, and also intelligently handles HTML tags. The ellipsis is counted in the total length.

    Usage example:Suppose we want to truncatearchive.Contentthe first 40 words.

    <div class="article-snippet">{{ archive.Content|truncatewords_html:40|safe }}</div>

    Effect:If the original content is<ul><li>第一项</li><li>第二项</li><li>第三项，内容很长...</li></ul>The extracted content might display as:<ul><li>第一项</li><li>第二项</li><li>第三项，内容很长...</li></ul>[Truncated]<ul>and<li>(The integrity of the label))

Practical scenarios and **practice

In practical applications, flexibly using these cropping tools can significantly improve the user experience and page cleanliness of the website