In website operation, how to efficiently and elegantly manage and display long text content, avoiding page redundancy or layout chaos, is a common but key challenge.AnQiCMS provides flexible and powerful template tags and filters, helping us skillfully control the display length of text. AlthoughwordwrapThe filter can implement simple automatic line breaks based on character count, but it may not be smart enough to handle rich text content and may not meet the truncation needs in all scenarios.

It is fortunate that AnQiCMS is more thanwordwrapThis method. By cleverly using its built-in filters and content management mechanisms, we can achieve more refined and user-friendly control over the length of long text.Let's explore these practical methods together.

Skillfully extract text:truncatecharswithtruncatewordsSeries filter

In many cases, we need to truncate a long text into a brief summary and add an ellipsis at the end. AnQiCMS provides several filters specifically designed for this purpose:

  1. Truncate by character count:truncatecharsThis filter starts counting characters from the beginning of the text, truncates after reaching a specified length, and automatically adds an ellipsis at the end (...It is suitable for scenarios that require strict control of character counts, but be aware that it may truncate words in the middle, which may not be friendly for English words, and if the text contains HTML tags, it may destroy the tag structure.For example, would you like to display the first 50 characters of the article summary:

    {{ item.Description|truncatechars:50 }}

  2. Truncate by word count:truncatewordswithtruncatecharsSimilar, but it truncates by words, which usually maintains better readability for English content.It will be truncated after reaching the specified word count and an ellipsis will be added.Similarly, if the content contains HTML tags, using them directly may also cause tag confusion.If you want to display the first 15 words:

    {{ item.Description|truncatewords:15 }}

  3. HTML-friendly truncation:truncatechars_htmlwithtruncatewords_htmlThis is a powerful tool for processing rich text content. When your long text (such as the main text of an articleContentfield) contains various HTML tags, use it directlytruncatecharsortruncatewordsIt could lead to unclosed tags, thereby destroying the page layout.truncatechars_htmlandtruncatewords_htmlIt intelligently parses HTML structures, ensuring that all tags are properly closed when truncated, to avoid display issues. Don't forget to add these filters when using them.|safeA filter to ensure that HTML content is parsed correctly rather than being escaped. For example, safely extract the first 100 characters (including HTML structure) from the article content:

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

    If you want to truncate rich text by word count:

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

    These filters are the preferred choices for extracting summaries from articles, products, or single-page details, as they effectively avoid HTML structure issues caused by truncation.

Precisely extract segments:sliceFilter

If your requirement is not based on 'abstract' fuzzy truncation, but rather needs to extract a fixed-length segment starting from a specific position in the text, thensliceThe filter will be very useful. It is similar to substring operations in programming languages, where you can specify the start and end indices. Its syntax is{{ obj|slice:"start:end" }}It should be noted that,sliceThe filter does not care about word or HTML structure, it simply splits by character position. For example, to get the first 200 characters of an article:

{{ item.Content|slice:"0:200"|safe }}

Or start from the 50th character and extract 100 characters:

{{ item.Content|slice:"50:150"|safe }}

sliceIt is suitable in specific scenarios, such as when you are sure that the text structure is simple or does not require retaining the complete HTML integrity, for quick and accurate character extraction.

Use content structure: built-in introduction field

AnQiCMS has already considered the display of long text in content management design. In "add document", "document classification", and "page management", in addition to the main "content" (ContentThe field is outside, and it usually also provides a "document summary" or "category summary" (DescriptionThisDescriptionFields are naturally meant to carry a brief summary of the content. When you fill in the background, you can manually edit a concise introduction. It is also convenient if you do not fill it in manuallyDescription，AnQiCMS will intelligently extractContenta segment of text as a summary automatically. In scenarios such as list pages, homepage recommendations, and other situations where abstracts need to be displayed,Use first priority{{ item.Description }}It is the most recommended practice. This way:

  • Reduce the front-end rendering burden: DescriptionThe field is usually already processed, with a moderate length.
  • Improve content management efficiency:Operators can directly control the summary content or rely on the system to automatically generate it.
  • Keep the template tidy:There is no need to use the truncation filter repeatedly in the template, making the code cleaner.

Only whenDescriptionConsider it when the field itself is too long, or you have special requirementsDescriptionApply the field againtruncatechars_htmlFiltering criteria.

Flexible conditional judgment: combinelengththe filter meetsifTag

Sometimes, we hope to decide how to display text based on its actual length.If the text is short, display the full text; if the text is long, display truncated content and provide a 'View More' link.This, AnQiCMS'lengthFilters andifLogical judgment tags come into play.lengthThe filter can get the actual character count of a string. For example, check the length of the article content:

{% if item.Content|length > 200 %}
    {{ item.Content|truncatechars_html:200|safe }}
    <a href="{{ item.Link }}">查看更多</a>
{% else %}
    {{ item.Content|safe }}
{% endif %}

This method provides great flexibility, allowing you to provide customized display strategies for text content of different lengths, thus optimizing the user experience.

Integrate and apply with**practice

In practical applications, you can certainly combine the above methods to achieve **display effects and user experience:**

  • List page/Summary area:Use first priority{{ item.Description }}IfDescriptionIt is still too long or needs more precise control, it can be appliedtruncatechars_htmlortruncatewords_html.
  • Related recommendations/side bar summary within the content details page:Similarly, it can be utilizedDescriptionOr toContentApply an HTML-friendly truncation filter.
  • Need precise control over non-HTML text:Considerslicefilter.
  • Dynamic display:CombinelengthFilters andifLabel, the display strategy is determined according to the actual length of the text.

With these diverse tools, AnQiCMS allows you to bid farewell to the single era of long text content processing, more flexible and intelligent control over the display of website content, thereby enhancing the overall reading experience and page aesthetics.

Frequently Asked Questions (FAQ)

1.truncatecharsandtruncatechars_htmlWhat are the main differences?

The main difference lies in the way HTML tags are handled.truncatecharsWhen truncating, the HTML structure is not considered, which may cause tags to not be closed, thereby destroying the page layout. Andtruncatechars_htmlIt will intelligently parse HTML, ensuring that tags are properly closed after truncation, even if the content is shortened, to ensure the validity of the HTML structure. Therefore, when handling rich text content, it should be used preferentially.truncatechars_html.

2. I want to display the article summary on the list page. Which field or method should I prioritize?

It is strongly recommended to prioritize the built-in 'Summary' of the article, product, or single page (DescriptionThe field. This field is used to store the summary information, you can edit it manually in the background, and AnQiCMS will automatically extract it from the text when it is not filled in.This can reduce the complexity of the front-end template and allow content operators to control the abstract content more accurately.Only in very few cases, ifDescriptionIt is still too long or needs special handling before considering its applicationtruncatechars_htmlFiltering criteria.

3. Will truncating long titles or key information affect search engine optimization (SEO)?

In most cases, truncating displayed text on the front-end page (such as displaying summaries on list pages) will not directly affect SEO.The search engine mainly captures the content of the web page source code. As long as you provide the complete text in the article detail page, and the page<title>tags,meta descriptionTags are optimized for SEO complete content, so there will be no negative impact on the truncation displayed on the front end. AnQiCMS provides special "SEO title", "keywords", and "description" fields, please make sure that the content of these fields is complete and