In website content operation, effectively displaying information while maintaining the page's cleanliness and the smoothness of user experience is a crucial link.Especially for long text content, how to truncate display in list pages or overview sections with an ellipsis, is a common technique to improve the readability and aesthetics of websites.AnQiCMS (AnQiCMS) is a feature-rich management system that provides a flexible mechanism to meet this requirement at the template level.

The AnQi CMS template system adopts a syntax style similar to Django, which makes it convenient for content developers to take advantage of built-in filters (Filters) to process text. The core of truncating long text display lies in usingtruncatechars/truncatechars_html/truncatewordsortruncatewords_htmlThese filters.

The core tool for text truncation: filters

When we need to display the summary of an article title or description in an article list, search results, or related content recommendations, these filters come in handy. They all automatically add an ellipsis at the end of the text when it reaches a specified length (...)

  • truncatecharsFilterThis filter truncates text based on the number of characters.No matter Chinese or English, it counts each character as one.|truncatechars:50It will directly insert an ellipsis at the truncation point, even if this truncation point is in the middle of a word.

  • truncatewordsFilterwithtruncatecharsdifferent,truncatewordsIt is truncated by word count. This is especially useful for English content, as it ensures that truncation occurs at the boundaries of words, avoiding incomplete words. For example,|truncatewords:10It will display the first 10 words and add an ellipsis at the end.For Chinese content, due to its characteristic of not separating words with spaces, this filter may treat the entire Chinese paragraph as a single word or process it according to other internal logic, but its advantage is more obvious for mixed text containing English.

Handle rich text content:_htmlVariant

Website content often contains HTML tags, such as bold, italic, links, etc. If used directly,truncatecharsortruncatewordsTo truncate text containing HTML, it may break the HTML structure and cause the page to display abnormally. Anqi CMS provides two very practical variants for this:

  • truncatechars_htmlFilterThis filter is specifically designed to handle long text containing HTML tags.It intelligently truncates text while ensuring that the complete HTML tag structure is preserved, avoiding issues with unclosed tags due to truncation.|truncatechars_html:100Can be truncated while still retaining bold effect.

  • truncatewords_htmlFilterSimilarly, this istruncatewordsThe safe HTML version, which properly handles HTML tags when truncating rich text, ensuring the structure is complete.

Using these two_htmlWhen, if the content itself is obtained from a rich text editor and contains HTML, it usually also needs to be combined with|safefilter usage.|safeThe filter tells the template engine that this content is safe HTML, which does not need to be automatically escaped, ensuring that HTML tags are correctly parsed and displayed by the browser.

Application scenarios in practice

Suppose you are designing a list page of articles, and you need to display the title and summary of each article. You can apply these filters in the template as follows:

{# 假设 archives 是文章列表数据，item 是循环中的每一篇文章 #}
{% for item in archives %}
    <div>
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
        {# 对文章描述进行截断，保留50个字符，并确保HTML结构完整 #}
        <p>{{ item.Description|truncatechars_html:50|safe }}</p>
        <a href="{{ item.Link }}">阅读更多</a>
    </div>
{% endfor %}

here,item.DescriptionIs the detailed description of the article, by|truncatechars_html:50Truncated to 50 characters (if content is too long), and automatically add an ellipsis.|safeEnsureditem.DescriptionThe original HTML tags (such as<strong>) Will not be incorrectly escaped and displayed as plain text.

Summary

AnQi CMS allows content operators to easily control the display of long text through these flexible filters, while maintaining the neat layout of the page and improving the reading experience of users.Whether it is plain text or rich text content, there are corresponding tools to achieve precise and safe truncation processing.

Frequently Asked Questions (FAQ)

Q1: Why does my text get truncated and show some strange characters or HTML tags displaying abnormally?A1: This is usually because you used rich text content containing HTML tagstruncatecharsortruncatewordswithout using its HTML safe version. Please try usingtruncatechars_htmlortruncatewords_htmland make sure to add it when outputting|safeFilter, for example{{ item.Content|truncatechars_html:100|safe }}This can prevent HTML tags from being incorrectly escaped.

Q2: I hope that the truncated text is a complete sentence and not cut off in the middle of a word, can it be implemented?A2: If your content is mainly in English and you want to truncate at word boundaries, you can usetruncatewordsortruncatewords_htmlFilter.They will try to truncate between words.truncatechars_htmlIt also works well.

Q3: The content description field on the AnQi CMS backend is automatically truncated, what is the relationship with the filter in the template?A3: The backend summary content field (for example, if the summary is not filled in when the article is published, the first 150 characters will be automatically extracted) isContent storage layerTruncated. This means that a brief summary has already been created when the content is saved to the database. The filter in the template is used toContent display layerThe truncation is performed. You can choose to use the backend-provided summary, or you can ignore it and directly use the full content in the template (such asitem.ContentUse a filter for more flexible truncation, or perform a secondary truncation on the backend summary to meet specific display requirements.This provides great flexibility, allowing you to apply different truncation strategies to the same content for different display locations (such as the homepage, category page, related recommendations, etc.)