As an experienced website operation expert, I know how important an active and easy-to-read comment section is for enhancing user engagement and website stickiness.In AnQiCMS, although comment data may be stored in a flat structure in the database, we can completely build a multi-level reply display effect with clear hierarchical structure and parent-child comment association through its powerful template tag function.This not only makes it easier for users to understand the context of the conversation, but also greatly improves the overall interaction experience.

This article will delve into how to use the comment list tag in AnQiCMS,commentList）and its return data structure, elegantly display multi-level replies, making your comment section come alive.

Understand the core comment mechanism of AnQiCMS

AnQiCMS as an efficient and flexible content management system, deeply understands the importance of user interaction.It provides a comprehensive comment feature, allowing users to post comments below articles, products, and other content.commentListTags are our core tool.

This tag can retrieve the comment list of the specified document and provides rich parameters to control the filtering, sorting, and display methods of comments. The most critical factor for implementing multi-level replies is that each comment item it returns isitem) containsParentIdandParentThese fields:

  • ParentId: indicates the ID of the parent comment for the current comment. If it is 0, it means this is a top-level comment; if it is greater than 0, it means it is a reply to a specific comment.
  • ParentThis is a very powerful field, it directly contains the complete data object of the parent comment.Through it, we can easily obtain the username, content, and other information of the parent comment, thereby building a clear reply relationship.

Combining loop traversal tags (for) we can traverse all comments and judge and render the hierarchy of comment levels according toParentIdthe value of the field.

Build comment section template: Implement the association display of parent and child comments

To display multi-level replies on the front end, the core idea is to identify which comments are top-level and which are replies to other comments. We can use CSS indentation or different styles to distinguish them, and at the same time throughParentField display information for 'Reply to who'.

We usually put the template (such as for article details, product details) on the document detail page.archive/detail.html)usingcommentListTags to get comment data.

Firstly, we need to usecommentListTag fetches comment list. Suppose we are displaying an article detail page, we canarchive.IdGet the current article ID.To make the response look more natural, we can sort comments by ID in ascending order, so that the responses will follow their parent comments closely (if the IDs of parent and child comments are consecutive).

English

<h3>评论区</h3>
{% commentList comments with archiveId=archive.Id type="list" order="id asc" %} {# 通常按ID升序，以便回复紧随其父评论 #}
    {% for item in comments %}
        {# 判断当前评论是否为回复，通过 ParentId 字段 #}
        <div class="comment-item {% if item.ParentId %}comment-reply{% endif %}">
            <div class="comment-meta">
                <span>
                    {# 检查评论是否通过审核 #}
                    {% if item.Status != 1 %} <span class="moderated-tag">审核中：</span> {% endif %}
                    <strong>{{ item.UserName }}</strong>
                </span>
                {# 如果有父评论，显示回复信息 #}
                {% if item.ParentId %}
                    <span class="reply-to-info"> 回复 @
                        {# 同样检查父评论的审核状态 #}
                        {% if item.Parent and item.Parent.Status != 1 %} (被回复的评论正在审核) {% else %} {{ item.Parent.UserName }} {% endif %}
                    </span>
                {% endif %}
                <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
            </div>
            <div class="comment-content">
                {# 如果是回复且父评论存在，可以引用父评论的部分内容 #}
                {% if item.ParentId and item.Parent %}
                    <blockquote class="parent-content-quote">
                        {% if item.Parent.Status != 1 %}
                            <span class="moderated-quote">该回复引用的评论正在审核中...</span>
                        {% else %}
                            {{ item.Parent.Content|truncatechars:80 }} {# 截取父评论内容，避免过长 #}
                        {% endif %}
                    </blockquote>
                {% endif %}
                {# 显示当前评论内容 #}
                {% if item.Status != 1 %}
                    <p class="moderated-content">您的评论正在审核中...</p>
                {% else %}
                    <p>{{ item.Content }}</p>
                {% endif %}
            </div>
            <div class="comment-actions">
                {# 这里的回复按钮需要配合前端JS实现 parent_id 的赋值 #}
                <a href="javascript:;" class="reply-button" data-comment-id="{{ item.