In website content operation, the title and introduction are important elements to attract visitors to click and learn more details.Especially on the list page, recommendation area, or homepage display, the limited space requires us to refine and cut these contents.To maintain the neat and beautiful appearance of the page while fully conveying the core information, truncating excessively long article titles or summaries and ending with an ellipsis “…”, is a commonly used optimization strategy.AnQiCMS (English) provides 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 varies in length, some even taking up two or three lines. This not only makes the page look disorganized but also greatly reduces the efficiency and experience of users browsing. There are several core benefits to truncating titles and summaries:

  • Maintain the uniform layout of the page:Ensure that the content is presented in a consistent style across different display areas (such as article lists, featured recommendations, related articles, etc.) to avoid page element jitters or misalignment due to varying content lengths.
  • Improve reading efficiency:Users can quickly scan multiple titles and summaries, quickly judge whether the content is in line with their interests, and improve information acquisition efficiency.
  • Optimize mobile experience:On smaller mobile devices with limited screen size, concise titles and summaries can better adapt to the restricted display space, enhancing readability.
  • Focus on core information:Prompt content creators to refine the most critical information in the title and synopsis, allowing readers to grasp the key points at a glance.

The truncation tool in AnQiCMS: A powerful filter

AnQiCMS's template engine provides a series of built-in filters (Filters) that can help us process data in various ways, including formatting, conversion, and truncation, etc. To implement the truncation of article titles and abstracts and display ellipses, we will mainly usetruncatecharsandtruncatewordsThese families of filters.

All these filters are|connected with symbols after the variables that need 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(truncation by characters for plain text)

    • Function: This filter will truncate the text based on the number of characters you specify.No matter whether you are in Chinese or English, it counts a character as a unit and adds an ellipsis when it reaches 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, etc., where there are strict length restrictions.
    • Example: {{ article.Title|truncatechars:20 }}Represents the title will be truncated and displayed with an ellipsis if it exceeds 20 characters.
    • Note:If the truncation position is exactly in the middle of a Chinese character or an English word, it may cause the display to be incomplete.

  2. truncatewords(Truncate plain 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 better thantruncatecharsMore "intelligent", it will not truncate words in progress, thus maintaining the semantic integrity of English content.
    • Application scenario: Mainly suitable for truncating English titles or summaries, which can avoid the unattractive display like "this is a lo…".
    • Example: {{ article.Description|truncatewords:15 }}Indicates a brief description that will be truncated if it exceeds 15 words.
    • Note:Invalid for Chinese content because Chinese does not have the concept of 'words'.

  3. truncatechars_html(Truncate HTML content by character, retaining tag structure)

    • Function: WithtruncatecharsSimilar, it truncates based on character count as well, but it can intelligently handle content containing HTML tags.It ensures that all open HTML tags are properly closed while truncating, thus avoiding layout chaos due to incomplete tags.
    • Application scenario: When your bio content may contain bold, links, and a few other HTML tags, this filter can help you maintain these styles after truncation.
    • Example: {{ article.Description|truncatechars_html:80|safe }}Represents a summary that includes HTML. If it exceeds 80 characters (HTML tags are not counted), it will be intelligently truncated.
    • Note:When using this filter to process HTML content,Must be added 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(Cut HTML content by word, retaining tag structure)

    • Function: Combined withtruncatewordsandtruncatechars_htmladvantages, cut English HTML content by word count while retaining the 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:Also requires cooperation.|safeFilter usage is applicable, but not for Chinese content.

In AnQiCMS template practice: taking the article list as an example

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

Assume you have a template for a list of articles 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 display the article titlearticle.Titletruncated to a maximum of 30 characters.
  • {{ article.Description|truncatechars_html:80|safe }}It will display 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 using|safeEnsure the HTML code is parsed and displayed correctly by the browser.

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

注意事项 when using these truncation filters

  1. Selection of Chinese content:It is recommended to use Chinese titles and descriptions firsttruncatecharsortruncatechars_html. Because Chinese does not have the concept of 'word' like English,truncatewordsSeries filters do not work effectively.
  2. Rendering of HTML content:When handling content that may contain HTML tags (such as summaries generated by rich text editors), usetruncatechars_htmlortruncatewords_htmlIt is the correct choice. But please note, at the end of these filters.must be added|safeOtherwise, the truncated HTML tags will be displayed as plain text by the browser instead of rendering their effects.
  3. Truncation Length Test:The appropriate truncation length depends on your website design and specific layout.Suggest testing multiple times in the actual template, observe the effects of different lengths, and choose the value that best balances aesthetics and information delivery.
  4. Ellipsis is automatic:AnQiCMS' truncation filter will automatically add an ellipsis “…” after truncating the content, and you do not need to add it manually.

Summary

in AnQiCMS, by flexibly usingtruncatechars/truncatewords及其HTML版本过滤器，我们可以轻松地实现文章标题和简介的优雅截断和省略显示。This not only greatly enhances the aesthetic and consistency of the website interface, but also optimizes the reading experience for users, helping your content stand out among a sea of information.Mastery of these filters will make your website operation more efficient and professional.

Common Questions (FAQ)

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

    • 答：AnQiCMS内置的截断过滤器会自动添加“…”作为省略号。Currently, the template engine does not support customizing the style or content of this ellipsis directly.If your design requirements are high, you may need to consider performing secondary processing on the truncated text through JavaScript on the frontend.

  2. 问：If my article title or summary is already short and does not reach the set truncation length, will the ellipsis still be displayed?

    • 答：Will not.These truncation filters of AnQiCMS are very intelligent.They will only truncate and add an ellipsis when the actual length of the content exceeds the truncation length you set.