作为一名资深的网站运营专家，我深知一个活跃且易于阅读的评论区对于提升用户参与度和网站粘性有多么重要。在安企CMS（AnQiCMS）中，虽然评论数据在数据库中可能以扁平结构存储，但通过其强大的模板标签功能，我们完全可以在前端巧妙地构建出层次分明、父子评论关联清晰的多级回复展示效果。这不仅能让用户更容易理解对话的上下文，也能大幅提升整体的互动体验。

本文将深入探讨如何在AnQiCMS中，利用其评论列表标签（commentList）及其返回的数据结构，优雅地展示多级回复，让您的评论区焕发生机。

理解AnQiCMS的评论机制核心

AnQiCMS作为一个高效、灵活的内容管理系统，深知用户互动的重要性。它为内容提供了完善的评论功能，用户可以在文章、产品等内容下方发表评论。当我们在前端页面需要展示这些评论时，commentList标签是我们的核心工具。

这个标签能够获取指定文档的评论列表，并提供了丰富的参数来控制评论的筛选、排序和展示方式。对于实现多级回复，最关键的是它返回的每一个评论项（item）都包含了ParentId和Parent这两个字段：

  • ParentId：表示当前评论的父评论ID。如果为0，则说明这是顶级评论；如果大于0，则表示这是对某个评论的回复。
  • Parent：这是一个非常强大的字段，它直接包含了父评论的完整数据对象。通过它，我们可以轻松获取父评论的用户名、内容等信息，从而构建出清晰的回复关系。

结合循环遍历标签（for），我们就可以遍历所有评论，并根据ParentId字段的值来判断和渲染评论的层级关系。

构建评论区模板：实现父子评论的关联展示

要在前端展示多级回复，核心思路是识别出哪些是顶级评论，哪些是对其他评论的回复。我们可以利用CSS的缩进或者不同的样式来区分它们，同时通过Parent字段显示“回复给谁”的信息。

我们通常会在文档详情页（如文章详情、产品详情）的模板中（例如archive/detail.html）使用commentList标签来获取评论数据。

首先，我们需要用commentList标签获取评论列表。假设我们正在展示一个文章详情页，可以通过archive.Id来获取当前文章的ID。为了让回复看起来更自然，我们可以按评论ID升序排列，这样回复会紧随其父评论之后（如果父子评论ID连续）。

”`twig {# 假设这是在文档详情页，archive.Id 可用 #} 

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