As a website operator deeply familiar with the operation of AnQiCMS, I fully understand the intricacies of content presentation.How to elegantly handle the display of text content when building an engaging and user-friendly website experience is a core element.The Anqi CMS, with its flexible Django-like template engine, provides us with powerful content control capabilities, among which the text truncation feature is a commonly used tool for optimizing page layout and enhancing reading experience.

This article will discuss in detail the two core filters used for text truncation in the Anqi CMS template: truncatecharsandtruncatewordsAnd introduce the equally important HTML safe substring method when dealing with rich text content, as well as the application strategies in actual operation.

Understandingtruncatechars: Precisely截取文本 by character

In many scenarios, we need to precisely control the length of text, such as when generating web page meta descriptions, article card summaries, or short prompts. At this time,truncatecharsfilters can come in handy.

truncatecharsThe function is to truncate text based on a specified number of characters. It counts from the beginning of the text, and once the total number of characters reaches or exceeds the threshold you set, the text will be truncated, and an ellipsis will be automatically added at the end....).

Use syntax and example:

In the AnQi CMS template, usetruncatecharssyntax is very concise. You just need to pass the variable you want to extract through the pipe character|connected totruncatecharsFilter it and then append the number of characters you want to keep.

For example, suppose we have a name calledarchive.DescriptionThe variable stores the descriptive content of an article. If we need to truncate it to no more than 50 characters:

{{ archive.Description|truncatechars:50 }}

This code will output intelligently:archive.DescriptionThe first 50 characters. If the original description exceeds 50 characters, an ellipsis will be appended after the 50th character....).

Let's look at a specific example: Ifarchive.DescriptionThe original text is: 'AnQi CMS is an enterprise-level content management system developed in Go language, committed to providing an efficient, customizable, and easy-to-expand content management solution, aiming to become the preferred tool for small and medium-sized enterprises and content operation teams.'

Use{{ archive.Description|truncatechars:30 }}The output will be: 'AnQi CMS is an enterprise-level content management system developed based on the Go programming language, committed to providing efficient and customizable…'Here, even one Chinese character is counted as one character.

UnderstandingtruncatewordsExtract text by words intelligently.

WithtruncatecharsThe number of characters to focus on is different.truncatewordsThe filter focuses on truncating text based on word count.This is especially useful for languages like English that are separated by spaces, as it ensures that the extracted text maintains the integrity of the words, thereby improving readability.truncatecharsSimilar, if the number of words in the original text exceeds the specified value, it will also add an ellipsis at the end....).

Use syntax and example:

truncatewordsThe syntax for using it is the same astruncatecharsMaintain consistency; the only difference is that the parameter passed to the filter represents the number of words:

{{ archive.Description|truncatewords:10 }}

This line of code will output:archive.DescriptionThe first 10 words. If the number of words in the original text exceeds 10, the filter will also add “…” at the end.

For example, with an English description: Ifarchive.DescriptionThe original text is: "AnQiCMS is an enterprise-level content management system developed based on Go language, committed to providing efficient, customizable, and extensible content management solutions, aiming to be the first choice for small and medium-sized enterprises and content operation teams."

Use{{ archive.Description|truncatewords:15 }}

Optimize website content display: When to use text truncation

These text excerpt filters play a crucial role in website content operation, their main goal is to enhance user experience and ensure the cleanliness and consistency of page layout:

On the article or product list page, displaying complete and lengthy content makes the page appear cumbersome and slow to load.By cleverly extracting the summary of content, we can quickly attract the attention of users and stimulate their interest in clicking to learn more details.

For Search Engine Optimization (SEO), controlling the length of Meta Description is crucial. Search engines usually grab the summary of page content as the description for search results, and by usingtruncatecharsWe can ensure that the meta description is of moderate length, avoiding being mercilessly cut off by search engines, thereby optimizing the display effect of search results.

In addition, these filters can also effectively enhance the aesthetic beauty of the website.They ensure visual consistency in page layout for texts of different lengths, avoiding overlong texts from stretching the layout or destroying the meticulously designed visual aesthetics.For example, in card layout, the fixed length of article titles or summaries can make the overall visual effect look more professional and harmonious.

At the early stage of template development, we can also use these filters to generate mock data, making it convenient to test the actual display effect of texts of different lengths on the page, ensuring that the final design can meet the challenges of various content lengths.

Tackling the Rich Text Challenge: Handling Text with HTML Tags

In the process of content creation, we often use rich text editors to input content, which often contains rich HTML tags such as paragraphs, links, images, and bold text. If we directly use text that contains HTML tags such astruncatecharsortruncatewordsIt may destroy the original HTML structure, causing the page to display disorderedly or even have functional exceptions. For example, a tag that is not closed.<div>or<a>Tags may cause the entire page layout to be disrupted.

To address this issue, the Anqi CMS template engine provides a special filter for handling HTML content:truncatechars_htmlandtruncatewords_htmlThese two filters can intelligently recognize and preserve the integrity of HTML tag structure while performing text truncation, ensuring that the page can be correctly rendered after truncation.

truncatechars_htmlExample:

{{ archive.Content|truncatechars_html:100|safe }}

truncatewords_htmlExample:

{{ archive.Content|truncatewords_html:20|safe }}

It should be emphasized particularly that when you usetruncatechars_htmlortruncatewords_htmlWhen handling variables containing HTML content, it is usually also necessary to use `