The user of AnQiCMS (AnQiCMS) may occasionally encounter some strange phenomena when using template filters, such as when you try to uselinenumbersThe filter adds line numbers to the article content, but it only shows '1.' ”，而后续的行号却不见踪影。This is not a problem with the filter itself, but is closely related to the HTML rendering mechanism and content processing.

UnderstandinglinenumbersThe role of the filter

First, let's briefly review.linenumbersThe design intention of the filter. According to the document description of Anqi CMS,linenumbersThe filter is intended to add line numbers to each line of text content, usually prefixed with "1.autoEnglish format such as ' ” ' is very useful for displaying code, poetry, or other texts that require emphasizing line numbers.It expects input that is already recognized as multiline.

The core of the problem: the 'invisibility wall' of HTML

Why does it only show "1.Is it?The root cause of the problem lies in the HTML rendering mechanism.\t) as well as the line break we commonly use (\nThis translates to a single space for display.

This means that even if your article content is edited in the background in multiple lines, each line is separated by a newline character pressed.\nCharacters, but when this content is directly output to an HTML page without special processing, the browser treats it as a continuous block of text. In the browser's view, all of the content's\nIt was 'absorbed' into a space, so it only 'saw' a single line of text.

WhenlinenumbersThe filter intervenes at this point in processing, facing content that the browser has already 'compressed' into a 'line'.Naturally, it will only add “1.” for this unique line of content.The line number is missing, and there is no subsequent 'line' to be numbered.

Solution: Preprocess your content.

To makelinenumbersFilter correctly identifies and adds line numbers to each line of content, the key is that you need to preprocess the original text content, which includes the line break representation\nCharacters are converted to HTML line break tags that browsers can clearly recognize. AnQi CMS provides two very practical filters to complete this task: linebreaksbrandlinebreaks.

  1. UselinebreaksbrFilter (recommended for scenarios such as line numbering in code or poetry) linebreaksbrFilter will convert all newline characters in the text into HTML's\n) directly into HTML's<br/>Label.<br/>The tag is a mandatory line break tag in HTML, the browser will use it for line breaks during display. Therefore, when you uselinebreaksbrFilter is related tolinenumbersfilterers together, every\ncontent will become one<br/>,linenumbersCould accurately identify each line and add line numbers to it.

  2. UselinebreaksFilter (for numbering content of paragraph structure) linebreaksThe filter will process line breaks more intelligently. It will wrap single-line text in<p>tags and convert blank lines into<br/>If you want the content to be displayed in paragraphs and each paragraph to be numbered (paragraphs are separated by<p>), it is also a good choice.linebreaks.

The key is that you need to use these preprocessing filters withlinenumbersFilter chaining to form a processing chain.

How to use correctly: Template code example

Assuming yourarchive.ContentThe variable contains the article content you need to add line numbers.

Incorrect example (may only show “1. ”):

{# 假设 archive.Content 是包含多行文本的字符串 #}
<div>
    {{ archive.Content | linenumbers }}
</div>

Correct example 1 (recommended: convert newline characters to<br/>):

{# 将换行符转换为 <br/>，然后添加行号。注意加上 |safe 防止 HTML 标签被转义。 #}
<div style="white-space: pre-wrap;">
    {{ archive.Content | linebreaksbr | linenumbers | safe }}
</div>

Here, we usually work with CSS styleswhite-space: pre-wrap;or wrap the content in<pre>Labels within the text to ensure that the browser displays the original whitespace and line breaks as in the text, especially when the content may contain multiple consecutive spaces or special formatting.

正确示范2（将换行符转换为English）<p>标签，并为段落编号）：

{# 将文本处理成段落，然后为每个段落添加行号。同样需要 |safe。 #}
<div>
    {{ archive.Content | linebreaks | linenumbers | safe }}
</div>

额外提示与**实践

  • |safeThe filter is indispensable:When usinglinebreaksbrorlinebreaks转换内容后，原始的\nWill become&lt;br/&gt;or&lt;p&gt;The HTML entities. To make the browser parse these HTML tags correctly instead of displaying them as plain text, you must add them to the end of the filter chain.|safeFilter.
  • Markdown content processing:If your content is edited through a Markdown editor, Anqi CMS will usually throughrenderThe filter converts it to HTML. In this case, the HTML structure may already contain.<p>tags. You can try to use them directly after.render.linenumbersfor example{{ archive.Content | render | linenumbers | safe }}。If the effect is not good, it may require a more refined adjustment of the Markdown output structure, orrenderbefore usinglinebreaksbr(But usually not recommended to mix them, as it may cause abnormal HTML structure).
  • Check the original HTML:If you still encounter problems, a very useful debugging trick is to view the source code of the rendered page. Check that your content is being displayed as expected.linenumbersHow is the HTML structure before processing? For example, is it plain text or has it already included<br/>or<p>tags? This can help you determine which filter chain link is causing the problem.

By understanding the rendering principles of HTML and correctly using the content preprocessing filters provided by the security CMS, you can easily solve itlinenumbersFilter only shows issues with '1. ', achieving perfect presentation of content line numbers.

Common Questions (FAQ)

  1. Q: I have already usedlinebreaksbrFilter, but the page still only displays “1. ”, and the line numbers in subsequent lines are still missing. What's the matter? A:This situation may occur if there is no original content in your content.\nCarriage return character. For example, if the rich text editor you are using converts the content into a large one when you press Enter<p>...</p>Tag or content