In website content operation, we often encounter scenarios where we need to display long text, such as article summaries, product descriptions, or user comments.If the complete content is displayed directly, it may lead to a long page and disordered layout, affecting the reading experience of users.At this time, the long text is intelligently truncated and an ellipsis (…) is added at the end, making it an elegant and practical solution.Auto CMS is a powerful content management system with a flexible template engine that provides various convenient ways to meet this requirement.

The core tool for efficiently cutting long text content: Template Filter

The template system of AnQi CMS adopts the design philosophy of Django, processing variables through 'filters' to achieve various content formatting.For text truncation, the system has built-in several very practical filters that allow us to easily control the display length of the text.

1. English: According to the number of characters to truncate:truncatechars

The most commonly used and most direct text truncation method istruncatecharsFilter. It will truncate text to the specified number of characters and automatically add an ellipsis to the part that exceeds. It is worth noting that this number of characters includes the ellipsis itself.

For example, if you want to display a 80-character summary of each article on the article list page, you can use it like this:

{{ item.Description|truncatechars:80 }}

Hereitem.DescriptionIt is the long text content you want to truncate80This is the maximum number of characters you want to display.If the original description exceeds 80 characters, it will be truncated at the 77th character and three dots will be added to form an ellipsis.If the original text is less than 80 characters, it will be displayed in full without an ellipsis.This filter is suitable for precise length control of plain text content.

2. Truncate by word count:truncatewords

If your content places more emphasis on the integrity of words rather than the mere length of characters,truncatewordsThe filter would be a better choice. It would truncate based on word count, ensuring that each displayed word is complete, thereby improving the readability.

The usage method is the same astruncatecharssimilar, just the numbers at the end represent the number of words:

{{ item.Description|truncatewords:20 }}

This filter is particularly convenient for processing English content, as it can avoid the issue of half a word due to character truncation, maintaining clear semantics.In a multilingual website, for languages where words are separated by spaces, it can provide a more friendly truncation effect.

3. Smart handling of HTML content extraction:truncatechars_htmlandtruncatewords_html

Sometimes, the text content we extract may contain HTML tags, such as bold, italic, or links. Directly usingtruncatecharsortruncatewordsThis may destroy these HTML structures, causing the page to display abnormally, such as unclosed tags or incorrect styles. Anqi CMS providestruncatechars_htmlandtruncatewords_htmlthese two special filters.

Their magic lies in the fact that, while extracting text, it intelligently preserves and closes all unclosed HTML tags, ensuring that the output HTML code is still valid and structurally complete. This is particularly useful for handling rich text editor-generated content (such as articles'ContentField), and it is very important when displayed on the list page or in the summary area.

The usage is the same as the previous two, but it should be noted that, since the output is HTML content, it usually needs to be配合|safeFilter usage to prevent the template engine from automatically escaping HTML tags:

{{ item.Content|truncatechars_html:150|safe }}

or

{{ item.Content|truncatewords_html:50|safe }}

Pass_htmlFilters, you can safely extract rich text content without worrying about damaging the page layout and functionality.

How to choose the appropriate cutting method?

In practical applications, the choice of filter depends on your specific needs and content characteristics:

  • For plain text titles, short sentences, aiming for fixed length, and not concerning the integrity of the wordsUsetruncatecharsFor example, the title summaries of news lists.
  • For English abstracts, pursuing the integrity of words, ensuring clarity of meaningUsetruncatewords. For example, a brief introduction to blog articles.
  • For rich text content containing HTML tags (such as the first part of an article)to avoid destroying the page structure, please make sure to usetruncatechars_htmlortruncatewords_htmland combine.|safeFilter output.

Practical suggestions and **practice

These截取methods are widely used in the template design of Anqi CMS.You can flexibly use it in areas that require a brief preview of the content, such as the article list page, product display page, category page, etc.Suggested to set different truncation lengths when designing, according to different display areas and device types (such as PC or mobile end), to achieve **the user experience.For example, you may want to truncate the number of characters (such as 40) on the mobile list page, while on the PC side, it can be appropriately relaxed (such as 100).Maintain consistent truncation length, which can also make the page look neater.

Passtruncatechars/truncatewordsIts HTML version filter, Anqi CMS provides powerful text processing capabilities to website operators, making the display of long text content both beautiful and practical.Reasonably utilizing these features will greatly enhance the user experience and content presentation quality of your website.

Common Questions (FAQ)

Q1:truncatecharsandtruncatewordswhether the truncation length includes an ellipsis?A: Yes,truncatecharsWhen calculating the截取 length,Is containedthree ellipses (…) are automatically added at the end. For example, if you set the 截取