My website comment content has multiple lines of text, how to use the Anqi CMS filter to automatically add HTML line numbers to each line?

In website operation, user comments are an important manifestation of community activity.When the comment content is long, especially when it contains multiple lines of text, it may be inconvenient for users to read or quote specific content.At this time, automatically adding line numbers to the comment content not only significantly improves readability but also facilitates communication and referencing between users for specific lines, greatly optimizing the user experience.

AnQi CMS relies on its efficient architecture based on the Go language and flexible Django-style template engine, providing powerful customization capabilities for content display. For the need to add line numbers to comment content, we can make use of its built-inlinenumbersTo implement a filter, this is a simple and practical feature that can automatically add line numbers to multi-line text content.

The solution of Anqi CMS:linenumbersFilter

The AnQi CMS template engine supports processing output variables through 'filters'. The syntax of the filter is usually{{ 变量 | 过滤器名称 }}. To meet the need for adding line numbers to multiline text, AnQi CMS provides a filter namedlinenumbers.

This filter's working principle is that it recognizes line breaks in text and then generates an HTML structure with line numbers for each line of text, for example<p>1. 第一行内容</p><p>2. 第二行内容</p>.

How to applylinenumbersFilter

Suppose you are editing the comment list template file of a website, usually this file may be located in the current template directory undercomment/list.htmlor directly embedded in the template of the article detail page (such asarchive/detail.html).

In the loop of the comment list, we usually use{% commentList comments ... %}such tags to get comment data and{{ item.Content }}to output comment content. Hereitem.Contentis the multiline text we want to add line numbers to.

To additem.ContentAdd line numbers, just apply them in the outputlinenumbersFilter. It is especially worth noting that|safefilters. Due tolinenumbersThe filter will generate HTML structure (for example<p>1. 第一行</p><p>2. 第二行</p>），To ensure that these HTML codes are parsed correctly by the browser rather than being escaped as plain text, we must calllinenumbersafter chaining call|safefilter.

Below is an application in the Anqi CMS templatelinenumbersCode example of the filter:

{# 假设这里是评论列表模板文件的某一部分 #}
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
        {# 其他评论信息，例如用户名、时间等 #}
        <div class="comment-author">{{ item.UserName }} - {{ stampToDate(item.CreatedTime, "2006-01-02") }}</div>
        
        {# 评论内容区域：应用 linenumbers 过滤器并确保 HTML 安全输出 #}
        <div class="comment-content">
            {{ item.Content|linenumbers|safe }}
        </div>
        
        {# 其他评论控制，例如点赞、回复按钮 #}
        <div class="comment-control" data-id="{{item.Id}}">
            <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
            <a class="item" data-id="reply">回复</a>
        </div>
    </div>
    {% else %}
    <div>
        目前还没有评论，快来发表您的看法吧！
    </div>
    {% endfor %}
{% endcommentList %}

Step-by-step guide

1. Log in to the Anqi CMS backend: Go to the [Template Design] function area, find the template you are currently using.

2. Locate the template file: Locate the template file related to the comment list according to the template directory structure, for examplecomment/list.htmlorarchive/detail.html(If the comment is directly embedded in the article detail page).

3. Modify the template codeOutput comments in a loop:{{ item.Content }}Modify the position to:{{ item.Content|linenumbers|safe }}.

4. Save and update cacheAfter saving the template file, return to the Anqi CMS backend, click the Update Cache button at the bottom of the left navigation bar, and clear the system cache.

5. Preview effect：Refresh the page on the website front-end to see that each line of the comment content is automatically numbered, for example:

   <div class="comment-content">
       <p>1. 这是一段多行评论内容。</p>
       <p>2. 第二行，内容继续。</p>
       <p>3. 第三行，非常清晰。</p>
   </div>
   

   You can beautify these line numbers and text by customizing the CSS style, for example to.comment-content paddtext-indentorpadding-leftAdjust alignment.

Points to note

• |safeFilter is indispensable.: As emphasized in the code example,|safeFilter is crucial. If omitted,linenumbersThe HTML line number structure generated by the filter is displayed directly as plain text on the page, affecting the expected effect.
• Filter chaining call: The Anqi CMS template engine supports chained filter calls, which means a variable can be processed by multiple filters consecutively, such as{{ item.Content|linenumbers|safe }}. Filters will take effect in order from left to right.
• Clear cache: After modifying the template file, the front-end page may not update immediately, because the system may have a template cache.Please make sure to click the [Update Cache] button in the background to ensure that the latest changes take effect.
• Markdown content processing: If your comment content is in Markdown format,linenumbersThe filter still works properly because it is usually added line numbers after the content is converted to HTML or plain text, so it does not affect the rendering effect of Markdown.

By simply applyinglinenumbersFilter, with Anqi CMS you can enhance the reading experience of website comment content, making multiline comments no longer disorganized.This fully demonstrates the flexibility and practicality of the Anqi CMS template engine, making content operation more efficient and convenient.

Frequently Asked Questions (FAQ)

1. Question:linenumbersCan the line number style generated by the filter be modified?Answer:linenumbersThe line numbers generated by the filter are wrapped in HTML tags (usually <p>Tags, and line numbers text. You can beautify the display of these generated tags by adding CSS styles, such as adjusting font, color, size, or by::beforeThe pseudo-element is used to control the display position and style of line numbers more finely.

2. **Question: If I only want to add line numbers to part of the comment content