When managing content in AnQi CMS, we often encounter a situation: when multi-line text is entered in the back-end editor box, it is displayed as a single line on the front-end page, or the newline characters are displayed as text directly. This is because browsers, by default, will ignore single newline characters when rendering HTML.\n）。If you want the content to look like it does in an editor, retaining paragraph breaks or line breaks, you need to rely on the powerful template filters provided by AnQiCMS, especiallylinebreaksandlinebreaksbr.

These two filters are practical tools in the AnQiCMS template engine, which are used to convert line breaks in text content into HTML tags that browsers can recognize and render, ensuring that your multiline text is displayed as expected on the website.

linebreaksbrFilter: The preferred choice for simple line breaks

linebreaksbrAs the name implies, the filter will replace all line breaks in the text with\nHTML's directly<br/>Label. This is very useful for those who need simple line breaks instead of paragraph separation, such as:

  • Address informationWhen you need to display detailed address on the contact page, you may want each address element to be displayed independently on each line, rather than being crowded together.
  • List of product featuresIf the product description includes multiple brief features, it is desired that each feature be on a separate line.linebreaksbrit can be very useful.
  • Poetry or lyricsThese contents usually require strict line-by-line display.

Example Usage:

Assuming your backend text content is:

公司名称：AnQiCMS
联系电话：123-4567-8900
公司地址：某某市某某区某某街道123号

In the template, you can use it like this:linebreaksbr:

<div class="contact-info">
    <h3>联系方式</h3>
    <p>{{ system.contact_details|linebreaksbr|safe }}</p>
</div>

After rendering, the browser will display it as:

<div class="contact-info">
    <h3>联系方式</h3>
    <p>公司名称：AnQiCMS<br/>联系电话：123-4567-8900<br/>公司地址：某某市某某区某某街道123号</p>
</div>

This way, each piece of information will occupy a separate line on the page.

It is worth noting that when using this filter, it is usually also necessary to add|safeFilter. This is because AnQiCMS (and many other template engines) default to escaping the output HTML content for security reasons.<Converted to&lt;etc.|safeTell the template engine that this part of the content is safe and does not need to be escaped. It can be parsed as HTML directly. If missing|safe, your<br/>Tags may be displayed in plain text format rather than the actual line break effect.

linebreaksFilter: A Tool for Semantically Structured Paragraphs

WithlinebreaksbrCompared to,linebreaksThe filter provides a more semantic processing method, focusing on converting multi-line text into structured paragraphs. Specifically:

  • It converts a single newline character into<br/>tags, likelinebreaksbrThe same.
  • But more importantly, it will convert two or more consecutive newline characters (usually indicating the beginning of a new paragraph in a text editor) into HTML's<p>and</p>paragraphs wrapped in tags.

This processing method makeslinebreaksThe filter is very suitable for processing long articles, blog posts, or any text that requires clear paragraph structure. It is able to better retain the original structure of your content and make it more visually readable, while also being more friendly to search engines as it uses semanticized content.<p>Label.

Example Usage:

Assuming your backend article content is:

这是文章的第一段内容。
它包含一些重要的信息，并且在这里结束。

这是文章的第二段内容。
它与第一段通过空行分隔，理应是独立的段落。

In the template, you can use it like this:linebreaks:

<div class="article-content">
    <h2>{{ article.title }}</h2>
    <div class="main-body">
        {{ article.full_content|linebreaks|safe }}
    </div>
</div>

After rendering, the browser will display it as:

<div class="article-content">
    <h2>文章标题</h2>
    <div class="main-body">
        <p>这是文章的第一段内容。<br/>它包含一些重要的信息，并且在这里结束。</p>
        <p>这是文章的第二段内容。<br/>它与第一段通过空行分隔，理应是独立的段落。</p>
    </div>
</div>

Here, the content is correctly divided into two<p>paragraphs, and line breaks within paragraphs are represented by<br/>. Similarly,|safethe filter is indispensable here.

How to chooselinebreaksandlinebreaksbr?

The choice of filter mainly depends on the semantics of your content and the expected display effect:

  • If you need is a simple inline line break, without involving explicit paragraph concepts, such as addresses, short sentence lists, or product features, thenlinebreaksbris a lighter and more direct choice.
  • If you are dealing with a long article, news content, or any other long text that requires clear paragraph structure, and you wish to preserve the original paragraph intent of the text, thenlinebreaksWill provide more semantically meaningful HTML output, which is helpful to improve the readability of content and SEO friendliness.

They are all practical tools for improving user experience and content presentation quality in AnQiCMS template development.By flexibly using these two filters, you can easily solve the problem of displaying multi-line text on web pages, making your content more beautiful and readable on websites powered by AnQiCMS.

Further Reading:linenumbersFilter

In addition to handling line breaks, AnQiCMS also provideslinenumbersFilter, it can number each line of multi-line text starting from 1, such as '1.'“en”{{ code_block|linenumbers|safe }}it can be very useful.

Common Questions (FAQ)

  1. Q: Why did I uselinebreaksorlinebreaksbra filter, but the page still displays plain text<br/>or<p>tags instead of actual line breaks or paragraphs?

    • A:This is usually because you forgot to add at the end of the filter chain|safeFilter. AnQiCMS in order to prevent XSS attacks, the default behavior is to escape all HTML tags to their corresponding entity characters (for example<with&lt;).|safeThe filter tells the template engine that this part of the content is safe HTML that can be rendered as-is without escaping. Therefore, make sure your template code is{{ variable|linebreaksbr|safe }}or{{ variable|linebreaks|safe }}.

  2. Q: Do these filters automatically handle Markdown syntax?For example, is the text I input in the background in Markdown format, can it be directly converted to HTML?

    • A:No.linebreaksandlinebreaksbrThe filter focuses only on the native newline characters (\n),<br/>or<p>tags. They do not parse or convert Markdown syntax. If your content is in Markdown format, you