In website operations, we often encounter situations where we need to display a segment of text, but we cannot let it be too long to avoid affecting the page layout or reading experience.Whether it is an article title, abstract, or product description, if the content exceeds the expected length, the usual practice is to truncate a part of it and add an ellipsis at the end to indicate that the content has not yet ended.For AnQiCMS users, achieving such an effect is not complicated, thanks to its flexible and powerful template engine, we have a variety of built-in filters (Filters) that can easily handle it.

AnQiCMS's template engine is designed very practically, allowing developers and operators to process variables with simple syntax, including the string truncation and ellipsis addition we are discussing today.These filters can help us efficiently manage the display of content on the front end, enhancing user experience and page cleanliness.

How to truncate a plain text string and add an ellipsis

For plain text content without any HTML tags, AnQiCMS provides two very convenient filters to handle:truncatecharsandtruncatewords.

  1. Truncate by character:truncatecharsAs the name suggests,truncatecharsThe filter will truncate the string based on the number of characters you specify.It will also count the ellipsis (usually 3 characters) automatically added at the end in the total length.This means that if you specify to truncate to 20 characters, the total length of the content displayed (including the ellipsis) will not exceed 20 characters.

    Usage: {{ 你的变量|truncatechars:长度 }}

    For example, suppose your article titlearchive.Titleis 'AnQi CMS: An efficient enterprise-level content management system that helps you easily manage your website content.' If you want to truncate it to display a maximum of 15 characters, you can write it like this: {{ archive.Title|truncatechars:15 }}

    处理后的结果可能是：“Safe CMS：一款高效…”

  2. Cut by words:truncatewordsWithtruncatecharsdifferent,truncatewordsThe filter tries to cut strings at word boundaries, which can prevent a word from being cut off in the middle, making the text read more naturally and smoothly in the English context.It will also count the ellipsis within the specified number of words.

    Usage: {{ 你的变量|truncatewords:单词数量 }}

    假设您有一段英文描述archive.DescriptionAnQiCMS is a powerful and flexible content management system developed with Go language, offering efficient solutions for SMEs. If you need to display the first 10 words, you can do it like this:{{ archive.Description|truncatewords:10 }}

    处理后的结果可能是：“AnQiCMS is a powerful and flexible content management system developed with Go language…”}]

How to extract a string containing HTML content and add an ellipsis

In many website content management scenarios, the summary of an article or product description may contain images, links, bold text, and other HTML tags. If used directly,truncatecharsortruncatewordsProcessing this content may disrupt the HTML structure, causing the page to display incorrectly or incompletely.

To avoid this situation, AnQiCMS kindly provides a special filter for handling HTML content:.truncatechars_htmlandtruncatewords_html.

  1. Cut HTML by characters:.truncatechars_htmlThis filter is similar totruncatechars的功能类似，但它会智能地识别并闭合未结束的HTML标签。This ensures that the output HTML structure is still valid when truncating strings containing HTML tags.At the same time, the ellipsis will also be counted within the specified character length.

    Usage: {{ 你的HTML变量|truncatechars_html:长度|safe }}

    Please note that when using_htmlThe suffix filter processes HTML content,Be sure toand then adds at the end|safeFilter.safeThe filter tells AnQiCMS template engine that this content is safe HTML code and does not require additional escaping. It should be parsed directly as HTML.

    For example,archive.Contentincluding<p>这里是<b>一段长长的文本，其中包含<i>各种有趣的</i>内容</b>。</p>And you want to truncate it to a maximum of 30 characters:{{ archive.Content|truncatechars_html:30|safe }}

    The processed result may be:<p>这里是<b>一段长长的文本，其中包含<i>各种...</i></b></p>As you can see, the HTML tags are correctly closed.

  2. Truncate HTML by word:truncatewords_htmlWithtruncatewordsSimilar, but it is suitable for content containing HTML tags and will try to cut at word boundaries and proper HTML tag structures. It also needs|safeThe filter is used to correctly parse HTML.

    Usage: {{ 你的HTML变量|truncatewords_html:单词数量|safe }}

    For example,archive.ContentYes<p>AnQiCMS is a <b>powerful and flexible</b> content management system.</p>Would you like to extract the first 5 words:{{ archive.Content|truncatewords_html:5|safe }}

    The processed result may be:<p>AnQiCMS is a <b>powerful and...</b></p>

Application scenarios and tips

In AnQiCMS template development, these excerpt filters are powerful tools for content display optimization. They are usually used for:

  • Summary of the article list page:Unify the summary length to make the page layout more tidy.
  • Brief description of the product list page:Quickly browse product highlights to attract user clicks.
  • Any scenario that requires a thumbnail display of text:Avoid overly long text from taking up too much space.

Tip:

  • Choose the appropriate filter:For plain text, choosetruncatecharsortruncatewords; for content that includes HTML, please usetruncatechars_htmlortruncatewords_html, and always coordinate with|safe.
  • consider language features:For Chinese content,truncatecharsGenerally more commonly used, as it does not have the concept of 'word'; while for English content,truncatewordsit often provides a more natural truncation effect.
  • Test effect:It is best to test the truncation effect on content of different lengths when in practical application, to ensure that it meets your design and user experience requirements.

Master these string slicing filters, and it will enable you to present content on AnQiCMS more flexibly and efficiently, making it easy to create both beautiful and practical web pages.

Common Questions (FAQ)

Q1：Why does the page display incorrectly or the tags are not closed when I截取HTML内容？A1：This is very likely because you usedtruncatecharsortruncatewordsProcess content that includes HTML tags. These filters do not have the ability to recognize and process HTML structure, which may cause tags to be truncated in the middle. Please usetruncatechars_htmlortruncatewords_html，并确保在输出时加上|safeFilter, for example{{ 你的HTML变量|truncatechars_html:长度|safe }}.|safe过滤器指示模板引擎将内容作为原始HTML渲染，而不是将其转义。