When operating website content, the length of the article abstract (Description) displayed on the list page is crucial for the tidiness of the page and the user experience.An overly long summary can make the page look bulky and difficult to quickly browse, while a short one may fail to attract readers to click.AnQiCMS as a feature-rich content management system, provides flexible template tags and filters, allowing us to easily implement precise control over the number of characters displayed in article abstracts, and automatically add elegant ellipses.

Understand the source of the article abstract (Description)

In AnQiCMS backend, when we publish or edit articles, we usually see a field called "Document Summary" or "Document Description".Here is the content filled in, which is what we commonly call the article abstract (Description).According to the document prompt, it is recommended to keep the summary within 150 words. Even if it is not manually filled in, the system will automatically extract the first 150 words of the article content as the summary.

However, the word limit of this background mainly affects data storage and search engine optimization (SEO), and it will not directly affect the actual display length of the summary on the front-end list page.When displaying on the front end, the template will default to outputting the complete Description content, therefore, we need to further control at the template level.

AnQiCMS template tag: article abstract in the list

We usually use in AnQiCMS,archiveListTag to get the list of article data, andforloop through these article items. Each article objectitemcontainsDescriptionfield, we can call it directly to display the summary.

An article list template snippet might look something like this: 

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <h5><a href="{{item.Link}}">{{item.Title}}</a></h5>
        <p>{{item.Description}}</p> {# 此时显示的是完整的摘要内容 #}
        <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
    </li>
    {% endfor %}
{% endarchiveList %}

As you can see,{{item.Description}}It will directly output the full abstract of the article. To make the list page more beautiful and unified, we need to truncate the abstract content here.

Introduce an efficient filter: accurately control the length of the abstract

AnQiCMS's template engine is built-in with powerful filter functions, which can perform various operations on output variables, including string truncation that we need.truncatecharsandtruncatechars_htmlIs a powerful assistant that controls the length of the summary and automatically adds an ellipsis.

  1. truncatecharsIs suitable for plain text summaries

    When the content of the article summary is plain text and does not contain any HTML tags,truncatecharsFilter is your ideal choice. It will truncate the string according to the number of characters you specify and automatically add an ellipsis at the end....).

    The usage method is very intuitive:{{ obj|truncatechars:number }}where,objis the variable you want to process.numberIt is the number of characters you wish to retain (including the ellipsis).

    For example, if you want to truncate the abstract to 80 characters:

    <p>{{item.Description|truncatechars:80}}</p>

  2. truncatechars_html: Handles rich text abstract

    Considering that many article summaries may contain bold, links, paragraphs, and other HTML tags, a direct use oftruncatecharsThe HTML tags may be truncated, causing the page to display incorrectly. AnQiCMS providestruncatechars_htmlFilter.

    truncatechars_htmlThe intelligent aspect lies in its ability to recognize and preserve the integrity of HTML tags, ensuring that the content after extraction is still a valid HTML structure, thereby avoiding chaos in page layout.At the same time, it will also automatically add an ellipsis after truncation.

    However, when usingtruncatechars_htmlWhen, there is a very important detail to pay attention to: you must combine|safeFilter used together.|safeThe filter tells the template engine that this content is safe HTML and does not need to be escaped; it can be rendered directly.If not, the HTML tag after truncation will be displayed as plain text.

    Usage:{{ obj|truncatechars_html:number|safe }}.

    For example, the abstract containing HTML should be truncated to 120 characters:

    <p>{{item.Description|truncatechars_html:120|safe}}</p>

  3. Other options:truncatewordsandtruncatewords_html

    If you prefer to truncate the summary by word count rather than character count (which is more common on foreign websites), AnQiCMS also providestruncatewordsandtruncatewords_htmlThese two filters. Their functions aretruncatecharsandtruncatechars_htmlsimilar, but the unit of truncation has become "words".

    For example:

    <p>{{item.Description|truncatewords:20}}</p>
<p>{{item.Description|truncatewords_html:25|safe}}</p>

Practice in the template: code example

Let us apply these filters to the actual article list template.

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <h5><a href="{{item.Link}}">{{item.Title}}</a></h5>
        {# 假设文章摘要是纯文本，截取80个字符 #}
        <p class="article-description-text">{{item.Description|truncatechars:80}}</p>

        {# 假设文章摘要可能包含HTML标签，截取120个字符并安全渲染 #}
        {# 如果你的Description字段可能含有HTML，强烈推荐使用truncatechars_html和safe #}
        <div class="article-description-html">
            {{item.Description|truncatechars_html:120|safe}}
        </div>

        <span class="article-date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        <a href="{{item.Link}}" class="read-more">阅读更多</a>
    </div>
    {% endfor %}
{% endarchiveList %}

Through the above examples, you can flexibly select the appropriate filter based on the actual content type and design requirements, and adjust the number of characters to be extracted.

Tips for optimizing abstract display

  • Maintain consistency:Throughout the list pages of the entire website, try to maintain consistency in the number of characters displayed in the article summary, which helps enhance the overall aesthetics and professionalism of the page.
  • Moderate word count:It is not advisable to truncate text too short, as readers may not understand the meaning of the abstract; nor should it be too long, as it loses the simplicity of the list page. Generally, it is recommended to be between 80-150 characters.
  • Consider SEO:Although the frontend截取 does not directly affect SEO, the length and quality of the abstract are still important factors to attract user clicks.Ensure that the abstract still accurately conveys the core content of the article.
  • Multi-device testing:Test your list page on different devices (PC, mobile phone, tablet), ensure that the abstract displays well on various screen sizes and avoids unexpected layout issues.

AnQiCMS through its flexible template tags and filters provides powerful tools for content operators to control the way content is displayed on the front end.Master these skills, and you'll be able to make your website content list more attractive and improve the overall user experience.

Common Questions (FAQ)

Q1：Why is the full long content displayed in the article summary on the front-end list page, even though I have set the summary word limit (e.g., 150 words) in the background?

A1：The summary word limit set in the background is mainly a recommended constraint for the "document abstract" field stored in the database, and it may also serve as a reference when the document is potentially indexed by search engines in certain SEO scenarios.It does not directly control the display method of content in the front-end template.archiveListLabel cyclic output articles) and combinetruncatecharsortruncatechars_htmlUse filters to manually control.

Q2: I usedtruncatechars_htmlFilters to extract the abstract, but the HTML tags on the page (such as<p>/<strong>This is displayed directly instead of being rendered in style, what's going on?

A2: This is usually because you forgot totruncatechars_htmladd after the filter|safeFilter. AnQiCMS template engine defaults to escaping all output HTML content for safety to avoid potential XSS attacks.truncatechars_htmlAlthough it intelligently extracts HTML and maintains its structure, it still outputs HTML in string form. You need to explicitly use|safeThe filter tells the template engine that this HTML content is safe and can be directly parsed and rendered by the browser. The correct syntax is{{item.Description|truncatechars_html:120|safe}}.

Q3: In addition to character or word truncation, does AnQiCMS support controlling the length of the abstract based on the number of images in the abstract content or the number of specific HTML tags?

A3：AnQiCMS内置的Englishtruncatechars/truncatewordsIts HTML version filter is mainly for truncating characters and word count.Currently, the default template tags and filters do not provide a direct function to control the summary length based on the number of images or specific HTML tag counts.Description字段进行更复杂的处理，或者通过自定义的模板函数或过滤器来实现English