How to truncate the title or abstract of an article and display it with an ellipsis?

In website content operation, the title and introduction are important elements to attract visitors to click and understand the details.Especially on list pages, recommendation spots, or the homepage, the limited space requires us to refine and trim the content.In order to maintain the neat and beautiful appearance of the page while fully conveying the core information, truncating overly long article titles or summaries and ending with an ellipsis “…” is a commonly used optimization strategy.AnQiCMS (AnQi CMS) provided us with flexible and powerful tools to meet this requirement.

Why should the title and summary be truncated?

Imagine if each title on your website's list page varied in length, with some even taking up two or three lines. This would not only make the page look disorganized but would also significantly reduce the efficiency and experience of browsing. There are several core benefits to truncating titles and summaries:

• Maintain uniform page layout:Ensure that the content is presented in a neat style in different display areas (such as article lists, hot recommendations, related articles, etc.) to avoid page element jumps or misalignments caused by uneven content length.
• Improve reading efficiency:Users can quickly scan multiple titles and summaries, quickly judge whether the content meets their interests, and improve the efficiency of information acquisition.
• Optimize the mobile experience:On smaller mobile devices, concise titles and summaries can better adapt to limited display space, enhancing readability.
• Focus on core information:Encourage content creators to distill the most critical information in the title and summary, allowing readers to grasp the key points at a glance.

The truncation tool in AnQiCMS: A powerful filter

AnQiCMS template engine provides a series of built-in filters (Filters), which can help us process data in various ways, including formatting, conversion, and truncation. To implement the truncation of article titles and summaries with an ellipsis, we mainly usetruncatecharsandtruncatewordsFilters of these families.

These filters are all|Connected by symbols after the variables to be processed, followed by the filter name and parameters.

Understand the four truncation filters and their application scenarios

AnQiCMS provides four main truncation filters to meet different content types and truncation requirements:

1. truncatechars(truncating plain text by characters)

   • Function:This filter will truncate text based on the number of characters you specify.No matter if it is Chinese or English, it will count each character as a unit and add an ellipsis after reaching the specified length.
   • Application scenario:When you need to precisely control the display length of plain text titles or summaries, such as in navigation menus, tags, and other places with strict length restrictions.
   • Example: {{ article.Title|truncatechars:20 }}If the title exceeds 20 characters, it will be truncated and an ellipsis will be displayed.
   • Note:If the truncation position is exactly in the middle of a Chinese character or an English word, it may cause incomplete display.

2. truncatewords(Truncate pure text by word)

   • Function:This filter will truncate text based on the number of words you specify and add an ellipsis after the last complete word. It is moretruncatecharsMore "intelligent", it will not truncate words in progress, thus maintaining the semantic integrity of English content.
   • Application scenario:Mainly used for truncating English titles or summaries, which can avoid ugly displays like 'this is a lo...'.
   • Example: {{ article.Description|truncatewords:15 }}If the introduction exceeds 15 words, it will be truncated.
   • Note:This is invalid for Chinese content because Chinese does not have the concept of 'word'.

3. truncatechars_html(Character-truncate HTML content while retaining tag structure)

   • Function:withtruncatecharsSimilar, it also truncates by character count, but it can intelligently handle content containing HTML tags.It ensures that all opened HTML tags are properly closed while truncating, thus avoiding layout chaos due to incomplete tags.
   • Application scenario:When your profile content may contain bold, links, and other small HTML tags, this filter can help you maintain these styles when truncating.
   • Example: {{ article.Description|truncatechars_html:80|safe }}Indicates a brief description that includes HTML. If it exceeds 80 characters (HTML tags are not counted in the character count), it will be intelligently truncated.
   • Note:When using this filter to process HTML content,Mandatory to add at the end of the filter chain|safeFilter.|safeIt will tell the AnQiCMS template engine that this content is safe HTML and should be rendered directly without escaping.

