How to convert the newline character (`\n`) in AnQiCMS template text to the HTML `
` tag or `

` tag?

In website content operation, we often encounter such situations: when the text content extracted from the database, or the text input in the background plain text editor, is displayed on the front-end template, the original clear line breaks become long sentences piled together. This is because the browser defaults to not convert the line breaks in plain text.\n)Is interpreted as a line break mark in HTML.To solve this problem in the AnQiCMS template, so that the text content displays line breaks as expected, we need to make use of the powerful template filter function of AnQiCMS.

AnQiCMS uses a template engine syntax similar to Django, which allows content operators to control the display of content in a straightforward manner. In response to line break issues, AnQiCMS provides two very practical filters:linebreaksbrandlinebreaksThey can intelligently convert line breaks in text to HTML tags, greatly enhancing the readability and layout aesthetics of the content.

Convert text line breaks to HTML's<br/>Tag

When your content needs to be broken at each line break simply, forming a continuous text stream, not independent paragraphs,linebreaksbrThe filter is a good choice. This filter will replace all the\nline breaks in the text with HTML's<br/>Label. It's like in a print shop, where you want to break a line at a certain place without starting a new paragraph.

For example, you may enter the following content in a text field on the AnQiCMS backend (such as the article abstractarchive.Descriptionor document contentarchive.Contentif they are not in rich text mode

这是第一行内容。
这是第二行内容。
第三行继续说。

In the template, you can use it like thislinebreaksbrto render it with a filter:

<div>
    {{ archive.Description|linebreaksbr|safe }}
</div>

Herearchive.Descriptionrepresents the text variable you want to process|linebreaksbrwill convert the following\nto<br/>However|safeIt is a very critical filter that tells the AnQiCMS template engine that this output is safe HTML content and does not require additional escaping processing. If it is missing|safe, the browser may treat<br/>tag as plain text, instead of interpreting it as a newline character, thus not achieving the expected effect.

The rendered HTML output will be roughly like this:

<div>
    这是第一行内容。<br/>
    这是第二行内容。<br/>
    第三行继续说。
</div>

Convert text line breaks to HTML's<p>Tag

If you want each independent line (or text block separated by empty lines) to form an independent HTML paragraph, you can wrap it with the<p>tag, thenlinebreaksThe filter will be more suitable. This filter is more intelligent: it treats each text block separated by one or more newline characters as a paragraph, and uses<p>Tagged. If there are line breaks within the same text block, it will convert these internal line breaks.<br/>.

Consider the same text content:

这是第一行内容。
这是第二行内容。

这是新段落的第一行。
这是新段落的第二行。

Note that there is a blank line between the second line and the new paragraph. UselinebreaksFilter:

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

The rendered HTML output will be:

<div class="article-content">
    <p>这是第一行内容。<br/>
    这是第二行内容。</p>

    <p>这是新段落的第一行。<br/>
    这是新段落的第二行。</p>
</div>

As you can see,linebreaksThe filter splits the text into different paragraphs based on empty lines and adds tags to each paragraph.<p>It also handles the line breaks within paragraphs.

How do you choose the right filter for you?

SelectlinebreaksbrOrlinebreaksIt mainly depends on your content structure and layout requirements:

• linebreaksbrApplicable to:

  • A brief description or list, such as a product feature list, contact information, you simply want them to be separated without additional paragraph spacing.
  • Any content you want to maintain line continuity, but need visual line breaks.

• linebreaksApplicable to:

  • Content of articles, blog posts, or other long-form texts, which include logical paragraph divisions. Use<p>Tags help to semantically mark HTML and make it easier to control paragraph styles through CSS (such as paragraph spacing).
  • When your text may contain blank lines, and you want these blank lines to naturally divide the content into different paragraphs.

Summary

In AnQiCMS template handling text line breaks (\nThe conversion to HTML tags is a common but crucial operation, which directly affects the final presentation of the content. By masteringlinebreaksbrandlinebreaksThese two filters, and always remember to match|safeFilter, you can easily achieve flexible and diverse text formatting requirements, whether it's simple inline breaks or structured paragraph divisions.These tools make AnQiCMS more adept at handling dynamic content display, helping you present website information better.

Frequently Asked Questions (FAQ)

1. Question: Why does my text look like it has line breaks in the AnQiCMS backend, but all squeezed into one line on the front-end page?Answer: This is because HTML language treats newline characters in plain text as\n）Has special handling. Browsers do not recognize it as a visual line break that needs to be broken. Only HTML tags, such as<br/>（enforces line break）or<p>(Paragraph), in order to create a visual line break effect in the browser. In the AnQiCMS template,linebreaksbrandlinebreaksThe filter is designed to solve this problem, converting newline characters in plain text to HTML tags that browsers can recognize.

2. Question: I usedlinebreaksbrorlinebreaksthe filter, but the text is still displayed on the page.<br/>or<p>This text, not actual line breaks or paragraphs, why is that?Answer: It's very likely that you forgot to add at the end of the filter chain|safeFilter.AnQiCMS template engine defaults to HTML-encoding all output content to prevent potential security risks (such as XSS attacks).|safeExplicitly tell the template engine that this content is "safe" HTML code, which does not need to be escaped, and let it render directly. For example:{{ archive.Content|linebreaks|safe }}.

3. Ask: Is it necessary to use these filters since the content of my article is published from the Markdown editor of the AnQiCMS backend?Answer: Generally, it is not necessary.AnQiCMS's Markdown editor automatically converts Markdown syntax (including line breaks and paragraphs) into corresponding HTML structure during content saving or front-end rendering.archiveDetailorpageDetailThe content retrieved by the tag, if the Markdown editor is enabled, and the tag containsrender=trueParameter (or default enabled rendering), AnQiCMS will automatically convert it to HTML. Therefore, output directly{{ archive.Content|safe }}It already includes the converted HTML tags. Only in rare cases, if the Markdown rendering result does not meet expectations, or the content is not from a Markdown editor but a plain text field, should manual use be consideredlinebreaksorlinebreaksbr.