How to cut the specified length of the article title or description in AnQiCMS template and add an ellipsis?

In AnQiCMS template development, we often need to control the length of article titles or descriptions to maintain a tidy and unified visual effect on list pages, card layouts, or other compact display areas.At the same time, habitually adding an ellipsis when the content is truncated can友好ly提示 readers that there is more content here.AnQiCMS powerful template engine built-in rich filters (Filters), making this task extremely simple and efficient.

Understanding the need for content truncation

Whether it is an article list, recommendation position, or SEO meta description, content length limits are common challenges in front-end display.The title or description being too long may destroy the page layout and affect the aesthetics; on the other hand, a short and unified display can enhance the user experience and make the page look more professional.Title) or description (Description）and automatically add ellipsis, it is an indispensable skill in template development.

Core Tools:truncatecharsFilter

The template engine provided by AnQiCMS offerstruncatecharsFilter, this is the most direct and most commonly used method to implement title and description truncation with an ellipsis. Its function is to truncate the string based on the specified character length, and if the length of the original string exceeds this limit, it will automatically add an ellipsis at the end....).

The method of use is very intuitive, you just need to add it after the variable you need to process, through the pipe character|Invoketruncatecharsand pass in the length of characters you wish to retain.

For example, if you want to truncate the article title to 25 characters:{{ item.Title | truncatechars:25 }}

Assumeitem.TitleThe original text is 'AnQiCMS Template Content Extraction Guide: Say goodbye to long-windedness, present article titles and descriptions accurately', then after that,truncatechars:25Processed, the output may be: “AnQiCMS template content extraction guide: Say goodbye to long, concise…”

It is particularly important to note,truncatecharsThe filter counts characters based on UTF-8 when calculating length.This means that even Chinese characters, each character is counted as one character for calculation, which is very friendly and accurate for layout control of Chinese websites.

Process content containing HTML:truncatechars_html

In some cases, the article description (DescriptionMay contain some HTML tags, such as bold, links, etc. If used directlytruncatecharsTruncation may occur, which may cause HTML tags to be cut off and thus damage the page structure or style.

AnQiCMS provides solutions for this situation,truncatechars_htmla filter. It works withtruncatechars的功能类似，但会智能地识别并保留HTML标签的完整性，避免因截断而产生的HTML结构错误，并在适当的位置添加省略号。

When usingtruncatechars_htmlat, it is usually recommended to be paired with|safefilter, to ensure that truncated and processed HTML content can be correctly parsed by the browser, rather than output as plain text.

For example, if you need to truncate a description containing HTML to 80 characters, and ensure that the HTML structure is not destroyed:{{ item.Description | truncatechars_html:80 | safe }}

Another option: truncate by wordtruncatewordsWithtruncatewords_html

AnQiCMS also provides a filter for word segmentation in addition to character segmentation.truncatewordsandtruncatewords_htmlThese filters are particularly suitable for English content because they attempt to truncate at word boundaries to maintain the semantic integrity of the text and avoid cutting off the middle of a word.

The method of use istruncatecharsSimilar to the series, but the number of words you want to keep is entered:

• Extract text purely by word:{{ item.Title | truncatewords:10 }}
• Extract HTML content by word:{{ item.Description | truncatewords_html:20 | safe }}

Application scenarios and code examples

In the article list page, you usually display multiple articles in a loop, and you can flexibly use these filters within the loop:

{# 假设这是文章列表的循环体 #}
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-card">
        <a href="{{item.Link}}">
            {# 截取标题到25个字符，并添加省略号 #}
            <h3 class="article-title">{{ item.Title | truncatechars:25 }}</h3>

            {# 截取描述到60个字符，如果包含HTML则智能处理，并添加省略号 #}
            <p class="article-description">{{ item.Description | truncatechars_html:60 | safe }}</p>

            <span class="read-more">阅读更多</span>
        </a>
    </div>
    {% empty %}
    <p>暂时没有文章内容。</p>
    {% endfor %}
{% endarchiveList %}

In this code block,h3The article title within the label will be truncated to 25 characters, and an ellipsis will be displayed if it exceeds.pThe description within the label will be truncated to 60 characters, and even if the description content includes HTML tags,truncatechars_htmlAlso try to ensure the integrity of these tags to avoid abnormal display on the page. The final|safeFilter is to ensure that the browser can correctly render these texts that may contain HTML.

Summary

AnQiCMS's template filters provide great convenience for website content operators. By simply applyingtruncatecharsandtruncatechars_htmlFilters, you can easily control the length of article titles and descriptions, optimizing the visual effect of front-end display and enhancing the user reading experience.Utilize these tools flexibly, which will make your website content management more efficient and beautiful.

---

Common Questions (FAQ)

1. Why do you usually need to use bothtruncatechars_htmland|safeFilter?

truncatechars_htmlThe filter can intelligently extract strings containing HTML tags and prevent the tags from being damaged.However, AnQiCMS's template engine defaults to escaping all output content to prevent XSS attacks.<p>/<strong>), and hope that these tags can be normally parsed by the browser instead of being displayed as plain text, then intruncatechars_htmlAfter that, it still needs to be added|safeA filter is used to explicitly tell the template engine that this content is safe and does not need to be escaped.

2. What happens if the truncation length I set is longer than the actual title or description?

If the set truncation length (for example)truncatechars:50）is greater than or equal to the actual length of the original string, thentruncatechars(or}truncatechars_html）The filter will not truncate the content or add an ellipsis. It will directly output the original full content.

3.truncatecharsandtruncatewordsWhat are the differences between filters? In what situations should they be used?

truncatecharsis sorted byCharacterTo truncate content, whether it is English letters, numbers, or Chinese characters, each one is counted as a character. It is truncated directly when it reaches the specified length and may cut off the middle of a word.truncatewordsis based onwordsIt will attempt to truncate at the word boundaries to maintain the integrity of each word.

Under normal circumstances:

• If your content isChineseEnglish, or have strict pixel-level layout requirements for character count,truncatecharsThis is a more precise choice.
• If your content isEnglishEnglish, and hope to maintain the integrity of the word when truncated,truncatewordsIt will provide a better reading experience. The corresponding HTML versiontruncatechars_htmlandtruncatewords_htmlIt is used to process content containing HTML tags.