In website content operations, 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 functions to help us easily convert line breaks in multi-line text to corresponding HTML tags, allowing content to be perfectly presented on the front-end page.

Utilize a powerful filter to convert line breaks

The AnQiCMS template engine supports a series of practical filters (Filters), one of which is specifically designed to handle line breaks in multi-line text.linebreaksandlinebreaksbrThey allow us to intelligently convert line breaks in plain text to HTML tags as needed.

linebreaksFilter

This filter will intelligently convert single-line newline characters (\nConvert to HTML's<br/>tags, and convert consecutive two or more newline characters (usually indicating a new paragraph) to<p>and</p>The tag wraps it up. It is very suitable for handling scenarios where structured paragraph display is needed while also wanting to retain the natural line breaks in the text.

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

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

linebreaksbrFilter

If you just want to replace all line breaks with<br/>tags without generating<p>paragraph tags, thenlinebreaksbrThe filter would be a more appropriate choice. This is very useful in scenarios where strict paragraph structure is not required, but line breaks in text must be maintained, such as contact addresses, brief list descriptions, etc.

For example, contact information (contact.Address) Field may contain multi-line address information, we just want to display them simply by line:

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

Understanding|safeThe importance of the filter

It should be emphasized that when using these filters, we usually add one immediately afterwards|safeFilter. This is because the Anqie CMS template engine, for security considerations, defaults to escaping all output content to prevent potential XSS attacks.If we hopelinebreaksorlinebreaksbrThe HTML tags converted by the filter (such as<p>and<br/>) It must be explicitly told to the system that this content is safe and can be parsed, so that it can be rendered normally by the browser and not 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

In addition to using the filter to process the line breaks in existing text, Anqi CMS also provides a powerful Markdown editor feature.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 saved and rendered.This means that as long as you use the Markdown editor to write content in the background, formatting issues such as line breaks will be automatically resolved without manually adding them to the templatelinebreaksorlinebreaksbrfilter.

In addition, if you have turned off the Markdown editor in the background, but the content itself is stored in Markdown format, or some custom field content is Markdown, you can still give it in the template byContentadd a fieldrender=trueParameters, to manually trigger the Markdown to HTML conversion. For example:

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

Application scenarios in practice

These features are very practical in all content modules of Anqi CMS. Whether it is articles (archive(The main text)Content(Or summary)Description), Single page(page) Detailed content, category(category) Detailed introduction, or content model(moduleDefine the multi-line text type custom field in the following way, all these methods can be used to optimize the display of text.

BylinebreaksandlinebreaksbrThese two concise and powerful filters, or directly using the built-in Markdown editor, Anqi CMS gives us great flexibility in content creation and display.The problem of line breaks in multi-line text is easily solved, and our website content has become more beautiful and readable as a result.

Frequently Asked Questions (FAQ)

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

linebreaksandlinebreaksbrThe filter mainly handles the newline characters within the text itself. If your text content already contains HTML tags (such as copied and pasted rich text from elsewhere), these filters will not remove them.If you want to remove all HTML tags while preserving line breaks, you can usestriptagsFilter, for example{{ your_content|striptags|linebreaksbr|safe }}Please note the order of processing, remove tags first, and then handle line breaks, which usually results in purer text.

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

These filters are widely used, almost applicable to any field that stores multiline text in AnQi CMS. In addition to the article content (Content) and summary (Description), you can also use them in the following scenarios:

  • Single page content(pageDetaillabel'sContentfield).
  • Detailed classification introduction(categoryDetaillabel'sContentorDescriptionfield).
  • Custom content modelField defined as multi-line text type in
  • Contact InformationSettings, such as contact address (contactlabel'sAddressfield).

Any multi-line text you enter in the background and want to display with line breaks on the front end can try using these filters.

3. I have already used.|linebreaks|safeBut there is still a problem with the line break display on the front-end page, what is the reason for this?

If you have already ensured that the correct filter has been used and added|safeBut the line break did not take effect, and there may be several reasons for this:

  • The content itself does not have an actual line break:Check if you actually pressed the Enter key to create a line break when typing in the background, not just by manually entering spaces.
  • CSS style effects:Your website's CSS style may override the default<p>or<br/>The display behavior of tags, for examplewhite-spaceProperties may be set tonowraporpre-lineWait, this may affect the line break display. You can check the relevant 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 child elements.
  • Template cache:Clear the AnQi CMS system cache and your browser cache to ensure that the latest template code and content are loaded.