AnQiCMS (AnQiCMS) is an efficient and flexible content management system that provides rich content display capabilities while also offering a comprehensive commenting feature for user interaction.Understand how to effectively display comment lists, especially for handling multi-level replies, is crucial for enhancing the user engagement and content depth of a website.

AnQiCMS Comment Function Implementation Basis

In AnQiCMS, the comment feature is an important part of website content interaction.The system not only built-in support for comments on articles, products, and other content, but also provides a powerful backend management interface, allowing website operators to easily review, manage, and respond to user comments.The display of all comments is achieved through flexible template tags, which means we can highly customize the appearance and interaction of the comment area based on the design needs of the website.

Core: Calling and Displaying Comment List

To display comments on the website page, AnQiCMS providescommentListTemplate tag. This tag is the core of the comment feature, allowing us to retrieve comment data for specified articles and control its display.

For example, on an article detail page, we can call the comment list like this:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {# 评论列表内容将在这里循环展示 #}
{% endcommentList %}

Here,commentsIt is a custom variable name used to store the retrieved comment data.archiveId=archive.IdThe parameter is crucial, it tells the system what we want to get is the current page article (archive.Idrepresenting the ID of the current article).type="list"means to get the comments in list form,limit="6"Then it limits the number of displayed comments.

PasscommentListthe tags you getcommentsA variable is an array, where eachitemrepresents a comment. Theseiteminclude various details of the comments, such as:

  • IdThe unique identifier for a comment.
  • UserNameThe username of the commentor.
  • ContentThe actual content of the comment.
  • CreatedTimeThe time the comment was posted, usually requires formatting tags (stampToDateConvert to a readable date.
  • Status: Review status of comments, for example.Status = 1Means approved.Status = 0Means under review.
  • VoteCount: The number of likes received by the comment.

We can throughforto iteratecommentsArray, showing each comment in the form we want.

Implement comment reply hierarchy: Deep interaction display

AnQiCMS's comment feature supports multi-level replies, which means users can not only comment on the article itself but also reply to other users' comments, forming a dialogue hierarchy. To correctly display this reply relationship on the front end, we need to utilize the commentitemofParentIdandParentfield.

ParentIdRecorded the ID of the parent comment that the current comment replies to. AndParentthe field is more convenient, as it directly includes the completeitemobject. We can checkitem.ParentWhether it exists determines whether the current comment is a reply.

The following code snippet shows how to determine and display a reply comment:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div class="comment-item">
        <div class="comment-header">
            <span>{{item.UserName}}</span>
            <span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 发布</span>
        </div>
        {% if item.Parent %}
        <div class="comment-reply-to">
            <blockquote class="blockquote-sm">
                回复 <span class="reply-user">{{item.Parent.UserName}}</span>:
                <p>{{item.Parent.Content|truncatechars:100}}</p> {# 截取父评论内容，避免过长 #}
            </blockquote>
        </div>
        {% endif %}
        <div class="comment-content">
            {% if item.Status != 1 %}
            <p class="text-muted">评论正在审核中...</p>
            {% else %}
            <p>{{item.Content}}</p>
            {% endif %}
        </div>
        <div class="comment-actions">
            <a class="praise-btn">赞 ({{item.VoteCount}})</a>
            <a class="reply-btn" data-parent-id="{{item.Id}}" data-reply-user="{{item.UserName}}">回复</a>
        </div>
    </div>
    {% endfor %}
{% endcommentList %}

In this example:

  • We first displayed the current reviewer's username and posting time.
  • {% if item.Parent %}Determine if the current comment is a reply.
  • Ifitem.ParentIf it exists, we render one.blockquoteStyle to highlight which user it replied to and part of the parent comment.item.Parent.UserName,item.Parent.Content). This uses.truncatechars:100A filter to prevent the parent comment content from being too long and affecting the layout.
  • Then, display the content of the current comment and judge.item.StatusDetermine whether it is under review.
  • Finally, interactive buttons for liking and replying are provided.

Through this approach, comments are not only presented as a flat list, but more like an interactive dialogue, greatly enhancing the user experience.

Practical display techniques for comment lists

In addition to basic comment and reply display, AnQiCMS also provides other practical features to improve the user experience of the comment system:

  1. Comment list with pagination:If there are many comments, loading them all at once will affect the page performance. At this point, you cancommentListTagstypeparameter settings"page"and combine.paginationuse tags to implement comment pagination and improve the user browsing experience.

    {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论内容 #}
{% endcommentList %}


{% pagination pages with show="5" %}
    {# 分页导航条 #}
{% endpagination %}

  2. Comment review and user-friendly prompts: item.StatusFields allow us to flexibly control the display of comments. ForStatusNot equal to1Comments that have not passed review can display a prompt message saying 'Comments are being reviewed...' to inform users that their comments have been submitted while maintaining the quality of the website content.

  3. Like feature integration:. item.VoteCountThe number of likes for comments can be displayed directly. Combined with front-end JavaScript and the comment like API provided by AnQiCMS (/comment/praiseWe can implement a dynamic like feature, increasing the interactivity of comments.

  4. Comment form and anti-spam comments:Comment submission is usually completed through a form, AnQiCMS provides:/comment/publishInterface receives comment data. To prevent spam comments, the system also supports integrated captcha functionality. Add a captcha field to the comment form and work withcaptchaThe interface provided by template tags can effectively enhance the security of comments.

The comment feature of AnQiCMS, with flexible template tags and detailed data structures, provides powerful customization capabilities for website operators.Whether it is a simple comment display or a complex reply level interaction, it can be easily realized at the template level, thus building an active and user-friendly content community.

Common Questions (FAQ)

1. How to prevent spam or malicious comments from appearing in the comment section?AnQiCMS provides a backend comment review feature, where you can set comments to be manually reviewed before they are displayed.At the same time, the system also supports integrated graphic captcha. You can enable the captcha in the comment form to effectively intercept spam comments submitted by robots and automation.

2. Can the display level of the comment list be infinitely nested?In most cases, in order to maintain the clarity of the comment area and the user experience, AnQiCMS has a reasonable depth limit when displaying reply levels.Although it is technically feasible to implement multi-level nesting, it is recommended not to design too deep reply levels on the front end to avoid the page becoming too complex and lengthy.You can control the visual nesting depth of replies by customizing CSS and JavaScript.

3. How can I obtain the total number of comments displayed next to the comment list?You can use it on the article detail pagearchiveDetailLabel to get the total number of comments for the current article. For example:{% archiveDetail with name="CommentCount" %}You can directly output the number of comments for the current article.