How to make the multiline text field in Anqin CMS automatically display as a paragraph with HTML formatting?

When managing website content in Anqi CMS, we often encounter such needs: to customize the multi-line text field in the content model, hoping it can automatically display on the front-end page in a format with HTML paragraphs (such as<p>Labels display elegantly, rather than simple text stacking. This not only enhances the readability of the content but also makes the website layout more professional.

AnQi CMS provides a powerful template engine and flexible filter functions, which can easily achieve this goal.Below, we will discuss in detail how to intelligently convert multi-line text fields to HTML paragraph format.

Understanding the two main situations of content input.

In the Anqi CMS backend, when you add a 'Multiline Text' field to a custom content model (such as creating in the 'Content Model' management, refer to thehelp-content-module.mdThe content input method usually has two types:

1. Plain text input:Users directly input content in the text box and use the enter key for segmentation. In this case, the backend usually saves it with line breaks:\nPlain text.
2. Rich text or Markdown input:If you have enabled the Markdown editor in the background (you can configure it in "Global Settings" -> "Content Settings", see details for "help-markdown.md），users can use Markdown syntax to write content, such as using empty lines to create paragraphs, or using#/*Formatting with equal signs. The backend will save it in Markdown format.

Understanding these two input methods is the key to choosing the correct display strategy.

Use template filters to display HTML paragraph formatting

No matter whether your multi-line text field is plain text or Markdown, Anqi CMS provides corresponding filters to help us convert it into content with HTML paragraph formatting. These filters (can bedesign-tag.mdandtag-filters.mdMore information can be found here) can process the original text and generate the HTML structure you expect.

1. For plain text input: uselinebreaksFilter

When your multiline text field contains plain text and you want each newline to be automatically converted to an HTML paragraph (<p>tag), or at least a simple newline (<br/>Label, thenlinebreaksorlinebreaksbrThe filter is your ideal choice.

• linebreaksFilter:It will convert each single newline to<br/>, and will convert two consecutive newlines (i.e., blank lines) to a new<p>Labelled paragraph. This is very useful for those who want to distinguish paragraph text by using blank lines.
• linebreaksbrFilter:Its behavior is simpler and more direct, converting each newline character directly.<br/>without creating any<p>Label. This is suitable for scenarios where only simple line breaks are needed without emphasizing the paragraph structure.

Important note: Make sure to use|safeFilter

No matter which filter you choose, you must follow it with a|safeFilter, for example{{ archive.Content|linebreaks|safe }}This is because Anq CMS, for security reasons, defaults to escaping all content output through templates to prevent XSS attacks. If you do not use|safeEven thoughlinebreaksGenerated<p>or<br/>Tags, they will also be escaped as<p>and<br/>and will be displayed as raw text on the page, rather than being parsed as HTML elements by the browser.|safeTell the template engine explicitly: This content is safe, no escaping is required, and it can be output directly as HTML.

Usage example:

Assume that your multi-line text field is namedContentand stored inarchiveIn the object, you can call it like this in the article detail page template:

{# 假设archive.Content是纯文本，通过回车分段 #}
<div class="article-content">
    {{ archive.Content|linebreaks|safe }}
</div>

{# 如果只需要简单的换行，不生成P标签 #}
<div class="article-description">
    {{ archive.Description|linebreaksbr|safe }}
</div>

(More aboutlinebreaksandlinebreaksbrUsage, you can checkfilter-linebreaks.md)

2. For Markdown input: userenderFilter

If you have enabled the Markdown editor in the background and your multi-line text field content is written in Markdown syntax, then Anqi CMS provides a namedrenderThe filter, specifically used to convert Markdown formatted content to HTML.

Usage example:

Similarly, assuming your multi-line text field is namedContentand stored inarchiveIn the object, and you have enabled the Markdown editor in the background "Global Settings" -> "Content Settings".

{# 假设archive.Content是Markdown格式的文本 #}
<div class="article-body">
    {{ archive.Content|render|safe }}
</div>

ThisrenderThe filter will parse Markdown syntax and convert it to standard HTML structure, including converting Markdown paragraphs to<p>tags, titles to<h1>to<h6>converted to a list<ul>or<ol>and so on,|safeThe filter is indispensable here to ensure that the generated HTML can be correctly rendered by the browser.

(More aboutrenderFor information about the filter, refer tofilter-render.mdandtag-/anqiapi-archive/142.htmlabout,Contentfield'srenderParameter description.)

Combine with actual: inarchiveDetailApplication in tags such as

In the actual template creation, you usually call these multi-line text fields in the document details(archiveDetail), category details (categoryDetail) or single page details (pageDetail). Inside these tags, you can call these multi-line text fields.archiveDetailFor example, its content fieldContentsupports throughrenderparameter for Markdown conversion, but using it directly{{archive.Content}}with a filter will be more flexible:

{% archiveDetail archiveContent with name="Content" %}
<div class="post-content">
    {# 如果是Markdown内容，使用render过滤器 #}
    {{ archiveContent|render|safe }}
    {# 如果是纯文本内容，使用linebreaks过滤器 #}
    {# {{ archiveContent|linebreaks|safe }} #}
</div>

You can choose the most suitable filter according to your actual backend content input habits.

By reasonably utilizing these filters, you can flexibly control the display effect of the multi-line text field according to the actual content input, whether it is simple paragraph line breaks or complex Markdown formatting, it can present elegant and professional HTML formats on the website front end.

Frequently Asked Questions (FAQ)

1. Why did I use the tag in the template|linebreaksor|renderBut the original text still displays on the page without HTML formatting?The most common reason is that you forgot to add it at the end of the filter chain.|safeFilter. Aqiyu CMS, for security reasons, defaults to escaping all variable content output through templates. If not|safe,<p>and<br/>the following HTML tags will be escaped as<p>and<br/>, the browser will not be able to parse it as a real HTML element. Be sure to make sure your code looks like this:{{ 您的变量|过滤器|safe }}.

2.linebreaksandlinebreaksbrWhat are the differences between the filters? Which one should I choose? linebreaksThe filter will replace a single newline character with\nConvert to HTML's<br/>Labels, while two consecutive line breaks (