How to effectively display content summaries on a website, which can attract visitors to click while maintaining a tidy page, is a common and important issue.For friends using AnQiCMS, we often need to extract the essence of the document content as a summary to display on list pages, search result pages, or related article recommendation modules.archive.ContentThe maximum number of characters displayed in the abstract.

Understandingarchive.ContentWitharchive.Descriptiondifferences

In AnQiCMS, you will encounter two fields closely related to the article content:archive.Contentandarchive.Description.

  • archive.ContentThis usually refers to the complete text content of a document. It may contain rich HTML tags (such as images, paragraphs, links, etc.), carrying all the information of the article.
  • archive.DescriptionThis field is designed to store a brief description or summary of the document. When you publish the document, if the document introduction is not manually filled in, the AnQiCMS system will automatically fromarchive.ContentExtract the first 150 characters asarchive.Description.

In most cases, when you need to display article summaries on the list page, we strongly recommend using it firstarchive.Description。Because it is born for this purpose, the content is more concise, and it has a default cut-off length. However, in some specific scenarios such asarchive.Descriptionnot filled in, or you want to start fromarchive.ContentIt is necessary to manually truncate it if we need to obtain a summary of a different length.

Use template filters to limit the content length

AnQiCMS's template engine supports Django-like syntax and provides powerful filter (Filters) functions, which can help us easily handle data, including string truncation. It is suitable for content that contains HTML tags.archive.ContentField, we have several very practical filters to choose from.

1.truncatechars_html: Retain HTML structure and cut by character.

This is the processingarchive.ContentThe most recommended method, as it can intelligently extract text while trying to maintain the integrity of HTML tags, to avoid display anomalies on the page due to tag truncation.

Working principle:truncatechars_htmlCalculates the specified number of characters (including any ellipses that may be generated), and attempts to close any incomplete HTML tags when truncating, ensuring that the output HTML is valid.

Usage： In your template file, find the position you are displayingarchive.Contentand replace it with the following format:

{{ archive.Content|truncatechars_html:120|safe }}
  • archive.Content：The original document content you want to extract.
  • |truncatechars_html:120:truncatechars_htmlis the filter name,120The maximum number of characters you want to display. Please note that this number includes the ellipsis that may appear at the end....The number of characters for the parentheses ( ").
  • |safe:This filter is crucial!Due toarchive.ContentContains HTML tags,truncatechars_htmlThe processed result is still HTML. If you don't add|safeThe filter, the template engine will default to escaping HTML tags (for example<p>Will become&lt;p&gt;），causing the page to directly display HTML code instead of parsed content. Plus|safeExplicitly tell the template engine that this content is safe HTML and can be output directly.

Code example： Assume you are on a list page of articles (list.htmlorindex.html) to display the summary of each article:

<div class="article-item">
    <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
    <div class="article-summary">
        {# 优先使用 Description 作为摘要 #}
        {% if item.Description %}
            <p>{{ item.Description }}</p>
        {% else %}
            {# 如果 Description 不存在，则截取 Content 的前120个字符作为摘要 #}
            <p>{{ item.Content|truncatechars_html:120|safe }}</p>
        {% endif %}
        <a href="{{ item.Link }}" class="read-more">阅读更多</a>
    </div>
</div>

2.truncatewords_html：Retain HTML structure and cut by words

If you think it is more suitable for your summary display to cut by words, you can usetruncatewords_html.

Working principle: withtruncatechars_htmlSimilarly, it cuts by words as well and will also try to close HTML tags.

Usage:

{{ archive.Content|truncatewords_html:40|safe }}
  • 40：Indicates the maximum number of words you want to display.

Select suggestions:

  • truncatechars_htmlIt is suitable for scenarios with strict character limits for summary length (for example, to maintain page layout alignment).
  • truncatewords_htmlApplicable when you are more concerned about the semantic integrity of the summary, hoping to end the summary with complete words rather than half words.

3.truncatecharsandtruncatewords: For plain text content

If yourarchive.ContentField ensures that it is plain text (does not contain any HTML tags), or you have removed the HTML tags in some other way before capturing, then you can use these two simpler filters.They do not handle the closing issues of HTML tags.

Usage:

{{ archive.Content|truncatechars:100 }} {# 截取100个字符 #}
{{ archive.Content|truncatewords:30 }} {# 截取30个单词 #}

Note: Due toarchive.ContentThe content usually includes HTML, directly using these two filters may cause damage to the page HTML structure. Therefore, forarchive.Content, you must give priority totruncatechars_htmlortruncatewords_html.

summarizing the implementation steps

  1. Confirm Summary Display Position: Find the template file that needs to display a summary on your website, for example, the article list page (archive/list.htmlorindex.html), search results page (search/index.html) etc.
  2. Locate the content output tagIn this template file, find the variable you use to output document content, which is usually{{ item.Content }}or{{ archive.Content }}.
  3. Apply the clip filterSelect based on your needstruncatechars_htmlortruncatewords_htmlFilter and set the maximum number of characters or words. Don't forget to add|safeFilter.
  4. Save and TestSave the template file, refresh your website page, check if the summary display meets expectations, and whether the HTML structure is normal.

Through the above method, you can flexibly control the display of AnQiCMS templates.archive.ContentField length, making your website content display more beautiful and efficient.

Common Questions and Answers (FAQ)

Q1: Why do I gettruncatechars_htmlAfter, my abstract content still displays HTML code instead of the parsed effect? A1:This is very likely because you forgot totruncatechars_htmlafter the filter|safeFilter. AnQiCMS's template engine defaults to escaping all output HTML content to prevent cross-site scripting attacks (XSS).|safeThe filter explicitly tells the engine that this content is confirmed safe HTML, which can be output and parsed as is without escaping.

Q2: Should I choose to cut by character (truncatechars_html) or by word (truncatewords_html)? What are the differences? A2:It mainly depends on your design preference and semantic requirements.

  • 截取字符 (truncatechars_html)When you need to display the summary with a strictly controlled length within a certain number of characters (for example, for a uniform layout).The disadvantage is that words may be truncated, leading to a slightly discontinuous reading experience.
  • 截取单词 (truncatewords_html)When you pay more attention to the semantic integrity of the summary, it is recommended to end sentences with complete words.The drawback is that the actual number of characters may not be fixed, and it may exceed expectations sometimes....），并尽量保持HTML标签结构的完整性。

Q3: 如果我设定了截取长度，但原始archive.Content内容本身就比这个长度短，会发生什么？ A3:如果原始内容的总长度（或单词数）小于您