In website content operation, we often need to input multiline text in articles, product descriptions, or page content.However, when displaying text with line breaks directly on a webpage, browsers often do not retain these line breaks as expected, but render them as continuous text on a single line, which undoubtedly affects the reading experience and layout of the content.

AnQi CMS understands this and provides very convenient built-in features to help us easily convert newline characters in multi-line text to corresponding HTML tags, allowing content to be presented perfectly on the front-end page.

Use powerful filters to convert line breaks

The template engine of AnQi CMS supports a series of practical filters (Filters), one of which is specifically designed to handle the problem of line breaks in multi-line text.linebreaksandlinebreaksbrThey allow us to intelligently convert line breaks in plain text to HTML tags when outputting content in templates.

linebreaksFilter

This filter will intelligently convert single-line newline characters in text into HTML tags.\n),<br/>, while converting two or more consecutive newline characters (usually indicating a new paragraph) into<p>and</p>It wraps labels. It is very suitable for handling scenarios that require structured paragraph display while also retaining natural line breaks in the text.

For example, if our article summary (archive.Description）or page content（page.Content）contains multiple lines, and we want them to be displayed as paragraphs, we can use it like this：

<div class="content-description">
    {{ archive.Description|linebreaks|safe }}
</div>

linebreaksbrFilter

If you just want to simply replace all line breaks with<br/>Tags, without generating<p>Paragraph tags, thenlinebreaksbrThe filter would be a more suitable choice.This is very useful in handling scenarios that do not require strict paragraph structure but must maintain text line breaks, such as contact addresses, brief list descriptions, etc.

For example, contact information (contact.Address)The field may have multiple lines of address information, and we just want them to be displayed simply by line:

<div class="contact-address">
    {{ contact.Address|linebreaksbr|safe }}
</div>

Understanding|safeThe importance of filters

It should be emphasized here that we usually add one immediately after using these filters.|safeFilter.This is because the template engine of AnQi CMS, for security considerations, defaults to escaping all output content to prevent potential XSS attacks.linebreaksorlinebreaksbrThe HTML tags after filter conversion (such as)<p>and<br/>The content must be explicitly told to the system that it is safe and can be parsed, so that it can be rendered normally by the browser instead of being displayed as raw text.|safeThis is the 'permit', which tells the template engine that this content has been reviewed and confirmed as safe HTML and can be output directly.

Another solution: Markdown editor

Except for directly using filters to handle line breaks in existing text, Anqi CMS also provides powerful Markdown editor features.If your content is written in Markdown format in the background, the system will automatically convert the Markdown syntax (including line breaks, headings, lists, etc.) to the corresponding HTML tags when saving and rendering.linebreaksorlinebreaksbrFilter.

Also, if you have closed the Markdown editor in the background, but the content itself is stored in Markdown format, or if some custom field content is Markdown, you can still access it in the template by givingContentField additionrender=trueparameter to manually trigger the Markdown to HTML conversion. For example:

<div>
    {% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>
</div>

Actual application scenarios

These functions are very practical in various content modules of the AnQi CMS. Whether it's articles (archive) of the main text (Content) or the summary (Description), the detailed content of the single page (page), or the categories (categoryThe detailed introduction of 【en】，or the content model 【en】moduleThe custom field of the “multi-line text” type defined in 【en】can be optimized for the display effect of text through these methods.

PasslinebreaksandlinebreaksbrThese two concise and powerful filters, or directly using the built-in Markdown editor, give us great flexibility in content creation and presentation with Anqi CMS.The problem of line breaks in multi-line text is resolved, and the content of our website has become more beautiful and readable.

Common Questions (FAQ)

1. ApplicationlinebreaksorlinebreaksbrWhy are there still HTML tags in the text after that? Or, how can I only keep the line breaks and remove all HTML tags?

linebreaksandlinebreaksbrThe filter primarily handles newline characters within the text.If your text content already contains HTML tags (such as copied and pasted from rich text elsewhere), these filters will not remove them.striptagsFilter, for example{{ your_content|striptags|linebreaksbr|safe }}Please note the order, remove tags first, and then handle line breaks, which usually results in purer text.

2. Besides the article content, where else can these line break conversion features be used?

These filters are widely used and can be applied to almost any field that stores multiline text in the CMS. Except for the main article text (Content), and the introduction (Description），You can also use it in the following scenarios:

  • Single page content(pageDetailTagsContentField).
  • Detailed introduction of categories(categoryDetailTagsContentorDescriptionField).
  • Custom Content ModelThe 'Multiline Text' field is defined in it."),
  • Contact informationSetting up, such as contact address (contactTagsAddressField).

Any multiline text you input in the backend and wish to be displayed with line breaks on the frontend can try using these filters.

3. I have already used it|linebreaks|safe, but there is still a problem with line breaks displayed on the front-end page, what is the cause of this?

If you have already ensured that the correct filter is used and added|safeBut the line break has not taken effect, and it may be due to the following reasons:

  • The content itself does not contain an actual line break:Check if you have actually pressed the Enter key to create a line break while entering content in the background, rather than simply manually entering spaces.
  • CSS style influence:Your website's CSS styles may be overriding the defaults.<p>or<br/>The display behavior of tags, such aswhite-spaceProperties may be set tonowraporpre-lineThis may affect line break display. You can check the related CSS rules.
  • Nested tag issue:The content may be wrapped by other parent HTML tags, and the styles of these parent tags limit the line breaks of the child elements.
  • Template Caching:Clear the system cache of AnQi CMS and your browser cache to ensure that you are loading the latest template code and content.