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

Use filters cleverly to elegantly truncate strings

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

1. Truncation for 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 truncation length includes the ellipsis added at the end....）。For example, if you specify truncation to 50 characters, the actual content will occupy 47 characters, followed by 3 ellipses.

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

    This code willitem.DescriptionThe text is truncated to a maximum of 50 characters (including ellipsis), ensuring that the display does not exceed the expected length regardless of the original description, and maintaining a unified layout.

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

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

    This will ensureitem.TitleUp to 10 words are displayed, and an ellipsis is added at the end to avoid a rigid reading experience.

2. Truncation of 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,truncatecharsortruncatewordsIt may break the HTML structure, causing the page to display abnormally, for example, unclosed tags.To solve this problem, AnqiCMS provides a dedicated truncation filter for HTML content.

  • truncatechars_html(Truncate HTML by character count while maintaining 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 opened HTML tags are correctly closed, thus generating a valid HTML fragment.

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

    When you are fromarchive.ContentThis rich text field extracts the abstract, and using this filter ensures that the truncated HTML code is valid and does not destroy the page style. Please 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 application, the choice of truncation filter depends on your specific needs and content type:

  • Plain text description: For articles or productsDescriptionField, usually recommended to usetruncatechars, because it can accurately control the length of the displayed characters, which is very suitable for fixed-width layouts.
  • Short title or label:truncatewordsEnglish
  • EnglishWhen extracting part of the content from the articleContentfrom the field as a summarytruncatechars_htmlortruncatewords_htmlthey are indispensable. They can perfectly balance the length of the content and the integrity of the HTML structure.

Here are some tips:

  • Reasonable setting of truncation length：Short truncation may result in insufficient information, while long truncation may lose aesthetic advantages. It is recommended to test from multiple angles based on your design draft and page layout to find the most suitable length.
  • Pair with 'View More' linkThe purpose of truncation is for preview, which is usually paired with a 'View More' or 'Read More' link pointing to the full content to provide a complete user experience.
  • Always use|safeWhen you go through_htmlFilter and output the content that may contain HTML tags and 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 AnqiCMS templates, enhancing the overall beauty and user experience of the website page.

Common Questions (FAQ)

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

Q2: If my string itself is short and does not exceed the truncation length, will it still display an ellipsis?A2: English.These truncation filters of AnqiCMS only add ellipses when actual truncation occurs.If the length of the original string or the number of words does not exceed the truncation value you specified, it will display the string in full without adding an ellipsis.

Q3:|safeWhat is the function of the filter, and when is it necessary to use it?A3:|safeThe filter informs AnqiCMS's template engine that the string it processes is 'safe' HTML code and does not require 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 filtering HTML content with filters, to ensure that HTML tags are rendered correctly by the browser rather than displayed as plain text, it is necessary to add to the output variable.|safe.