How to truncate a long string and display an ellipsis in AnQi CMS templates?

The flexibility of content display is crucial in the template creation process of AnQi CMS.When we need to display a long text within a limited space, such as an article summary, product description, or brief introduction, truncating the string with an ellipsis is a common optimization method that can effectively maintain the page layout and guide users to click to view the full content.The AnQi CMS is developed based on Go language, its template engine syntax is similar to Django, and it provides powerful filter (filters) functions to easily achieve this requirement.

Skillfully use filters to elegantly truncate strings

In AnqiCMS templates, the core tool for string truncation is the "filter". The filter can perform various transformations and formatting on variables, syntax is concise, usually with a vertical line (|) Connected to the variable name and can take parameters. AnqiCMS provides various practical filters for truncating long strings, which can truncate based on the number of characters or words and intelligently add ellipses.

1. For truncating plain text content:truncatecharsandtruncatewords

When you need to handle plain text content without any HTML tags, you can use:truncatecharsandtruncatewordsfilter.

• truncatechars(Truncated by character count):This filter will truncate the string based on the number of characters you specify. It is worth noting that the truncated length includes the ellipsis added at the end....For example, if you specify truncation to 50 characters, then the actual content will occupy 47 characters, followed by 3 ellipses.

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

  This code will convertitem.DescriptionTruncate text to a maximum of 50 characters (including ellipsis), ensure that the display does not exceed the expected length regardless of the original description, and maintain a uniform layout.

• truncatewords(Truncated by word count):If you want to truncate while maintaining the integrity of the word, rather than breaking in the middle of a word, thentruncatewordsIs a better choice. It will count and retain the specified number of complete words, and then add an ellipsis.

  <h3>{{ item.Title|truncatewords:10 }}</h3>
  

  This will ensureitem.TitleDisplay up to 10 words and add an ellipsis at the end to avoid a harsh reading experience.

2. Truncation for rich text content:truncatechars_htmlandtruncatewords_html

In website operation, many contents, such as the summary of article details, may contain bold, links, images, and other HTML tags. If used directly,truncatecharsortruncatewords, may destroy the HTML structure, causing the page to display abnormally, for example, the tag is not closed.In order to solve this problem, AnqiCMS provides a dedicated truncation filter for handling HTML content.

• truncatechars_html(Truncate HTML by character count and maintain structure):This filter function is withtruncatecharsIt is similar, but it will intelligently identify and maintain the integrity of HTML tags.Even if truncation occurs within the tag, it will ensure that all open HTML tags are closed correctly, thereby generating a valid HTML fragment.

  <div class="summary">{{ archive.Content|truncatechars_html:120|safe }}</div>
  

  When you start fromarchive.ContentSuch a rich text field can be summarized using this filter to ensure that the truncated HTML code is valid and does not break the page style. Note that in order for the HTML content to be rendered correctly rather than escaped as plain text, it must be followed by|safefilter.

• truncatewords_html(Truncate HTML by word count and maintain structure):withtruncatewordsSimilar, but applicable to HTML content. It truncates by word count and maintains the integrity of HTML tags as well.

  <div class="excerpt">{{ archive.Content|truncatewords_html:30|safe }}</div>
  

  This filter is very suitable for generating a concise summary containing a few words from rich text content, while ensuring the integrity of its HTML structure. Similarly, don't forget to use|safe.

Practice Application and **Practice

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

• Plain text description: For articles or productsDescriptionfield is recommended to usetruncatecharsbecause it can accurately control the length of the displayed characters, which is very suitable for fixed-width layouts.
• short title or label:truncatewordsWhen it is necessary to maintain the integrity of words but worry about the length of the title, it can be used, although the actual usage scenario is relatively rare because the title is usually limited in length.
• Rich text summaryWhen extracting part of the content from an articleContentto serve as a summary,truncatechars_htmlortruncatewords_htmlthey are indispensable. They can perfectly balance the length of the content and the integrity of the HTML structure.

Here are some tips:

• Reasonably set the truncation length: A short truncation may lead to insufficient information, while a long truncation may lose aesthetic advantages. It is recommended to test from multiple perspectives according to your design and page layout to find the most suitable length.
• Pair with "View More" linkThe purpose of truncation is to preview, which is usually accompanied by a link to view more or read the full content to provide a complete user experience.
• Always use|safeWhen you go through_htmlWhen processing and outputting content that may contain HTML tags, be sure to add|safeTo avoid the default HTML entity escaping behavior of the template engine, ensure that the HTML code can be correctly parsed by the browser.

By flexibly using these truncation filters, you can easily manage the display of long strings in the AnqiCMS template, enhancing the overall beauty and user experience of the website page.

Frequently Asked Questions (FAQ)

Q1: Does the truncated length include an ellipsis?A1: Yes, when you usetruncatecharsortruncatechars_htmlwhen you specify the number of characters (for exampletruncatechars:50) it will include the final ellipsis (...The characters occupied. This means the actual number of characters displayed will be less than the specified value.

Q2: If my string is already short and does not exceed the truncation length, will the ellipsis still be displayed?A2: Will not. These truncation filters of AnqiCMS will only add ellipses when actual truncation occurs.If the length or word count of the original string does not exceed the truncation value you specify, it will display the string in full without adding an ellipsis.

Q3:|safeWhat is the role of a filter, and when do I need to use it?A3:|safeThe filter informs AnqiCMS's template engine that the string it processes is "safe" HTML code that does not require the default HTML entity escaping. When you display rich text content retrieved from the database (which may contain bold, links, and other HTML tags), or usetruncatechars_html/truncatewords_htmlWhen the filter processes HTML content, in order to ensure that the HTML tags are rendered correctly by the browser rather than displayed as plain text, it is necessary to add to the output variable|safe.