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

Implementation basis of AnQiCMS comment function

In AnQiCMS, the comment feature is an important part of website content interaction.The system is not only built-in with 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.All comments are displayed through flexible template tags, which means we can highly customize the appearance and interaction of the comment area according to the design requirements of the website.

Core: The call and display of the comment list

AnQiCMS provides to display comments on the website pagecommentListTemplate tag. This tag is the core of the comment feature, allowing us to retrieve the comment data of a specified article and control its display style.

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,commentsIs a custom variable name used to store the obtained comment data.archiveId=archive.IdThe parameter is crucial, it tells the system that we want to retrieve the articles on the current page (archive.Idrepresenting the ID of the current article).type="list"which means to retrieve comments in list form,limit="6"It limited the number of displayed comments.

BycommentListTags retrieved from comments.commentsA variable is an array where eachitemAll represent a single comment. TheseitemIt includes various details of the comments, such as:

  • Id: The unique identifier of the comment.
  • UserName: The username of the commentor.
  • Content: The actual content of the comment.
  • CreatedTime: The comment publication time, usually needs to be formatted with tags (stampToDate) to become a readable date.
  • Status: The comment review status, for exampleStatus = 1indicating the review has passed,Status = 0means under review.
  • VoteCount: The number of likes received from comments.

We can useforLoop throughcommentsArray, display each comment in the form we want.

Implementing comment reply levels: Deep interactive 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 conversation hierarchy. To correctly display this reply relationship on the front end, we need to use commentsitemofParentIdandParentfield.

ParentIdRecorded the ID of the parent comment that the current comment replies to.ParentField is more convenient, it directly contains the complete parent comment object.itemWe can check through.item.ParentWhether it exists to judge whether the current comment is a reply.

The following code snippet shows how to judge and display reply comments:

{% 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 username and posting time of the current reviewer.
  • {% if item.Parent %}Determine whether the current comment is a reply.
  • Ifitem.ParentIf it exists, we will render it.blockquoteStyle to highlight which user it replied to, as well as part of the parent comment (item.Parent.UserName,item.Parent.Content) here it usedtruncatechars:100Filter to prevent the parent comment content from being too long and affecting the layout.
  • Next, display the content of the current comment and judgeitem.Statuswhether it is under review.
  • Finally, interactive buttons for liking and replying were provided.

In this way, comments are not only presented as a flat list, but also as a back-and-forth conversation, greatly enhancing the user experience.

Practical display skills for comment lists

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

  1. Comment list with pagination:If the number of comments is large, loading all of them at once will affect the page performance. At this time, you cancommentListlabel'stypethe parameter to"page"and combiningpaginationuse tags to implement pagination of comments, enhancing the user's 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.StatusThe field allows us to flexibly control the display of comments. ForStatusnot equal to1Comments that have not passed the review can display the prompt 'Comments are being reviewed...' This informs the user that the comment has been submitted while maintaining the quality of the website content.

  3. Like function integrated: item.VoteCountLikes can be displayed directly. Combined with front-end JavaScript and the comment like API provided by AnQiCMS (/comment/praiseWe can implement a dynamic like function to increase the interactivity of comments.

  4. Comment form and anti-spam comments:Comments are usually submitted through a form, AnQiCMS provides./comment/publishThe interface receives comment data. To prevent spam comments, the system also supports integrated captcha functionality. Add a captcha field to the comment form and cooperate withcaptchaThe template tags provided interface can effectively improve the security of comments.

The comment feature of AnQiCMS, through flexible template tags and detailed data structures, provides website operators with powerful customization capabilities.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.

Frequently Asked Questions (FAQ)

1. How to prevent spam or malicious comments from appearing in the comment section?AnQiCMS provides a backend comment review feature, 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 automated submissions.

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

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