The display effect of the introduction in the custom module list page of the website directly affects the user's reading experience and the overall beauty of the page.We often encounter such a situation: The multi-line introduction meticulously entered in the background, containing paragraphs and line breaks, but when displayed on the front-end page, these formatting information is 'disappeared', all the text is cramped together, making it difficult to read.This is usually because HTML defaults to ignoring extra whitespace and newline characters in text.

Fortunately, Anqi CMS provides a powerful template engine, which we can use to easily solve this problem, allowing multi-line descriptions to be displayed elegantly on the list page.

Common troubles in introduction layout

When we add an 'abstract' field to the custom content model in the AnQi CMS backend for articles, products, or any custom content, we usually input text that includes multiple lines or even multiple paragraphs to express ourselves clearly. For example:

这是第一段简介。
讲述了产品的主要特点和优势。

这是第二段简介。
提供了购买指南和注意事项。

However, if we use it directly in the list page template{{ item.Description }}to output this content, the browser will render it as a single line of continuous text:

这是第一段简介。讲述了产品的主要特点和优势。这是第二段简介。提供了购买指南和注意事项。

This flat display method not only destroys the original layout structure, but also greatly reduces the readability of the content.

linebreaksFilter: A powerful assistant for text beautification.

To solve the above problem, we can introduce the Anqi CMS template engine'slinebreaksfilter. The main function of this filter is to replace line breaks in plain text with\n）Intelligently converts to HTML line break tag（<br />）Or paragraph tag（<p>)

The AnQi CMS template engine supports two filters related to line breaks, which differ in processing methods:

  1. linebreaks: This filter is relatively 'intelligent'. It will convert a single newline character into an equivalent newline in the output.\nConvert to HTML's<br />tags, while two consecutive newline characters(\n\nusually represent a new paragraph) are converted to use<p>An HTML tag wraps a paragraph. This means that if you use empty lines to break the text in the backend biography,linebreaksThe filter will help you automatically generate HTML paragraphs, making the content more structured.

  2. linebreaksbr: The filter is relatively simple and direct. It will only replace all line breaks with\nConvert to HTML统一<br />tags without introducing extra<p>tags. If you just want to retain the line break effect of each line, and do not want the page structure to appear<p>Label, or if you plan to control the line spacing with CSS yourself, thenlinebreaksbrit would be a more suitable choice.

in the practical application on the custom module list page

Assuming you have a custom content model in Anqi CMS, the list page template file isarticle/list.htmland the model includes a namedDescriptionmulti-line text introduction field.

To beautify the display of this profile field, so that it retains the line breaks and paragraph structure entered in the background, you can follow the following steps:

  1. Locate the profile output code: Open your custom module list page template file (such as/template/您的模板目录/article/list.htmlor/template/您的模板目录/product/list.htmlThe specific path depends on your template structure and module settings). Find the line that displays the introduction, which may look like:

    <div class="item-description">{{ item.Description }}</div>

  2. applylinebreaksFilter: Modify the above code to:

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

    Note here that|safeThe filter is crucial.linebreaksThe filter will convert plain text content into content containing HTML tags (such as<br />or<p>The string in brackets.The template engine of AnQiCMS defaults to HTML-escape all output variable content to prevent potential security issues (such as cross-site scripting attacks XSS).|safeThe filter, the content will be displayed directly on the page<p>/<br />This text, not actual line breaks and paragraph effects.|safeThe filter explicitly tells the template engine that this content is confirmed HTML code, which can be rendered directly without escaping.

  3. SelectlinebreaksbrPerform a simple line break: If you do not want to generate paragraph tags, you just want to convert all newline characters to simple<br />, you can change the code to:

    <div class="item-description">{{ item.Description|linebreaksbr|safe }}</div>

Save your template file and refresh the page, and you will find that the multi-line summary on the list page is now displayed correctly with line breaks and paragraphs, greatly improving the readability and aesthetics of the page.

By this simple operation, you can let the Anqi CMS custom module list page's introduction content say goodbye to the 'messy pot' layout, and present it to visitors in a more professional and friendly manner.

Frequently Asked Questions (FAQ)

Q1: Why did I uselinebreaksAfter the filter, the page instead displayed<p>and<br/>tags instead of actual line breaks and paragraphs?

A:This is a very common problem, usually because you forget tolinebreaks(orlinebreaksbradd after the filter)|safeFilter. The Anqi CMS template engine, for security reasons, defaults to escaping all output content. This means that whenlinebreaksConvert your plain text to include<p>and<br/>These HTML tags' string after, if not added|safeThe template engine will treat these tags as ordinary text characters, causing them to be displayed directly on the page. Add|safeThis explicitly tells the template engine that this content is trusted HTML code that can be rendered as is, thus correctly displaying line breaks and paragraphs.

Q2:linebreaksandlinebreaksbrWhat is the difference? Which one should I use?

A:The main difference between the two lies in how they convert line breaks in text to HTML tags:

  • linebreaks: will convert a single line break into\nConvert to HTML's<br />Labels, and also convert consecutive two newline characters (\n\nThey usually represent a blank line, indicating a new paragraph) using<p>An HTML tag wrapping a paragraph. When you enter content in the background, you will use empty lines to separate logical paragraphs, and you also want to retain this paragraph structure on the front end, thenlinebreaksIs a better choice.
  • linebreaksbrIt is more direct, it will only convert all line breaks (\n) to统一的.<br />tags without generating any<p>Label. If you have no strict requirements for the division of paragraphs in the introduction content, or if you want to completely control the line spacing and the style of block-level elements through CSS, you do not wantlinebreaksintroduce additional<p>Tags, thenlinebreaksbrMay be more suitable for your needs.

Q3: If my profile content is too long, can I also limit the number of characters besides beautifying line breaks?