In AnQiCMS (AnQiCMS) template development, handling multi-line text is a common requirement, especially when these texts contain specific formats, such as indentation. AnQiCMS provideslinebreaksA filter is used to assist in handling these situations, but it has specific mechanisms for handling indentation that are worth understanding.

linebreaksThe filter is mainly responsible for converting line breaks in text to HTML.<p>and<br/>A tag to ensure that text content is displayed correctly on the web page. Specifically, it converts a single newline character to<br/>While converting consecutive two or more newline characters (usually representing an empty line) into a paragraph tag pair (<p>...</p>However, for special indentation formats at the beginning or within the text (such as indentation achieved through spaces or tabs),linebreaksThe filter does not actively retain these visual indentation effects.

This is determined by the HTML rendering mechanism. Browsers, when parsing HTML, will perform 'whitespace collapsing' on consecutive whitespace characters (including spaces, tabs, and line breaks), usually treating multiple consecutive whitespaces as a single space, and ignoring leading whitespaces.When text passeslinebreaksThe filter converts to<p>and<br/>After the tag, the text inside still suffers from this whitespace collapsing rule. This means that even if your original text contains这是一行缩进的文字such content, afterlinebreaksAfter processing, it is likely to be displayed in the browser.<p>这是一行缩进的文字</p>The leading indentation in the line will be ignored.

So, if your multiline text indeed needs to retain special indentation formatting, how should we operate? At this point, you need to use the tag specifically used in HTML to display preformatted text:<pre>.<pre>The tag retains all whitespace characters (including spaces and newline characters), displaying the original text formatting.

You can place multi-line text content with special indentation in the template<pre>within the tags and combinelinebreaksfilters. For example, if your article content is stored inarchive.ContentAmong them, you need to retain the indentation and line breaks, and you can write the template code as follows:

<pre>{{ archive.Content|linebreaks|safe }}</pre>

Here, linebreaksIt will ensure that the line breaks in the text are converted to<br/>and<p>(if there are blank lines), while the external<pre>The tag ensures that all whitespace characters (including indentation) are preserved within these HTML structures. It is worth noting that, due tolinebreaksThe filter will generate HTML tags, you need to use|safeThe filter to inform the template engine that this output is safe HTML content and should not be escaped again.

If you do not want the text to be<p>wrapped in tags, it simply converts the<br/>to preserve the original line structure, but still needs to keep the indentation, thenlinebreaksbrThe filter would be a better choice as it only handles newlines and does not add extra paragraph tags. You can use it like this:

<pre>{{ archive.Content|linebreaksbr|safe }}</pre>

In some cases, you may also need to add line numbers to each line of multi-line text,linenumbersThe filter can achieve this function.

In summary, understandinglinebreaksThe principle of filter operation and the HTML whitespace collapse rule can help us better control the presentation of multi-line text on web pages. For multi-line text that needs to retain special indentation format, it is combined with the use of<pre>Tags are the most direct and effective method. When entering content in the Anqi CMS backend, if a segment of text needs to retain precise formatting (such as code snippets, poetry, or lists with specific indentation), it is recommended to use it directly in the template.<pre>or<pre><code>Label wrapping is used to ensure that the final display effect meets expectations.

Frequently Asked Questions (FAQ)

  1. linebreaksandlinebreaksbrWhat are the differences between filters? linebreaksThe filter will convert newline characters in the text to<br/>The tag, and it will convert empty lines (i.e., two or more consecutive newline characters) into HTML.<p>...</p>Paragraph tags, which means it will create a paragraph structure for the content. AndlinebreaksbrThe filter is simpler, it will simply convert all newline characters to<br/>tags without adding any extra<p>tags, so it is more suitable for scenarios where only simple line breaks are needed.

  2. Why does the front-end display not match when I directly input multiline text and indentation in the rich text editor on the Anqi CMS backend?This is usually due to the rendering mechanism of HTML and the handling method of rich text editors.Most rich text editors convert the content to HTML format when saving.During this process, non-standard indentation (such as through multiple spaces or tabs) may not be converted to the corresponding HTML entities or structure, and browsers will also default to ignoring extra whitespace at the beginning and within lines when displaying.If you need to preserve precise indentation, you must use the template.<pre>Tag, or when editing in the background, using the editor's 'code block' or 'quote' feature, these functions will usually be converted to<code>or<pre>Tag to maintain the format.

  3. except<pre>Tags, are there other ways to preserve indentation?Other than using directly<pre>Tags outside, for code snippets,<code>Tags are often used to represent code, but they themselves do not preserve indentation, usually need to be used with<pre>Use together. At the CSS level, you can try usingwhite-spaceproperties such aswhite-space: pre-wrap;）to simulate<pre>behavior, but this method depends on the correct loading of the stylesheet and browser support, and may not be as good as using it directly<pre>Label stability and semantics. Markdown editors usually convert code block content automatically in the background.<pre><code>This is a highly recommended way to preserve code indentation.