During the operation of the AnQiCMS website, we often encounter scenarios where we need to display a large amount of text content, such as the main content of article detail pages, detailed descriptions of product introductions, or long introductions on category pages.These long texts, if not handled properly, may cause page layout to be disordered, affecting the user's reading experience.It is fortunate that AnQiCMS's powerful template engine provides various flexible ways to manage and display these long texts, including automatic line breaks and content truncation.

AnQiCMS template system draws on the syntax of Django template engine, allowing us to output variables through double curly braces{{变量}}and through single curly braces followed by a percent sign{% 标签 %}Use various logic controls and filters. The core of displaying long text lies in the reasonable application of the built-in 'Filters' function.

Core Solution:wordwrapFilter

When we need to make a long text content automatically wrap at a certain width instead of simply overflowing the container,wordwrapThe filter comes into play. It will intelligently wrap text at spaces based on the character length you specify.

For example, if you want to wrap a paragraph of text every 50 characters or so:

{{ archive.Description|wordwrap:50 }}

Here are the50That is the maximum number of characters you want each line to display.wordwrapThe filter will try to find the nearest space for line breaks without breaking words.

It is worth noting that for continuous Chinese text,wordwrapThe filter may not automatically wrap after each character as in English, because it mainly relies on spaces between words. If your Chinese content does not have spaces and you want to implement a hard return, you may need to combine CSS styles likeword-break: break-all;oroverflow-wrap: break-word;[en] To assist in achieving the desired effect.

CombinelinebreaksandlinebreaksbrFilter

Many times, the content we input from the backend editor may itself contain newline characters (such as newlines generated by the Enter key).If the content is directly output, the HTML browser will render multiple spaces and line breaks into a single space.linebreaksorlinebreaksbrFilter.

  • linebreaksThe filter will convert individual newline characters in the text into.<br/>Tags, and two consecutive newline characters will be converted into.<p>...</p>paragraphs wrapped in tags.
  • linebreaksbrThe filter is simpler, it will directly convert all newline characters into<br/>Label.

usually, to ensure that HTML tags (such as bold, images, etc. generated by back-end editors) are not escaped while also handling line breaks, we will apply these filters andsafethe filter.safeThe filter tells the template engine that this content is safe HTML and does not need to be automatically escaped.

For example, the main text displayed for the article details:

{% archiveDetail articleContent with name="Content" %}
{{ articleContent|wordwrap:80|linebreaks|safe }}

In this example,articleContentFirstly,wordwrap:80Filter processing, attempting to break lines around every 80 characters; then,.linebreaksThe filter converts the original newline characters in the text to HTML paragraphs or newline tags; finally,.,safeThe filter ensures that all HTML tags are correctly parsed and displayed by the browser, rather than being output as plain text.

An alternative to truncating long text:truncatecharsWithtruncatewordsFilter

In certain design scenarios, we may not want long text to be fully expanded, but only to display a partial content with an ellipsis at the end, in order to maintain the simplicity of the page or to guide users to click to view more. AnQiCMS providestruncatecharsandtruncatewordsA series of filters to implement text truncation.

  • truncatechars:N: Truncates by character count, N is the total number of characters (including ellipsis).
  • truncatewords:N: Truncates by word count, N is the total number of words (including ellipsis).

These two filters have corresponding_htmlversions, such astruncatechars_htmlandtruncatewords_html. They try to maintain the integrity of the HTML structure when truncating content containing HTML tags, to avoid generating invalid code.

For example, to display the article summary, retain only the first 100 characters:

{{ archive.Description|truncatechars:100 }}

If the summary content may contain HTML tags, to avoid truncation causing unclosed tags, you can use:

{{ archive.Description|truncatechars_html:100|safe }}

Similarly,|safeThe filter is also indispensable here to ensure that the truncated HTML content can be rendered correctly.

Summary

AnQiCMS's template engine provides very flexible and powerful tools for managing the display of long text. Whether you hope towordwrapFilter implementation of automatic line break for text, or throughlinebreaksThe filter retains the original paragraphs and line breaks, or utilizestruncatecharsandtruncatewordsThe filter elegantly truncates text, which can help us better optimize the content display of the website and enhance the user experience.In practical applications, flexibly combining these filters with appropriate CSS styles can meet the vast majority of long text processing needs.

Common Questions (FAQ)

Q1: Why did I usewordwrapThe filter, but the Chinese content does not line break as expected?

A1:wordwrapThe filter mainly performs line breaks based on spaces between words.For continuous Chinese text, due to the lack of natural word separators, it may not automatically insert line breaks after a specified number of characters.word-break: break-all;oroverflow-wrap: break-word;Property that makes the browser force line breaks at any character as needed.

Q2: How do I resolve the issue where my long text containing HTML tags (such as images, bold text, etc.) is displayed as plain text instead?

A2: The AnQiCMS template engine defaults to escaping HTML entities in output variable content for security reasons, to prevent cross-site scripting attacks (XSS). If your text content is legitimate HTML code and you want the browser to parse and display it, you need to add it at the end of the variable output.|safefilter. For example:{{ archive.Content|linebreaks|safe }}.

Q3: How do I show the first N characters (or words) of a long text without automatic line breaks?

A3: In this case, you should use a truncation filter instead of a line break filter.truncatechars:NText can be truncated by character count,truncatewords:NThen truncate by word count. If the content may contain HTML tags, please use the corresponding_htmlversion (such astruncatechars_html:N), to ensure the integrity of the truncated HTML structure, and also need to combine|safeA filter to prevent HTML tags from being escaped.