When operating a website, we often need to display content such as article summaries, product descriptions, or user comments.This text, if not processed and displayed in full, may disrupt the page layout for long text, affecting the overall aesthetics and information transmission efficiency.This is especially important to properly truncate the content and add an ellipsis.

AnQiCMS as an efficient and customizable content management system, its powerful template engine developed based on Go language provides us with a simple and intelligent solution.Through built-in filters, we can easily achieve flexible truncation of string or HTML content, and automatically add ellipses to ensure that the content is concise and complete while maintaining good page structure.

Extract normal text content: Balancing brevity and readability

For plain text content without any HTML tags, AnQiCMS provides two convenient filters to meet different truncation requirements:truncatecharsandtruncatewords.

1.truncatechars：Truncates by character count

This filter is very suitable for use when you need to strictly control the display length of text. It will truncate the string according to the number of characters you specify and add an ellipsis within this length....）。This means that if you set to truncate to 10 characters, the final content displayed (including the ellipsis) will not exceed 10 characters in length. It is important to note,truncatecharsAn "auto" may "cut off" a word when truncating, as it only counts the number of characters.

Example Usage:Assume your article descriptionitem.DescriptionIs a plain text that you want to display at most 30 characters:

<p>{{ item.Description|truncatechars:30 }}</p>

Ifitem.Description的内容是‘AnQiCMS is an enterprise-level content management system developed based on the Go language, with powerful functions and easy deployment.’, then it may be displayed as ‘AnQiCMS is an enterprise-level content management system developed based on the Go language, with powerful functions and easy deployment.’

2.truncatewords: Cut by word count

When you pay more attention to the semantic integrity of the content, and hope that the extracted text does not appear to be 'half a word',truncatewordsThe filter comes into play.It will cut according to the number of words you specify, ensuring that each word is complete.Of course, in an English environment, this filter effect will be very natural.truncatecharscutting directly by word count is more accurate and meets expectations.

Example Usage:If you want the summary of an English articleitem.DescriptionShow the first 15 words:

<p>{{ item.Description|truncatewords:15 }}</p>

Ifitem.DescriptionAnQiCMS is an enterprise-level content management system developed based on Go language, powerful and easy to deploy.

Extract content containing HTML: Balance between safety and structure

It is a tricky problem to truncate characters or words from content containing HTML tags.Simplistically cutting may destroy the integrity of HTML tags, causing the page to display incorrectly, and even potentially introducing security vulnerabilities.AnQiCMS provides filters specifically designed for HTML content, which can intelligently handle tags to ensure that the HTML structure extracted is still valid.

1.truncatechars_html: Cut HTML safely by character

This filter is similar totruncatecharsSimilar, but it intelligently identifies and maintains the structure of HTML tags when cutting.It will ensure that all open tabs are correctly closed regardless of how many characters you extract, avoiding page rendering issues caused by mismatched tags.This is very useful for scenarios such as article main text, rich text editor generated summaries, etc.

Important reminder:When usingtruncatechars_htmlortruncatewords_htmlAfter extracting HTML content, be sure to add it to the variable output|safeFilter. This is because AnQiCMS's template engine, for security reasons, defaults to escaping all output content (for example<is escaped to&lt;) if not processed_htmlFilter the content to be processed|safeMark, the browser will display your HTML tags as plain text, rather than rendering them.|safeExplicitly tell the template engine that this content is safe and does not require escaping, and can be output directly as HTML.

Example Usage:Assuming your article contentarchive.ContentContaining rich HTML format, you want to extract the first 100 characters to display:

<div class="summary">{{ archive.Content|truncatechars_html:100|safe }} <a href="{{ archive.Link }}">阅读更多</a></div>

2.truncatewords_html: Safely split HTML by words

Withtruncatewordsis similar,truncatewords_htmlIt will truncate the content containing HTML based on the number of words, while also intelligently maintaining the integrity of HTML tags. Similarly, it is also applicable to languages with clear word delimiters, such as English, and it also requires cooperation.|safefilters.

Example Usage:If you want the product detailsproduct.DescriptionShow the first 20 words while retaining their HTML format:

<div class="product-brief">{{ product.Description|truncatewords_html:20|safe }} <a href="{{ product.Link }}">查看详情</a></div>

**Practical and practical suggestions

  • Choose the appropriate truncation method:For plain text descriptions, selecttruncatecharsortruncatewords. Always use for rich text content with HTML formattingtruncatechars_htmlortruncatewords_htmlto avoid破坏页面结构。
  • Remember|safeFilter:whenever you usetruncatechars_htmlortruncatewords_htmlFilter to process HTML content must be immediately followed by|safeFilter, otherwise the browser will display the original HTML tags instead of the rendered effect.
  • Extract length uniformly:In different areas of the website, try to maintain consistency in the length of the extracted content of the same type.For example, the summaries of all article list pages are truncated to 80 characters, which makes the page look cleaner and more professional.
  • Add 'Read more' link:After extracting the content, it is usually necessary to add a "Read More" or "View Details" link at the end to guide users to access the full content and enhance the user experience.

Through the flexible use of these content extraction filters provided by AnQiCMS, you will be able to better manage and present website content, providing visitors with a both beautiful and efficient browsing experience.

Common Questions (FAQ)

  1. truncatecharsandtruncatewords_htmlWhat are the core differences? truncatecharsIt is a filter used to extract plain text, which simply counts characters and may truncate words.truncatewords_htmlis used to extract text containing HTML tags, it intelligently recognizes and maintains the HTML structure, and counts words to extract. Most importantly,truncatewords_htmlThe processed content must be paired with|safethe filter to correctly render HTML.

  2. Why did I usetruncatechars_html, but the page still displayed<p>/<a>these tags?This is usually because you forget to add after the output content|safeFilter. The AnQiCMS template engine defaults to HTML encoding all variable outputs to prevent XSS attacks. When you usetruncatechars_htmlProcessed HTML content, if lacking|safeFilter, the escaping mechanism converts HTML tags to their corresponding entity characters (such as<p>becomes&lt;p&gt;），导致浏览器将其显示为普通文本。加上|safe会告诉模板引擎这段内容是安全的，直接按 HTML 渲染。

  3. Can I customize the style or content of the ellipsis?The built-in extraction filter in AnQiCMS currently uses by default...As an ellipsis.These filters mainly handle the truncation logic and HTML structure and do not provide direct parameters to modify the specific content of the ellipsis or its CSS style.If you have specific style requirements, you may need to perform additional processing on the extracted text container after slicing, using front-end JavaScript or CSS rules.