How to efficiently and elegantly manage and display long text content in website operations, avoiding page redundancy or layout confusion, is a common but critical challenge.AnQiCMS provides flexible and powerful template tags and filters, helping us finely control the display length of text.wordwrapThe filter can implement simple line breaks based on character count, but it may not be smart enough to handle rich text content and may not meet all truncation needs.

It is fortunate that AnQiCMS is not justwordwrapThis is a method.By cleverly utilizing its built-in filters and content management mechanisms, we can achieve more refined and user-friendly long text length control.Let's explore these practical methods together.

Smart text extraction:truncatecharsWithtruncatewordsSeries of filters

In many cases, we need to truncate a long text into a brief abstract and add an ellipsis at the end. AnQiCMS provides several filters specifically designed for this purpose.

  1. Truncate by character count:truncatecharsThis filter will calculate the number of characters from the beginning of the text, truncate after reaching the specified length, and automatically add an ellipsis at the end....）。它适用于需要严格控制字符总数的场景，但要注意，它可能会在单词中间截断，对于英文单词可能不够友好，而且如果文本包含 HTML 标签，直接使用可能破坏标签结构。

    {{ item.Description|truncatechars:50 }}

  2. Truncate by word count:truncatewordsWithtruncatecharsIt is similar, but it truncates by words, which usually maintains better readability for English content.It will truncate after reaching the specified word count and add an ellipsis.Similarly, if the content includes HTML tags, using them directly may also lead to tag confusion.

    {{ item.Description|truncatewords:15 }}

  3. HTML-friendly truncation:truncatechars_htmlWithtruncatewords_htmlThis is a powerful tool for handling rich text content. When your long text (such as the main body of an article)Contentfield) contains various HTML tags,truncatecharsortruncatewordsIt could lead to unclosed tags, thus destroying the page layout.truncatechars_htmlandtruncatewords_htmlWill intelligently parse HTML structures, ensuring all tags are properly closed during truncation to avoid display issues. Don't forget to add these filters when using them.|safeFilter to ensure that HTML content is parsed correctly rather than being escaped. For example, safely extract the first 100 characters (including HTML structure) from the article content:

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

    If you want to truncate rich text by word count:

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

    These filters are the preferred choices for extracting summaries from articles, products, or single page details. They can effectively avoid HTML structure issues caused by truncation.

Precise extraction of segments:sliceFilter

If your requirement is not based on "abstract" fuzzy truncation, but rather needs to extract a fixed-length segment starting from a specific position in the text,sliceFilter will be very useful. It is similar to substring operations in programming languages, where you can specify the start and end indices. Its syntax is{{ obj|slice:"start:end" }}[en] It should be noted that,sliceThe filter does not care about word or HTML structure; it simply splits by character position. For example, to get the first 200 characters of the article content:

{{ item.Content|slice:"0:200"|safe }}

or start from the 50th character and take 100 characters:

{{ item.Content|slice:"50:150"|safe }}

sliceSuitable for specific scenarios, such as when you are sure that the text structure is simple or you do not need to preserve the complete HTML structure, for quick and accurate character extraction.

Use content structure: Built-in summary field

AnQiCMS has already taken into account the display of long text in content management design. In "Add documentContent) field, usually, there will also be a "document introduction" or "category introduction" (Description) field.DescriptionFields are naturally designed to carry a brief summary of the content. When you fill in the background, you can manually edit a concise introduction. What's more convenient is that if you don't fill it in manuallyDescription，AnQiCMS 会智能地从Content字段中自动提取一段文本作为简介。 在列表页、首页推荐等需要展示摘要的场景，Prefer to use{{ item.Description }}is the most recommended practice. This can:

  • reduce the front-end rendering burden: Descriptionthe field is usually well-handled, with a moderate length.
  • Improve content management efficiency:The operator can directly control the summary content or rely on the system to generate it automatically.
  • Keep the template neat:There is no need to use the truncation filter repeatedly in the template, making the code more concise.

Only whenDescriptionThe field itself is too long, or you have special requirements, then consider using it.DescriptionApply the field againtruncatechars_htmlFilter.

Flexible conditional judgment: CombinelengthFilter is related toiftags

Sometimes, we want to decide how to display based on the actual length of the text.If the text is short, display the full text; if the text is long, display the truncated content and provide a "View More" link.lengthfilters andifLogic judgment tags come into play.lengthThe filter can obtain the actual character count of a string. For example, check the length of the article content: 

{% if item.Content|length > 200 %}
    {{ item.Content|truncatechars_html:200|safe }}
    <a href="{{ item.Link }}">查看更多</a>
{% else %}
    {{ item.Content|safe }}
{% endif %}

This method provides great flexibility, allowing you to provide customized display strategies for text content of different lengths, thereby optimizing the user experience.

Integrated application and **practice

In practical applications, you can combine the above methods as much as you like to achieve the **display effect and user experience:**

  • List page/Summary area:Prefer to use{{ item.Description }}.DescriptionStill too long or needs more fine control, apply it totruncatechars_htmlortruncatewords_html.
  • Related recommendations/side栏摘要 in the content detail page:Similarly, it can be utilizedDescriptionOr onContentApply HTML-friendly truncation filter.
  • Need precise control over non-HTML text by bytes or characters:ConsidersliceFilter.
  • Dynamic display:Combinelengthfilters andifLabel, determined by the actual length of the text.

Through these diverse tools, AnQiCMS enables you to bid farewell to the single era of long text content processing, making it more flexible and intelligent to control the display of website content, thereby enhancing the overall reading experience and page aesthetics.

Common Questions (FAQ)

1.truncatecharsandtruncatechars_htmlWhat are the main differences?

The main difference lies in the way HTML tags are handled.truncatecharsWhen truncating, the HTML structure is not considered, which may cause tags to be unclosed and thus damage the page layout.truncatechars_htmlIt will intelligently parse HTML, ensuring that tags are properly closed after truncation, even if the content is shortened, to ensure the validity of the HTML structure. Therefore, when handling rich text content, it should be prioritized to usetruncatechars_html.

2. I want to display the article summary on the list page, which field or method should be prioritized?

It is strongly recommended to prioritize the built-in "summary" of the article, product, or single page.DescriptionThe field.This field is specifically used to store summary information, you can edit it manually in the background, and AnQiCMS will automatically extract it from the body if you do not fill it in.This can reduce the complexity of the front-end template and allow content operation personnel to control the abstract content more accurately.DescriptionIt is still too long or requires special handling before considering applying ittruncatechars_htmlFilter.

3. If I truncate a long title or key information for display, will it affect search engine optimization (SEO)?

In most cases, truncating display text on the front-end page (such as displaying summaries on list pages) does not directly affect SEO.The search engine mainly captures the content from the source code of web pages.<title>tags,meta description标签是为 SEO 优化过的完整内容，那么前端显示上的截断是不会有负面影响的。AnQiCMS 提供了专门的“SEO标题”、“关键词”和“描述”字段，请确保这些字段内容完整且 English