How to display multi-level replies in the AnQiCMS comment list, that is, the association information between parent comments and child comments?

As an experienced website operations expert, I am well aware of how important an active and easy-to-read comment section is for increasing user engagement and website stickiness.In AnQiCMS, although comment data may be stored in a flat structure in the database, we can still skillfully build a clear hierarchical and parent-child comment association multi-level reply display effect on the front end 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 interactive experience.

This article will deeply explore how to use the comment list tag in AnQiCMScommentList) and its returned data structure, elegantly display multi-level replies, making your comment section come alive.

Understand the core of AnQiCMS's comment mechanism

AnQiCMS as an efficient and flexible content management system, understands the importance of user interaction.It provides a comprehensive comment function, where users can post comments below articles, products, and other content.commentListTags are our core tools.

This tag can retrieve the comment list of a specified document and provides rich parameters to control the filtering, sorting, and display of comments. The most critical part for implementing multi-level replies is that each comment item it returns (itemIt includesParentIdandParentThese fields:

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

Combine loop traversal tags (for), we can then traverse all comments and judge and render the hierarchy of comments according toParentIdthe value of the field.

Build comment section template: Implement parent-child comment association display

To display multi-level replies on the front end, the core idea is to identify which are top-level comments and which are replies to other comments. We can use CSS indentation or different styles to distinguish them, as well as byParentThe field displays the information 'Reply to whom'.

We usually put the template (such as articles, product details) on the document detail page.archive/detail.html)commentListtags to obtain comment data.

First, we need to usecommentListtags to get the comment list. Suppose we are displaying a detailed article page, we can usearchive.IdGet the current article ID.To make the response look more natural, we can sort by comment ID in ascending order, so that the response will follow the parent comment immediately (if the parent and child comment IDs are consecutive).

`twig {# Assume this is on the document detail page, archive.Id is available #}

<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.