In website operation, we often need to display various text content on the page, such as the summary of article lists, previews of product introductions, or brief descriptions of a certain detail page.How to elegantly present the core information of long content within a limited space and guide users to click for more details is a common requirement.This is especially important for truncating long text content and automatically adding ellipses.
AnQiCMS (AnQiCMS) is an efficient and flexible content management system that fully considers this user demand and provides a very convenient and powerful content filtering mechanism to help us easily achieve this goal.By using these built-in filters, we can not only optimize the page layout and enhance visual aesthetics, but also significantly improve user experience, making information transmission more efficient.
Why is it necessary to truncate long text content?
Content is extracted and automatically appended with an ellipsis, which is a key aspect in enhancing the user experience and page performance of a website.
Firstly, it can effectively optimize the page layout and avoid information overload.Imagine, if the full text of each article in a list of articles were displayed directly, the page would become overly long, making it difficult for users to quickly browse and find the content they are interested in.By truncating, we can display more entries within the limited screen space, enhancing the compactness and professionalism of the page.
The content can improve readability and attractiveness.A concise summary, making it easier for users to quickly digest and激发他们点击“阅读更多”的欲望.This is like the cover blurb of a book, with just the right amount of white space and suspense, which is an important means to guide users to delve deeper.
In addition, for search engine optimization (SEO), carefully selected content snippets are often used as page meta descriptions (Meta Description) or search results summaries, which helps to attract users to click on search results, thereby increasing the website's traffic.
English CMS provided solutions: Content Extraction Filter
The Anqi CMS is built-in with a variety of flexible filters, specifically designed for handling the truncation and formatting of long text content. These filters can intelligently judge the length of text and automatically insert ellipses (...)，and in use, we also need to pay attention to distinguish between handling plain text and rich text containing HTML tags to ensure the integrity of the extracted structure.
auto CMS provides the following core filtering options:
truncatechars: Truncate by character count.truncatewords: Truncate by word count.truncatechars_html: Truncate HTML safely by character count.truncatewords_html: HTML safely truncates by word count.
Next, we will delve into the usage of these filters in detail.
1.truncatechars：Truncates by character count
truncatecharsThe filter will truncate the string based on the number of characters you specify. It should be noted that it will automatically add an ellipsis (...The total length is counted. If the length of the original content is less than or equal to the specified length, no truncation will be performed.
Usage:
{{ 变量名|truncatechars:字符数量 }}
Example:假设我们有一段长文本：“English CMS is an enterprise-level content management system developed based on Go language, committed to providing efficient, customizable, and easy-to-expand content management solutions.”
<p>
{{ "安企CMS 是一个基于 Go 语言开发的企业级内容管理系统，致力于提供高效、可定制、易扩展的内容管理解决方案。"|truncatechars:20 }}
</p>
Show results:English CMS is an enterprise-level... developed based on Go language
2.truncatewords: Cut by word count
truncatewords
Usage:
{{ 变量名|truncatewords:单词数量 }}
Example:Using the same text content:
<p>
{{ "安企CMS 是一个基于 Go 语言开发的企业级内容管理系统，致力于提供高效、可定制、易扩展的内容管理解决方案。"|truncatewords:8 }}
</p>
Show results:English CMS is an enterprise-level... developed based on Go language
It should be noted that, for Chinese text,truncatewordsThe filter relies on spaces to identify "wordstruncatecharsWill be more applicable.
3.truncatechars_html: HTML safely truncates by character count
When handling rich text content containing HTML tags, use directlytruncatecharsortruncatewordsIt may destroy the HTML structure, causing the page to display abnormally.truncatechars_htmlThe filter is designed to solve this problem.It will intelligently retain and close all unclosed HTML tags while extracting content, ensuring that the extracted content is still valid HTML.
Special reminder:Any content that may contain HTML tags after truncation, needs to be coordinated with the template output.|safeFilter, informs the CMS that this content is safe and does not require HTML escaping, allowing the browser to render it correctly.
Usage:
{{ 变量名|truncatechars_html:字符数量|safe }}
Example:English text: We have a text containing HTML tags:
Secure CMSGreat! It providesFlexible Content Modeland powerful SEO tools.
"<p>
{{ "<p>安企CMS **很棒**！它提供了 <em>灵活的内容模型</em> 和强大的 SEO 工具。</p>"|truncatechars_html:25|safe }}
</p>
Show results:
Secure CMSGreat! It providesFlexible Content Model…
4.truncatewords_html: HTML safely truncates by word count
Withtruncatechars_htmlis similar,truncatewords_htmlThe filter performs HTML-safe truncation based on word count. It also retains and closes HTML tags to prevent structural damage.
Usage:
{{ 变量名|truncatewords_html:单词数量|safe }}
Example:Use the same text containing HTML tags:
<p>
{{ "<p>安企CMS **很棒**！它提供了 <em>灵活的内容模型</em> 和强大的 SEO 工具。</p>"|truncatewords_html:8|safe }}
</p>
Show results:
Secure CMSGreat! It providesFlexible Content Model和…
Application scenarios and code examples
In the AnQi CMS template, these filters can be widely used in various content modules, such as:
1. Summary display in the article list
In the article or product list page, we usually need to display a brief summary of the content.
`twig {# 假设您正在循环文档列表，并希望截取文档描述 #} {% archiveList archives with type=“page” limit=“10” %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
<h3 class="article-title">{{item.Title}}</h3>
</a>
<p class="article-description">
{# 截取文档描述的前100个字符