In website operation, how to efficiently and beautifully display article lists or cards while avoiding lengthy 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 to view the details.AnQiCMS fully considers this need of content operators, making this operation very simple and intuitive through flexible template tags and powerful filters.

How does AnQiCMS handle the summary content of articles?

First, 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 the brief introduction of the article.If this field is not filled in, AnQiCMS is also very intelligent, 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 item (item) contains aDescriptionField, this is the core content we use to display the summary.

Using 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 learn.To achieve the automatic truncation of summaries and the addition of ellipses, AnQiCMS is built-in with a series of powerful "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, it 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 strictly calculate based on the number of characters, even if it cuts off half a word, it will be 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 character count and automatically handle ellipses.

  • truncatewords(Truncated by word count)If you prefer to maintain the integrity of the word and avoid breaking it in the middle, thentruncatewordsIs 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

Many times, the introduction or summary of an article may contain some simple HTML tags, such as bold, italic, or links. If used directly,truncatecharsortruncatewordsExtracting such rich text may cause the HTML structure to be damaged, resulting in abnormal display of the page. To solve this problem, AnQiCMS provides a special filter for processing HTML content:truncatechars_htmlandtruncatewords_html.

These filters can not only truncate content by character or word count and add ellipses, but more importantly, they can intelligently repair broken HTML tags during truncation, ensuring that the output HTML structure remains complete and valid. When using these filters, we also need to cooperate with the browser to correctly parse HTML.|safefilter.

  • truncatechars_htmlExtract HTML content by character countFor example, extract the first 100 characters of an article containing HTML:

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

    Hereitem.ContentIt usually represents the full content of an article, if you want to generate an abstract from the main text of the article instead of 'document summary', this filter is particularly important.

  • truncatewords_htmlExtract HTML content by word countFor example, extract the first 50 words of an article that contains HTML:

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

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

Actual operation and selection

In practical application, which filter to choose depends on your specific needs and the characteristics of the summarized content:

  1. Summary content source:If you mainly use the "Document Summary" field and usually treat it as plain text, thentruncatecharsortruncatewordsit would be appropriate.
  2. Does the content contain HTML:If the summary may contain styles or links, or if you are directly extracting from the article bodyContentthentruncatechars_htmlortruncatewords_htmlthey are mandatory, ensuring the neat and correct layout of the page.
  3. Extraction granularity:It depends on the design preference whether to truncate by fixed character length or by word count. For example, in the Chinese context,truncatecharsIt is often more commonly used because Chinese characters do not have a clear 'word' concept, and cutting by character count is more intuitive.

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

Frequently Asked Questions (FAQ)

1. Why did I usetruncatecharsAfter the filter, the HTML tags in the summary were destroyed?

This is because of things liketruncatecharsandtruncatewordsThis filter is designed for plain text. When it truncates text containing HTML tags, it may break the tags in the middle, resulting in an incomplete HTML structure.In order to avoid this situation, you should use a dedicated HTML filter, such astruncatechars_htmlortruncatewords_htmlPlease ensure that it is added in the output|safea filter to allow the browser to parse HTML.

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

AnQiCMS'truncatecharsandtruncatewordsThe series filter defaults to adding the standard ellipsis “…” after truncation.Currently, these filters do not directly provide parameters to modify the specific text of the ellipsis.In most cases, if a modification is needed, it may be necessary to modify the underlying code or perform secondary processing in the template (for example, first extract, then usereplaceFilter replaces the default ellipsis), but it is recommended to follow the default settings to maintain system stability and facilitate future upgrades.

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 for generating article summaries:

  1. Manual entry:In the background "Add document" or "Edit document" page, there is a "Document introduction" field.If you enter content here, the system will prioritize this field as the article summary.
  2. Automatically extract:If you do not fill in the "Document Summary", AnQiCMS will intelligently extract the first 150 characters from the "Document Content" field as the article abstract. In the template, this summary content is usually displayed throughitem.DescriptionVariable to obtain.