Users of AnQiCMS (AnQiCMS) may occasionally encounter some seemingly strange phenomena when using template filters, such as when you try to uselinenumbersWhen adding line numbers to the article content with a filter, it only showed "1. " and the subsequent line numbers were not visible.This is not a problem with the filter itself, but is closely related to the HTML rendering mechanism and the way content is processed.

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 designed to add line numbers to each line of text content, usually in the format of “1. ”, “2. ”, etc., which is very useful for displaying code, poetry, or other text that needs to emphasize line numbers.It expects the input to be already identified as multiline data.

The core of the problem: the "hidden wall" of HTML,

Why does it only display '1. '? The root cause lies in the HTML rendering mechanism.HTML (HyperText Markup Language) has an important feature when handling text, that is, it will treat multiple consecutive spaces, tabs (\t) as well as the line break we commonly use,(\nCombine into a single space to display.

This means that even if your article content is edited in the background line by line, each line is separated by a newline character produced by pressing the Enter key.\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. From the browser's perspective, all the\nIt was all absorbed into a space, so it only saw a single line of text.

WhenlinenumbersThe filter intervenes at this point, facing the content that the browser has already compressed into a single line.Naturally, it will only add the line number “1. ” for this single line of content, without any subsequent “lines” to be numbered.

Solution: Preprocess your content.

To makelinenumbersThe filter 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 newline characters.\nThe character is converted into a newline tag that HTML browsers can clearly recognize. Anqi CMS provides two very practical filters to complete this task:linebreaksbrandlinebreaks.

  1. UselinebreaksbrFilter (recommended for scenarios where line numbering of code or poetry is needed) linebreaksbrThe filter will replace all newline characters in the text (\n) directly to HTML's<br/>.<br/>Tags are the HTML tags that force line breaks, and browsers will break lines according to it for display. Therefore, when you combinelinebreaksbrthe filter meetslinenumbersfilters, each\nin the content will become a<br/>,linenumbersIt can accurately identify each line and add line numbers to it.

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

The key is that you need to use these pre-processing filters withlinenumbers串联起来使用过滤器，形成一个处理链。

How to use correctly: Template code example

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

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>In tags, to ensure that the browser can display the original whitespace and newline characters as they appear in the text, especially when the content may contain multiple consecutive spaces or special formatting.

Correct demonstration 2 (convert newline characters to)<p>Tags, and number the paragraphs):

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

Additional hints and **practice

  • |safeThe filter is indispensable: While usinglinebreaksbrorlinebreaksAfter converting the content, the original\nWill become&lt;br/&gt;or&lt;p&gt;Entities in HTML. To make the browser parse these HTML tags correctly instead of displaying them as plain text, you must add it at the end of the filter chain.|safefilter.
  • Processing Markdown content:If your content is edited through a Markdown editor, AnQi CMS will usually go throughrenderThe filter converts it to HTML. In this case, the HTML structure may already contain<p>tags. You can try to userenderit after thatlinenumbersFor example{{ archive.Content | render | linenumbers | safe }}. If the effect is not good, you may need to fine-tune the Markdown output structure orrender.linebreaksbr(But usually not recommended to mix them, as it may cause an 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 your content after it islinenumbersHow was its HTML structure before processing. For example, was it plain text or had 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 filter provided by Anqi CMS, you can easily solve itlinenumbersThe filter only displays questions marked with '1. ', achieving perfect content line numbers.

Frequently Asked Questions (FAQ)

  1. Q: I have already usedlinebreaksbrFilter, but the page still only displays '1. ', and the subsequent line numbers are still missing, what's the matter? A:This may be because the original content you have does not have it.\nCharacters. For example, if you use a rich text editor and press Enter, the content is processed into a large<p>...</p>tag or content