How to use `linebreaks` and `linebreaksbr` filters to convert line breaks in the plain text content entered by the Anqie CMS user to HTML`

`or`
` tag?

In a content management system, handling plain text user input and displaying it in the desired format on a webpage is a common requirement.When the user enters text with line breaks in the background editor, the browser does not render them as line breaks in HTML by default.All content may be cramped on a line, causing layout confusion and affecting reading experience.Luckyly, AnQiCMS provides a convenient template filter to solve this problem.Today, let's explore how to cleverly utilizelinebreaksandlinebreaksbrThese two filters convert line breaks in plain text to HTML-compliant standards.<p>or<br>.

Why do line breaks in plain text fail in web pages?

When we edit a document, pressing the Enter key actually inserts a 'newline' character (\nor\r\n）。But in the world of HTML, when the browser parses HTML content, it ignores multiple spaces and newline characters. Unless you use specific HTML tags, such as<p>(paragraph) or<br>(New line), otherwise all text will be treated as a continuous string, displayed on one line.

This is why even if you enter multiline text in the AnQiCMS backend content editor, it may still be cramped together when output to the front-end page.In order to make these newline characters 'alive' on the web page, we need to process them.

Introduce the solution:linebreakswithlinebreaksbr

AnQiCMS's template engine provides a series of powerful filters, among whichlinebreaksandlinebreaksbrIt is specifically used to handle newline characters in plain text. Its role is to intelligently convert newline characters in plain text into HTML tags, thus achieving the formatting display of content.

1.linebreaksFilter: Automatically generates paragraphs and line breaks

linebreaksThe filter works in a manner similar to the 'auto-wrap' feature in many text editors.It recognizes the newline patterns in plain text and converts them into more structured HTML paragraphs.

• Working principle:

  • A single newline character (such as when the user presses Enter once) will be converted to HTML's<br>tag, to achieve simple inline line breaks.
  • Two or more consecutive newline characters (usually indicating that the user has entered an empty line, intending to start a new paragraph) are converted into a pair<p>and</p>Label, wrap adjacent text content to form an independent paragraph.

• Usage scenario:When you want the user's input text to automatically form structured paragraphs,linebreaksIt is an ideal choice. For example, it is used to display the main text of articles, blog content, product descriptions, etc., which can keep the content well segmented visually and enhance the reading experience.

• Code example:

  Assuming your document content field (for examplearchive.Contentorarchive.Description) stores the following plain text:

  第一段内容。
  这是第一段的第二行。
  
  这是第二段内容。
  它有自己的独立意义。
  

  In the template, you can use it like thislinebreaksFilter:

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

  Render output:

  <div class="content-body">
      <p>第一段内容。<br />这是第一段的第二行。</p>
  
      <p>这是第二段内容。<br />它有自己的独立意义。</p>
  </div>
  

  Note:UselinebreaksorlinebreaksbrAfter that, since they generate HTML tags, they must follow closely|safefilter.|safeThe function is to inform the template engine that this content is safe and does not require HTML entity encoding. If missing|safe, you may see the original content on the page<p>and<br />Label, rather than their intended rendering effect.

2.linebreaksbrFilter: simple direct inline wrapping.

linebreaksbrThe filter is more direct and pure. Its purpose is to replace all line breaks without discrimination with HTML's<br>Labels, without introducing<p>.

• Working principle:Whether it is a single line break or multiple consecutive line breaks,linebreaksbrWill be replaced with one<br>Label. It only pays attention to line separation physically, not concerned with semantic paragraph division.

• Usage scenario:When your plain text content needs to preserve the exact line breaks of user input and does not want to be parsed as separate HTML paragraphs, linebreaksbrVery useful. For example, to display poems, address information, code snippets, ordered or unordered list items, or any text that requires precise control of line spacing.

• Code example:

  Continue the above plain text content:

  第一段内容。
  这是第一段的第二行。
  
  这是第二段内容。
  它有自己的独立意义。
  

  In the template, you can use it like thislinebreaksbrFilter:

  <div class="address-info">
      {{ user.Address|linebreaksbr|safe }}
  </div>
  

  Render output:

  <div class="address-info">
      第一段内容。<br />这是第一段的第二行。<br /><br />这是第二段内容。<br />它有自己的独立意义。
  </div>
  

  Here you will see, even empty lines will be converted into one<br />tags, because they only do simple replacements.

How to choose the appropriate filter?

SelectlinebreaksOrlinebreaksbrIt mainly depends on your expectations for the content format:

• If you want to make plain text content appearwith clear paragraphs and structurelike a formal article, thenlinebreaksit is a better choice. It will create HTML paragraphs more intelligently.
• If you only needsimple inline line breaks, not concerned with paragraph semanticsOr need to be displayed strictly according to the input content, such as displaying a poem, an address, or a manually maintained list, thenlinebreaksbrwill meet your needs.

Generally, for core content such as article details, product introductions,linebreaksCan provide a better semantic structure. And for the brief information in the sidebar, contact information, and other information that needs to be displayed line by line,linebreaksbrit is more suitable.

Apply the filter to AnQiCMS template

In AnQiCMS, you can apply these filters after any template tag that outputs plain text. Common application scenarios include:

• Document content: {{ archive.Content|linebreaks|safe }}
• Document description/summary: {{ archive.Description|linebreaks|safe }}or{{ archive.Description|linebreaksbr|safe }}
• Single page content: {{ page.Content|linebreaks|safe }}
• Category Description: {{ category.Description|linebreaks|safe }}
• Custom text field:Any custom field defined in the background as multiline text.

By simply adding after the template variable|linebreaks|safeor|linebreaksbr|safeThis will breathe new life into your AnQiCMS website content, giving it better layout and user experience.

Frequently Asked Questions (FAQ)

Q1: I usedlinebreaksorlinebreaksbrFilter, but there is still no line break effect on the page, why is that? A1: This is likely because you forgot to add at the end of the filter chain|safefilter.linebreaksandlinebreaksbrAll generated are HTML tags, if missing|safeThese HTML tags will be treated as plain text by default (for example<p>Will become<p>), causing the browser to parse them incorrectly. Make sure your code is similar to{{ archive.Content|linebreaks|safe }}.

Q2: Will these filters affect the SEO of my website? A2: Generally speaking, using them correctlylinebreaksorlinebreaksbrThese filters have no negative impact on SEO and may even have a positive effect.linebreaksGenerated<p>Tags have good semantic structure, which helps search engines understand the division of content paragraphs.linebreaksbrAlthough the semantics are slightly weak, it can ensure the clear display of content, improve user experience, and indirectly benefit SEO.The key is to ensure the readability and structural rationality of the content, rather than just adding tags for the sake of it.

Q3: Can I use these filters in all text fields? For example, the title field? A3: Theoretically, it can be used on any text output, but in practical applications, it needs to be decided according to the characteristics of the field. For example, the title field (such asarchive.TitleIt is usually a single-line text, and there are rarely line breaks, even if there are, they are converted to `<'