How to apply `linebreaks` formatting in the front end without affecting the original text data?

In website content operation, we often encounter the need to display multi-line text input by users, such as article summaries, product descriptions, or comments. These texts are usually stored in pure text format in the database, with line breaks (\nIt is the unique structural identifier. However, directly outputting plain text with newline characters to a web page often loses the original segmented and line break effects, resulting in the content being displayed as a long, unordered text, which seriously affects the reading experience.

Keep the original data pure and do not add unnecessary HTML tags at the database level, which is an important principle of content management.This is beneficial for data maintenance and export, and ensures the consistency of API interface output as well as the flexibility of future adjustment of front-end display methods.How can you beautifully format the display of multi-line text on the front end without touching the original text data?AnQiCMS provides a simple and powerful solution.

AnQiCMS's solution:linebreaksFilter

AnQiCMS's template engine provides powerful filter functions, among whichlinebreaksThe filter is specifically designed to solve this problem. It allows us to automatically generate appropriate HTML paragraphs in the front-end template based on the newline characters in plain text.<p>）and line breaks.<br/>）Label, thus without modifying the original database data, it can achieve beautiful layout.

due tolinebreaksThe filter generates HTML tags, in order to ensure that these tags can be correctly parsed by the browser rather than displayed as plain text, we also need to use in conjunction with|safefilter.|safeTell the template engine that this content is safe HTML and does not need to be automatically escaped.

How to uselinebreaksFilter

UselinebreaksThe filter is very intuitive. Suppose we have a variable namedarchive.Descriptionwhich stores multi-line plain text descriptions read from the database. In the template, we can apply the filter in this way:

{# 假设 archive.Description 包含多行纯文本 #}
<div class="content-description">
    {{ archive.Description | linebreaks | safe }}
</div>

When this simple template code is used,archive.Descriptionthe content looks like this:

这是一段文章简介。
它包含了多个自然换行。

用于测试显示效果。

afterlinebreaksand|safeAfter the filter is processed, it will be rendered into the following HTML structure in the browser:

<div class="content-description">
    <p>这是一段文章简介。<br />它包含了多个自然换行。</p>
    <p>用于测试显示效果。</p>
</div>

This, the original concepts of line breaks and paragraphs, have been transformed into HTML structures that conform to web standards, so that users can see neatly formatted and easy-to-read content when they visit the page.

More flexible control:linebreaksbrFilter

exceptlinebreaks，AnQiCMS also provideslinebreaksbrFilter. Its function is more direct, it simply replaces all line breaks in plain text with HTML line break tags (\n) without generating additional paragraph tags (<br/>), unlikelinebreaks.<p>)

{# 假设 archive.Description 包含多行纯文本 #}
<div class="content-description-simple">
    {{ archive.Description | linebreaksbr | safe }}
</div>

UselinebreaksbrHandle the same text content as above, the output HTML will be as follows:

<div class="content-description-simple">
    这是一段文章简介。<br />它包含了多个自然换行。<br /><br />用于测试显示效果。
</div>

When to chooselinebreaksorlinebreaksbrIt depends on your specific design requirements. If the content needs clear paragraph segmentation,linebreaksIs a better choice; if it is only to retain the line break effect,linebreaksbrit is more lightweight and direct.

Why only process on the front end?

The core advantage of applying formatting strategies only on the front-end is that it has no intrusive effect on the original data. Imagine if your content were stored as having a large amount of<p>and<br/>The HTML tag, then when you need to use this content in other non-HTML environments (such as mobile applications, API data interfaces), or decide to completely change the front-end style, you will have to face complex data cleaning and conversion work.

Using in the template layerlinebreaksorlinebreaksbrThe filter has implemented the separation of content and display. The original data maintains its pure, unstructured essence in the database, while the front-end view dynamically presents a beautiful and readable format according to current needs.This provides great flexibility and convenience for the long-term operation and future expansion of the website.

Summary

Skillfully used in AnQiCMSlinebreaksandlinebreaksbrFilter, is a key link in the efficient operation of content and optimization of front-end experience.It keeps our content data pure while presenting it in the most elegant way to the user, ensuring the maintainability, flexibility, and good user experience of the website.

Frequently Asked Questions (FAQ)

1. Q:UselinebreaksAfter that, I found some original HTML tags in the content (such as<strong>How is it that it didn't work and instead showed up as plain text?A:This situation usually occurs because your text itself contains HTML tags that need to be parsed, but they are not used correctly|safefilter.linebreaksThe filter generates HTML tags, but the AnQiCMS template engine defaults to escaping all output for security reasons to prevent XSS attacks. If you want the original HTML tags in the text as well aslinebreaksThe tags generated can be parsed, you need to explicitly tell the template engine that this content is safe HTML, by using inlinebreaksthen add|safeCome