In website content operations, we often encounter such needs: In order to keep the page layout neat and the reading experience smooth, it is necessary to truncate the long text (whether it is plain text or content containing HTML tags) and add an ellipsis at the end.AnQiCMS provides very practical template filters that can help us accurately complete this task, while ensuring that the display of content is both beautiful and does not destroy the HTML structure.

Understand the requirements of extracting with AnQiCMS solution

Imagine, in an article list, each article's summary is of different lengths. If the full content is displayed directly, the page will look disorganized.Or on the search engine results page, we need to control the number of words in the summary to adapt to the display rules of the search engine.AnQiCMS uses syntax similar to the Django template engine, with built-in powerful filters that can easily handle these text truncation issues.These filters are particularly special in that they can not only handle plain text but also intelligently handle content containing HTML tags, avoiding page rendering errors caused by truncation and unclosed tags.

For extracting pure text content

For plain text content without any HTML tags, AnQiCMS provides two main ways of truncation: by character count and by word count.

  1. 截取字符数：truncatecharsWhen you need to strictly control the number of characters in the content,truncatecharsThe filter is your preference. It starts counting from the beginning of the text and truncates the text at the character count you set, adding three dots (…) at the end as an ellipsis.This set character count includes an ellipsis.

    For example, if you want the article title to display a maximum of 15 characters in the list, you can use it like this:{{ item.Title|truncatechars:15 }}Ifitem.TitleIs "AnQi CMS: How to accurately extract strings or HTML content and add an ellipsis", it may be displayed as "AnQi CMS: How to accurately extract…".

  2. Truncate by word count:truncatewordsIf your content is mainly in English or separated by spaces, and you are more concerned about maintaining the integrity of the words, thentruncatewordsThe filter would be more suitable. It counts words until the number of words you set is reached. And withtruncatecharssimilarly, if the content is truncated, an ellipsis will also be added at the end.

    For example, if an English description is{{ item.Description|truncatewords:5 }}Content is "AnQiCMS is a powerful and flexible CMS platform." It may be displayed as "AnQiCMS is a powerful and flexible...".

Intelligent extraction for HTML content

Directly truncating content containing HTML tags often leads to unclosed tags, which can damage the page layout and even cause security issues. AnQiCMS is aware of this and therefore provides a special intelligent extraction filter for HTML content:

  1. Truncate HTML by character count:truncatechars_htmlThis filter is compatible withtruncatecharsSimilar, it is also cut according to the number of characters, but its intelligence lies in recognizing and retaining the integrity of HTML tags.This means that even if the truncation point falls in the middle of a tag, it will ensure that the tag is closed properly, thus avoiding page chaos.Similarly, an ellipsis will be added if the content is truncated.

    When used, since the content contains HTML, in order to allow the browser to parse it correctly, we usually need to cooperate with|safefilter.|safeIt tells the template engine that this content is safe and does not need to be HTML escaped.

    For example, a document'sContentfield contains formatted HTML content:{{ archive.Content|truncatechars_html:100|safe }}If yourContentIs<p>这是一个<b>很长很长</b>的段落，其中包含各种<em>格式化</em>的文本。</p>,truncatechars_htmlEnsure during extraction<p>/<b>/<em>Labels should be closed correctly, output similar<p>这是一个<b>很长很长</b>的段落，其中包含各种<em>格式化</em>...</p>The content.

  2. Extract HTML by word count:truncatewords_htmlwithtruncatewordsSimilarly, this filter trims HTML content by word count and also intelligently handles the closure of HTML tags.When processing English HTML content, it can better maintain the integrity of semantics.Use it in the same way|safefilter.

    For example:{{ archive.Description|truncatewords_html:20|safe }}

Application scenarios and **practice

These exquisite extraction tools can play a role in every corner of the website:

  • Article/Product List Summary:Use on the article or product list page,truncatecharsortruncatewordsCUT the title and description to make the list look more tidy.
  • Category Description:At the top of the category page, if the category description is too long, you cantruncatechars_htmlmake a reasonable cut and provide a 'Read More' option.
  • SEO TDK (Title, Description, Keywords):Although TDK usually has special settings fields, if you need to generate them dynamically from content, truncation filters can help you control the length to adapt to the character limits imposed by search engines on meta descriptions and titles.
  • Navigation menu or sidebar short hint:In areas that require brief text prompts, these filters ensure that the text will not overflow the layout.

When using these filters, there are a few points to note:

  • Consideration of length:The length of the extract should be determined based on the actual layout (PC端, mobile end) and content type (title, description). For example, mobile end usually requires a shorter summary.
  • |safeThe importance of:Process any content containing HTML (such as that generated by rich text editors)ContentorDescriptionwhen dealing with the field_htmlafter the filter extraction, be sure to add|safeOtherwise, the browser will display HTML tags as plain text instead of parsing them.
  • Ellipsis behavior:The truncation filter adds an ellipsis only when the content is actually truncated. If the original content length is already less than or equal to the set truncation length, no ellipsis will be added.

Example: Extract the title and description on the article list page

Suppose we have an article list that needs to display the article title and a brief description.

<div class="article-list">
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
        <div class="article-item">
            <h3 class="article-title">
                <a href="{{ item.Link }}">{{ item.Title|truncatechars:30 }}</a> {# 标题截取为30个字符 #}
            </h3>
            <div class="article-description">
                {# 描述可能包含HTML，截取为120个字符，并确保HTML安全显示 #}
                {{ item.Description|truncatechars_html:120|safe }}
            </div>
            <p class="article-meta">
                <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>浏览量: {{ item.Views }}</span>
            </p>
        </div>
        {% empty %}
        <p>目前还没有文章。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 如果需要分页，可以添加分页标签 #}
    {% pagination pages with show="5" %}
        <div class="pagination-controls">
            {# ... 分页链接代码 ... #}
        </div>
    {% endpagination %}
</div>

By flexibly using these excerpt filters provided by AnQiCMS, you can easily manage and display website content, ensuring high-quality reading experiences in various layouts.

Frequently Asked Questions (FAQ)

Q1: If the length of the original content does not reach the truncation length, will an ellipsis be added?A1: No. AnQiCMS's truncation filter will only add an ellipsis to the actual truncated content.If the character count or word count of the original content is less than or equal to the truncation length you set, the content will be displayed in full and no ellipsis will appear.

Q2: Can you customize the ellipsis style or content added after truncation (for example, displaying characters other than “…”)?A2: Currently built-in to AnQiCMS'struncatechars/truncatewordsand its HTML version filter, the default is to use three English periods “…” as an ellipsis, and this cannot be customized directly through parameters.If you have more advanced customization needs, you may need to perform additional data processing or use JavaScript to implement it.

Q3: If I forget to use a filter for HTML content_html(such as only usingtruncatechars) or forget to add|safeWhat will happen?A3: If you only use HTML tags for contenttruncatecharsThis could lead to incorrect truncation of HTML tags, causing layout chaos on the page, because ordinary character truncation does not understand HTML structure. If you forget to add it after truncation|safeThe browser will display the HTML tags in the content as plain text, for example, you will see<p>这是<b>一段文字</b>...</p>Instead of the parsed style. More serious is that if the content contains malicious scripts, it has not|safeThe content is made safe by the default HTML escaping mechanism, but if used incorrectly|safewithout being processed_htmlThe processing of the filter may introduce cross-site scripting (XSS) risk. Therefore, when handling HTML content, it is necessary to use it simultaneously._htmlFilters and|safe.