How to make the multi-line text field in the custom content model of Anqi CMS automatically display as an HTML paragraph?

In managing website content in AnQi CMS, we often encounter such needs: to customize the multi-line text field in the content model, and hope that it can be automatically displayed on the front-end page in a format with HTML paragraphs (for example,<p>Labels are displayed elegantly rather than as simple blocks of text. This not only improves the readability of the content but also makes the website layout more professional.

Auto 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.

Understand 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 it in the 'Content Model' management, refer tohelp-content-module.mdThe input method of content usually has two types:

1. Text input:Users directly input content in the text box and use the Enter key to segment. In this case, the backend usually saves plain text with line breaks.\n)
2. Rich text or Markdown input:If you have enabled the Markdown editor in the background (can be configured in “Global Settings” -> “Content Settings”, seehelp-markdown.md），User can use Markdown syntax to write content, for example, using a blank line to create paragraphs, or using#/*The equal sign is used for formatting. The text saved on the backend will be in Markdown format.

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

Using template filters to display HTML paragraph formatting

No matter whether your multi-line text field is plain text or Markdown, the template engine of Anqi CMS provides corresponding filters to help us convert it into content with HTML paragraph formatting. These filters (available indesign-tag.mdandtag-filters.mdauto. Find more information here) It can process raw text and generate HTML structure as you expect.

auto. For plain text input:linebreaksFilter

When your multi-line text field contains plain text, and you want each return-to-line to be automatically converted to an HTML paragraph (<p>), or at least a simple line break (<br/>Label），thenlinebreaksorlinebreaksbrFilter is your ideal choice.

• linebreaksFilter:It will convert each single newline to<br/>, and convert two consecutive newlines (i.e., blank lines) to a new<p>Tags wrap paragraphs. This is very useful for plain text content that wants to distinguish paragraphs with blank lines.
• linebreaksbrFilter:Its behavior is simpler and more direct, converting each newline character directly into<br/>tags without creating<p>Label. This applies to scenarios where simple line breaks are needed without emphasizing paragraph structure.

Important reminder: Make sure to use.|safeFilter

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

Example Usage:

Assuming your multi-line text field is namedContentand stored inarchive对象中，You can call it like this in the template of the article detail page:

{# 假设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 refer tofilter-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 using Markdown syntax, then the Safe CMS provides an editor namedrenderThe filter, specifically used to convert Markdown formatted content to HTML.

Example Usage:

Similarly, assuming your multi-line text field name isContentand stored inarchiveThe Markdown editor is enabled in the object, and you have turned it on 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, converting it to standard HTML structure, including converting Markdown paragraphs to<p>tags, and headings to<h1>to<h6>Lists converted to English<ul>or<ol>And so on,|safeFilters are indispensable here to ensure that the generated HTML can be rendered correctly by the browser.

（More aboutrenderInformation about filters can be checkedfilter-render.mdandtag-/anqiapi-archive/142.htmlRegarding EnglishContentfield'srenderParameter description.)

Combine with actual: InarchiveDetailapplication in tags such as

In the actual template creation, you usually will find in the document details(archiveDetail), category details(categoryDetail）or single page details（pageDetail）etc. are called within these multi-line text fields. witharchiveDetailfor example, its content field（Content）supports throughrenderParameters are converted to Markdown, but used directly.{{archive.Content}}Combined with filters, it 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 using these filters, you can flexibly control the display effect of multi-line text fields according to the actual situation of content input, whether it is simple paragraph line breaks or complex Markdown formatting, all of which can be presented in a graceful and professional HTML format on the front end of the website.

---

Common Questions (FAQ)

1. Why did I use|linebreaksor|renderBut the original text is still displayed on the page, without HTML formatting?The most common reason for this is that you missed adding to the end of the filter chain|safeFilter. For security reasons, AutoCMS defaults to escaping all variable content output via templates as HTML entities. If not|safe,<p>and<br/>HTML tags will be escaped as<p>and<br/>，browser will not be able to parse it as a real HTML element. Please make sure your code looks like this:{{ 您的变量|过滤器|safe }}.

2.linebreaksandlinebreaksbrWhat are the differences between the filters? Which one should I choose? linebreaksThe filter will take a single newline character (\n),<br/>Labels, while two consecutive newline characters (