4. truncatewords_html(Truncate HTML content by word, retaining tag structure)

   • Function:Combined withtruncatewordsandtruncatechars_htmladvantages, truncate English HTML content by word count and retain complete HTML tag structure.
   • Application scenario:Applicable to English summaries containing a small amount of HTML tags.
   • Example: {{ article.Description|truncatewords_html:20|safe }}.
   • Note:It also needs to be配合|safeFilter usage, not applicable to Chinese content.

Practice in AnQiCMS template: taking the article list as an example

In AnQiCMS, you can use the article list (usually usingarchiveListtags) or the article detail page (usingarchiveDetailApply these filters in the template label. Below we show an example of how to apply these truncation filters in a real template:

Suppose you have a template for an article list that needs to display the article title and summary:

{# 使用 archiveList 标签获取文章列表 #}
{% archiveList articles with type="list" limit="10" %}
    {% for article in articles %}
    <div class="article-item">
        <a href="{{ article.Link }}" class="article-link">
            {# 文章标题：按字符截断，最多显示30个字符 #}
            <h3 class="article-title">
                {{ article.Title|truncatechars:30 }}
            </h3>
            {# 文章简介：按字符截断HTML内容，最多显示80个字符，并确保HTML标签正常显示 #}
            <p class="article-description">
                {{ article.Description|truncatechars_html:80|safe }}
            </p>
        </a>
        {# 文章发布时间，使用 stampToDate 过滤器格式化 #}
        <span class="article-date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
    </div>
    {% else %}
    <p class="no-articles">抱歉，目前没有找到任何文章。</p>
    {% endfor %}
{% endarchiveList %}

In this code block:

• {{ article.Title|truncatechars:30 }}It will truncate the article titlearticle.Titleto a maximum of 30 characters.
• {{ article.Description|truncatechars_html:80|safe }}It will truncate the article summaryarticle.DescriptionTruncated to a maximum of 80 characters. Since the introduction may contain HTML (such as bold text), we usetruncatechars_htmlto intelligently handle tags, and use|safeMake sure the HTML code is correctly parsed and displayed by the browser.

In this way, even if your article title or summary content is long, it can be displayed in a unified, tidy, and easy-to-read form on the page.

Caution when using these truncation filters

1. Selection of Chinese content:It is recommended to use Chinese titles and descriptions first fortruncatecharsortruncatechars_html. Because Chinese does not have the concept of 'words' like English, truncatewordsThe series filter does not work effectively.
2. Rendering of HTML content:When processing content that may contain HTML tags (such as summaries generated by rich text editors), usetruncatechars_htmlortruncatewords_htmlIs the correct choice. But remember, at the end of these filters.Must be added.|safe Otherwise, the browser will display the truncated HTML tags as plain text, rather than rendering their effects.
3. Truncation length test: The appropriate truncation length depends on your website design and layout.It is recommended to perform multiple tests on the actual template, observe the effects of different lengths, and choose the value that best balances beauty and information transmission.
4. The ellipsis is automatic: The AnQiCMS truncation filter will automatically add an ellipsis (...) after truncating the content, so you do not need to add it manually.

Summary

In AnQiCMS, by using flexible applicationstruncatechars/truncatewordsAnd its HTML version filter, we can easily implement the elegant truncation and ellipsis display of article titles and summaries.This can greatly enhance the beauty and consistency of the website interface, and it can also optimize the user's reading experience, helping your content stand out among numerous pieces of information.Mastery of these filters will make your website operations more efficient and professional.

Frequently Asked Questions (FAQ)

1. Ask: Can the ellipsis displayed after truncation be customized in style or content?

   • Answer: The AnQiCMS built-in truncation filter automatically adds "..." as an ellipsis.The template engine at this level does not support customizing the style or content of the ellipsis directly.If your design requirements are high, you may need to consider performing a secondary processing of truncated text through JavaScript on the front end to achieve this.

2. Ask: If my article title or introduction is already quite short and does not reach the set truncation length, will an ellipsis still be displayed?

   • Answer: No. These truncation filters of AnQiCMS are very smart.They will only truncate and add an ellipsis when the actual length of the content exceeds the truncation length you set.If the content itself meets the length requirement, it will be displayed in full without any ellipsis