In website content display, we often encounter such needs: multi-line text edited on the backend can be automatically converted to HTML paragraph tags on the frontend page<p>auto<br>The format, rather than simply being crammed together to become a long string of text.AnQiCMS provides a flexible and powerful method to solve this problem, whether through built-in editor features or by using template filters for fine control, it can be easily realized.

auto

When you create or edit articles, product details, single pages, or category content through the AnQiCMS backend, you will usually use the content editor.These editors (including rich text editors and Markdown editors) themselves have the ability to automatically convert the line breaks you enter into the corresponding HTML tags.

autoGlobal Settings -> Content SettingsIf you find and enable it, the newline characters you enter, especially two consecutive newline characters, will be automatically recognized and rendered as HTML paragraph tags<p>。而单个换行符则可能被转换为 English<br/>。这意味着，只要你在后台内容字段中（例如 English文档内容/页面内容or分类内容auto") normal segmentation and line breaks, AnQiCMS will intelligently convert these contents into HTML format with tags when displaying these contents in the front-end template.<p>or<br/>auto") The HTML format with tags.

For example, when calling document content in your template, you usually use something like{% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}</div>If the content is entered through a Markdown editor,articleContentThe variable will automatically include the converted HTML structure. It contains the|safeThe filter is crucial, it tells the template engine that this content is safe HTML that does not require additional escaping, so<p>and<br/>it can be rendered normally in the browser.

English、Using template filters for fine control

Except for the automatic conversion of the editor, AnQiCMS also provides powerful template filters, allowing you to perform more detailed HTML format conversion on multiline plain text content.This is particularly useful when dealing with plain text data obtained directly from a custom multi-line text field, rather than through a content editor.

1.linebreaksFilter：Intelligent paragraph and line break processing

When you want to convert the paragraph format of plain text to standard HTML paragraph tags<p>English translation: , and retain the line breaks in the text,linebreaksFilter is your ideal choice. It works in a similar way to many blogging systems: it recognizes consecutive two newline characters (i.e., blank lines) as a paragraph break, and<p>...</p>Tag it wrapped around. And a single newline character in the text will be converted to<br/>Label.

This method is very suitable for converting unformatted multi-line comments, product descriptions, or service descriptions into HTML format with both paragraph structure and internal line breaks.

For example, if you have a custom multi-line text field namedproduct_descriptionYou can call and handle it in the template like this:

{# 假设 product.product_description 变量中包含多行纯文本内容 #}
<div class="product-description">
    {{ product.product_description|linebreaks|safe }}
</div>

Remember that here|safeThe filter is also indispensable, it ensureslinebreaksThe HTML tags generated by the filter can be correctly parsed and displayed by the browser.

2.linebreaksbrFilter: Simple line break conversion

If your requirement is simpler, just want to replace each newline in plain text with HTML's<br/>tag without needing paragraph tags<p>so thatlinebreaksbrThe filter will be more direct and lightweight. It will not go through blank lines and paragraphs, but insert one on encountering a newline character<br/>.

This method is suitable for scenarios where you need to keep the text compactly aligned but also want to have a simple line break between each paragraph or list item, such as address information, contact list, brief points, etc.

For example, if you have a custom multi-line text field for displaying the company address in the contact information settings, you can call it like this:

{# 假设 contact.address_lines 变量中包含多行纯文本地址信息 #}
<address>
    {{ contact.address_lines|linebreaksbr|safe }}
</address>

Similarly,|safeThe filter is to ensure<br/>The key to correctly rendering the label.

How to choose the right way for you?

  • For the main content area (such as article details, page body)：优先使用 English 后台编辑器本身的功能。If you are accustomed to Markdown, enabling the Markdown editor will bring a more convenient writing experience and automatic HTML conversion.
  • For custom multi-line text fields (such as product highlights, brief descriptions): If this text content requires strong paragraph sense and structure,linebreaksThe filter would be a better choice. It can convert multiple natural paragraphs to HTML.<p>Tags make the text more readable.
  • For simply displaying each line of content separately (such as addresses, list items): If you do not need strict paragraph division, but just want each line of content to occupy a line separatelylinebreaksbrFilter is more appropriate, it can convert each newline character into<br/>.

AnQiCMS through built-in editor functions and flexible template filters, allows you to have a variety of choices when displaying multiline text content, ensuring that your website content is both beautiful and semantically standardized.

Common Questions (FAQ)

Q1: Why did I uselinebreaksorlinebreaksbrFilter, but what is displayed on the page is<p>...</p>or<br/>such original HTML tags, not the actual paragraph and line break effects?

A1:This is usually because you forgot to add|safeFilter. AnQiCMS template engine defaults to escaping all output content for safety reasons, turning<Converted to&lt;etc.linebreaksorlinebreaksbrGenerate HTML tags after, if not|safeTell the template engine that these tags are safe, they will be escaped and displayed as original text. The correct way to use it is{{ 你的变量|linebreaks|safe }}or{{ 你的变量|linebreaksbr|safe }}.

Q2: I have already formatted the multi-line text in the background content editor, and I still need to use it in the templatelinebreaksFilter?

A2:Generally, it is not necessary.AnQiCMS backend rich text editor or Markdown editor has converted your formatting (including paragraphs and line breaks) to standard HTML format when saving content.{{ archive.Content|safe }}) it will be displayed directly as formatted HTML.linebreaksorlinebreaksbrThe filter is mainly used to process those "plain text" multiline contents that are not processed by the editor, such as text input through custom fields.

Q3:linebreaksandlinebreaksbrWhat are the specific differences between filters, and how should I choose?

A3:The main difference between them lies in the way they handle newline characters:

  • linebreaksFilter:More intelligent and semantic. It will recognize two consecutive newline characters (representing a blank line) as the end of a paragraph and use<p>...</p>Label the text wrapped between the tags. A single newline character in the text will be converted to<br/>tags. This is useful for text that requires clear paragraph structure.
  • linebreaksbrFilter:It is more direct and simple. It will replace each newline character (whether single or consecutive) in the text without distinction.<br/>tags without generating<p>Label. This is applicable to scenarios where only simple line breaks are needed without strict paragraph divisions, such as addresses, list items, or poems, etc.

Choose which one depends on the HTML structure and visual effects you want the text to present. If you want the browser to handle paragraph spacing and maintain the semantic segmentation of the text, selectlinebreaksIf you just want to start each line of text on a new line, selectlinebreaksbr.