How to efficiently and beautifully display article lists or cards on a website, while avoiding long content taking up too much space, is a common challenge.Especially on the homepage, category page, or search results page, we often need to extract a part of the article content as a summary and elegantly add an ellipsis at the end to guide visitors to click and view the details.AnQiCMS fully considers the needs of content operators, making this operation very simple and intuitive through flexible template tags and powerful filters.

How does AnQiCMS handle article abstract content?

Firstly, understanding how AnQiCMS retrieves the abstract content of articles is crucial.In AnQiCMS backend, when you 'add document', there will be a special 'document introduction' field.This field is designed for you to manually fill in a brief introduction of the article.If this field is not filled in, AnQiCMS is also very intelligent and it will automatically extract the first 150 characters from the 'document content' as the default document introduction.This means that, whether you manually write an abstract or not, AnQiCMS can provide you with a basic abstract content.

In the template, we usually go througharchiveListtags to get the list of articles, each article itemitemAll contain aDescriptionField, this is the core content we use to display the summary.

Use template filters to implement summary truncation and ellipsis addition.

AnQiCMS is developed based on Go language, but its template engine syntax is very close to Django templates, making it easy to understand and get started.To achieve automatic extraction of the abstract and the addition of ellipses, AnQiCMS is built-in with a series of powerful 'filters' (Filters) that can directly act on template variables to meet various text processing needs.

1. Truncation for plain text content:truncatecharsandtruncatewords

When your summary content is plain text and does not contain any HTML tags, you can usetruncatecharsortruncatewordsFilter.

  • truncatechars(truncated by character count)This filter will truncate text according to the number of characters you specify and automatically add an ellipsis ("...") at the truncation position.It will calculate strictly by the number of characters, even if it cuts off half of a word, it will cut directly.

    For example, if you want the summary to display only the first 50 characters:

    {{ item.Description|truncatechars:50 }}

    Whether it is English, Chinese or other languages,truncatecharsit can accurately truncate by the number of characters and automatically handle ellipses.

  • truncatewords(Truncated by word count)If you prefer to maintain the integrity of the word, avoiding breaking it in the middle, thentruncatewordsIt is a better choice. It will truncate the text according to the number of words you specify and add an ellipsis at the end.

    For example, if you want to display the first 20 words:

    {{ item.Description|truncatewords:20 }}

    This filter is particularly suitable for English content, making the extracted summary more readable.

2. Intelligent extraction for rich text content:truncatechars_htmlandtruncatewords_html

很多时候，文章的简介或摘要可能包含一些简单的 HTML 标签，比如加粗、斜体或者链接。如果直接使用 EnglishtruncatecharsortruncatewordsExtracting such rich text may cause the HTML structure to be destroyed and the page to display abnormally. To solve this problem, AnQiCMS provides a special filter for processing HTML content: truncatechars_htmlandtruncatewords_html.

这两个过滤器不仅能按字符或单词数量截取内容并添加省略号，更重要的是，它们会在截取时智能地修复被破坏的 HTML 标签，确保输出的 HTML 结构依然完整有效。使用这些过滤器时，为了让浏览器正确解析 HTML，我们还需要配合|safeFilter.

  • truncatechars_html(Truncate HTML content by character count)For example, truncate the first 100 characters of an article that contains HTML:

    {{ item.Content|truncatechars_html:100|safe }}

    Hereitem.Content通常代表文章的完整内容字段，如果你希望用文章正文而非“文档简介”生成摘要，这个过滤器就显得尤为重要。

  • truncatewords_html(Truncate HTML content by word count)For example, truncate the content of an article containing HTML to the first 50 words:

    {{ item.Content|truncatewords_html:50|safe }}

    Similarly,|safeEnsure that HTML content is not escaped as plain text.

Actual operation and selection

In practical applications, the choice of filter depends on your specific needs and the characteristics of the summary content:

  1. Summary content source:If you primarily use the "Document Summary" field and usually treat it as plain text,truncatecharsortruncatewordsit would be very suitable.
  2. Does the content contain HTML:If the abstract may contain styles or links, or if you directly extract the summary from the article bodyContentthentruncatechars_htmlortruncatewords_htmlit is required, ensuring the neatness and correctness of the page layout.
  3. Extraction granularity:The length of the fixed character or the number of words to be truncated depends on the design preference. For example, in the Chinese context,truncatecharsIt is often more commonly used, because Chinese characters do not have a clear 'word' concept, and it is more intuitive to cut according to the number of characters.

By simply modifying the tags in the template, for example,{{ item.Description }}to{{ item.Description|truncatechars:80 }}AnQiCMS can help you easily implement the fixed character number truncation and ellipsis addition for article summaries, greatly enhancing the reading experience and aesthetics of the content list page.

Common Questions (FAQ)

1. Why did I usetruncatecharsAfter the filter, are the HTML tags in the summary broken?

This is because of things liketruncatecharsandtruncatewordsThis filter is designed for plain text.When they extract text containing HTML tags, they may truncate in the middle of the tags, resulting in an incomplete HTML structure.truncatechars_htmlortruncatewords_html，并确保在输出时加上|safethe filter to allow the browser to parse HTML.

2. Can the default ellipsis “…” be changed to another symbol?

AnQiCMStruncatecharsandtruncatewordsSeries filters default to adding the standard ellipsis “…” after truncation.Currently, these filters do not provide a parameter to modify the specific text of the ellipsis.replaceFilter replacement of the default ellipsis), but for the stability of the system and the convenience of future upgrades, it is recommended to follow the default settings.

3. How is my article abstract generated? Is AnQiCMS automatically extracting the text or does it have a dedicated abstract field?

AnQiCMS provides two methods to generate article summaries:

  1. Manual entry:In the background “Add Document” or “Edit Document” page, there is a “Document Summary” field.If you enter content here, the system will prioritize using this field as the article summary.
  2. Automatically extract:If you do not fill in the "Document Description", AnQiCMS will automatically extract the first 150 characters from the "Document Content" field as the article summary. In the template, this summary content is usually displayed throughitem.DescriptionThe variable can be obtained.