When publishing content on AnQi CMS, we often encounter a situation: when text is entered in the content editing box, if it contains multiple lines of information, but these line breaks 'disappear' when displayed on the front-end page, causing the text to be cramped together and providing a poor reading experience. This is usually because HTML defaults to treating line breaks in text as...\nConsider it as a normal space.However, Anqi CMS provides a very convenient template filter that can help us easily solve this problem, allowing multiline text to maintain its original formatting style on the web page.

Core Function:linebreaksbrFilter

When we need to convert the newline characters in the multi-line text input by the user into HTML tags (\n) directly,<br>then,linebreaksbrFilter is our preferred tool. Its function is very direct, which is to replace each text line break with a line break tag that the browser can recognize.<br/>.

The usage is very intuitive, just add it after the variable you need to process,|linebreaksbrfor example, if you have a variable namedarchiveContentIt includes the multi-line text content you get from the backend, and you can use it in the template like this:

{# 假设 archiveContent 是从文档内容中获取的多行文本变量 #}
{{ archiveContent|linebreaksbr|safe }}

Please note, in addition to|linebreaksbrwe have also added an extra|safeFilter. This is a very critical step, becauselinebreaksbrThe filter will generate HTML tags (<br/>）。To ensure that the browser can correctly parse these newly generated HTML tags and not treat them as plain text (for example, displaying them directly), we must use&lt;br&gt;）displayed on the page, we must use|safeTell the template engine that this content is safe HTML and can be output as is.

Generally, we display the multi-line content that users input in the backend text editor on the article detail page, single page, or custom content model in this way to maintain the original formatting of the content.

UnderstandlinebreaksFilter: Another Option

Exceptlinebreaksbr, and the Anqi CMS also provideslinebreaksFilter. This filter function is similar, but it goes further, by treating each section of text (composed of consecutive non-empty lines, separated by empty lines) as<p>Wrap the label and insert a line break at the paragraph break<br/>.

If you want to display multiline text as a paragraph with<p>the default styles and semantics brought by the tagslinebreaksIt would be a more suitable choice. For example, it would turn:

第一行文本
第二行文本

第三行文本

into:

<p>第一行文本<br/>第二行文本</p><p>第三行文本</p>

If you simply want each newline to become a:<br/>without needing additional:<p>tags wrapping,linebreaksbrMore concise and more in line with the need for direct line breaks conversion.

UselinebreaksThe way of filter is alsolinebreaksbrsimilar, and it also needs|safeto cooperate:

{{ archiveContent|linebreaks|safe }}

Applied in the Anqi CMS template in practice

These two filters belong to the built-in 'Filter' feature of AnQi CMS template system, which means they need to be in your template file (usually.htmlfile, such as the article detail page'sdetail.htmlCalled within, acting on any variable containing multiline text that you retrieve from the backend.

For example, when displaying document details, you may have obtained the article content througharchiveDetailthe tag:

{# 假设您正在展示一篇文档的详情页，并且文档内容变量名为 articleContent #}
{% archiveDetail articleContent with name="Content" %}
<div class="document-content">
    {# 这里应用过滤器，将用户输入的换行符转换为 <br/> 标签 #}
    {{ articleContent|linebreaksbr|safe }} {# 或根据需求使用 |linebreaks|safe #}
</div>
{% endarchiveDetail %}

By using flexibilitylinebreaksbrorlinebreaksFilter, users of Anqi CMS can easily keep the text content inputted in the backend beautifully and standardizedly displayed on the frontend page, greatly enhancing the display effect of website content and the user reading experience.This is not only the optimization of technical details, but also an important link that cannot be ignored in content operation.

Common Questions (FAQ)

1. Why did I uselinebreaksbrorlinebreaksAfter that, the line break still didn't work, or the text of the<br>tag was displayed directly on the page?

This common issue is likely to occur after you forget to add after using these filters|safe.|safeThe filter tells the template engine that this content is safe HTML and does not need to be escaped. If it is missing,|safefor security reasons, the template system will<br>Such HTML tags are escaped to&lt;br&gt;, resulting in the text being displayed directly on the page instead of the actual line break effect. Please make sure that your code includes|safe.

2.linebreaksbrandlinebreaksHow should I choose between these two filters?

The choice of filter depends on the final layout effect of the multi-line text on the page.

  • If you only want to convert each newline entered by the user to a simple HTML line break tag (<br/>), without adding additional paragraph tags (<p>), thenlinebreaksbrThis is a more concise and direct choice.
  • If you want to automatically split multi-line text into HTML paragraphs (<p>tags), and add line breaks within these paragraphs<br/>so thatlinebreaksIt would be a better choice, as it can provide stronger structured semantics for your content.

3. Besides the article content, where else can these filters be used?

Any that is obtained from the Anqi CMS backend and is expected to retain newline characters.Multi-line text fields.These filters can be used. This includes but is not limited to:

  • articles or product models.Description[Summary] field.
  • Field of the "Multi-line text" type defined in the custom content model.
  • Single-page management (pageDetail) within theContentfield.
  • Even some comment forms (guestbookSubmit content, when displayed if you need to retain the user's input line breaks.In summary, any content that users input into the multi-line text box on the backend, which results in lost line breaks when displayed on the frontend, can consider applying these filters.