作为一位资深的网站运营专家，我非常理解在内容管理中，如何有效地展示用户评论，特别是带有回复结构的评论，对于提升用户互动和网站活跃度至关重要。安企CMS（AnQiCMS）凭借其强大的模板引擎和灵活的数据标签，让这一需求变得触手可及。今天，我们就来深入探讨如何在AnQiCMS的commentList标签中，巧妙地判断评论是否拥有父级评论，并优雅地呈现出清晰的回复结构。

巧妙利用AnQiCMS的评论机制，构建互动体验

AnQiCMS作为一款基于Go语言开发的现代化内容管理系统，在提供高效、安全的内容发布能力的同时，也为我们提供了完善的用户互动功能，其中评论系统就是一大亮点。它不仅允许用户对内容进行评论，还支持评论之间的回复，从而形成一个自然的对话链条。要在前端页面清晰地展示这种回复关系，核心在于理解commentList标签所返回的数据结构，特别是其中的Parent字段。

首先，我们知道AnQiCMS的模板系统采用了类似Django模板引擎的语法，这意味着我们可以通过{% ... %}来编写逻辑，用{{ ... }}来输出变量。对于评论列表，我们通常会用到commentList这个强大的标签。

在文档详情页中，要获取与当前文档相关的评论，commentList标签是我们的不二之选。它接受archiveId（当前文档的ID）、type（列表类型，可以是list或page）、limit（显示数量）等参数。例如，在一个文章详情页中，我们通常会这样调用评论列表：

{% commentList comments with archiveId=archive.Id type="list" limit="10" %}
    {# 循环遍历每一条评论 #}
    {% for item in comments %}
        {# 在这里处理单条评论的显示逻辑 #}
    {% endfor %}
{% endcommentList %}

这里，comments变量会承载所有符合条件的评论数据，而item则代表循环中的每一条独立评论。

Parent字段：揭示评论回复关系的关键

每当我们循环遍历comments列表中的item时，AnQiCMS为我们提供了几个关键的字段来判断和展示评论的层级关系：

  • item.Id: 当前评论的唯一标识。
  • item.UserName: 评论者的用户名。
  • item.Content: 评论的具体内容。
  • item.CreatedTime: 评论发布的时间戳。
  • item.ParentId: 如果当前评论是对另一条评论的回复，这个字段会存储父级评论的ID；如果为0，则表示这是一条顶级评论。
  • item.Parent: 这就是我们今天要重点利用的字段！它是一个完整的父级评论对象，包含了父级评论的所有信息，例如item.Parent.UserName、item.Parent.Content、item.Parent.CreatedTime等。如果item.Parent存在（即不为空），那么当前item就一定是一条回复评论。

正是item.Parent这个字段，为我们构建回复结构提供了最直接、最便捷的途径。

构建评论回复结构：一步步实现

现在，我们有了理论基础，就可以开始着手构建优雅的评论回复结构了。核心思路是：在循环每条评论时，先判断它是否为回复评论。如果是，则额外显示父级评论的信息，并通过样式进行视觉上的区分。

让我们来看看具体的模板代码示例：

”`twig 

{# 使用 commentList 标签获取评论数据 #}
{% commentList comments with archiveId=archive.Id type="list" limit="10" %}
    {% for item in comments %}
    {# 为每条评论添加一个基础容器，并根据是否有父级评论添加样式类 #}
    <div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
      <div class="comment-header">
        <span class="comment-username">
          {# 判断评论是否通过审核，如果未通过则显示“审核中” #}
          {% if item.Status != 1 %}
          （审核中）{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>

        {# 如果存在父级评论（即当前评论是回复） #}
        {% if item.Parent %}
        <span class="reply-indicator">回复</span>
        <span class="parent-username">
          {# 显示父级评论的用户名，同样需要判断父级评论是否通过审核 #}
          {% if item.Parent.Status != 1 %}
          （审核中）{{item.Parent.UserName|truncatechars:6}}
          {% 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.Parent %}
        <blockquote class="parent-comment-quote">
          {# 判断父级评论内容是否通过审核 #}
          {% if item.Parent.Status != 1 %}
          原评论：<span class="moderating-text">（内容审核中）{{item.Parent.Content|truncatechars:60}}</span>
          {% else %}
          原评论：{{item.Parent.Content|truncatechars:100}}
          {% endif %}
        </blockquote>
        {% endif %}

        {# 显示当前评论的内容，同样判断是否通过审核 #}
        {% if item.Status != 1 %}
          <span class="moderating-text">（评论审核中）{{item.Content|truncatechars:60}}</span>
        {% else %}
        {{item.Content}}
        {% endif %}
      </div>

      {# 评论操作区域，如点赞、回复等 #}
      <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="action-item" data-action="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="action-item" data-action="reply">回复</a>
      </div>
    </div>
    {% end