AnQiCMS的评论列表如何在前端展示，并显示回复层级和点赞数量？

在网站内容运营中，用户评论是构建社区氛围、提升内容互动性和收集用户反馈的重要一环。安企CMS（AnQiCMS）深知这一点，提供了强大而灵活的评论管理功能，并且通过其强大的模板引擎，让您能够轻松地在前端页面展示评论，包括回复层级和点赞数量等详细信息。

接下来，我们将一起了解如何在安企CMS中，利用其模板标签和字段，将这些评论内容清晰地呈现在您的网站上。

AnQiCMS 评论功能概览

安企CMS的评论功能，如同其内容管理系统的其他部分一样，设计得简洁高效。它允许用户在文章、产品等内容下方发表评论，并通过后台进行统一管理。特别是在前端展示方面，安企CMS通过预设的模板标签，赋予了用户极高的自定义能力，让您可以根据网站的设计风格和用户体验需求，灵活地控制评论的显示方式。

核心：利用 commentList 标签展示评论

要在前端页面展示评论，我们主要会用到安企CMS的 commentList 模板标签。这个标签专门用于获取指定内容的评论列表。

通常，评论都会附属于某篇文章或产品。因此，在使用 commentList 标签时，我们需要明确告知系统您想要获取哪篇文章或产品的评论。这可以通过 archiveId 参数来实现。在文章或产品详情页中，当前内容的ID通常通过 archive.Id 来获取。

一个基本的评论列表调用示例如下：

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论循环体，稍后详细解释 #}
{% endcommentList %}

这里：

• comments 是您为评论列表起的变量名，您可以在后续的 for 循环中通过 item（或您自定义的循环变量名）来访问每条评论的数据。
• archiveId=archive.Id 指明了我们正在获取当前详情页所对应的文章（或产品）的评论。
• type="page" 表示我们希望这个评论列表支持分页，这样当评论数量较多时，可以分散到不同的页面显示。
• limit="10" 则设定了每页显示10条评论。

清晰展示回复层级

用户之间的互动往往以回复的形式进行，展示评论的回复关系能够让讨论更具条理。安企CMS的 commentList 标签内含有一个 Parent 字段，它保存着当前评论所回复的父级评论的详细信息。利用这个字段，我们就可以在前端构建出带有层级的回复显示。

当 item.Parent 存在时，就意味着当前评论是对另一条评论的回复。我们可以通过判断 item.Parent 是否存在来调整显示样式，例如使用引用块（<blockquote>）来突出显示被回复的内容，并指明回复了哪位用户的评论。

下面是一个展示回复层级的代码片段示例：

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div class="comment-item">
      <div class="comment-header">
        <span class="username">
          {% if item.Status != 1 %}
          审核中：{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %} {# 如果存在父级评论，说明是回复 #}
        <span class="reply-to">回复</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 %}
          该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
          {% else %}
          {{item.Parent.Content|truncatechars:100}}
          {% endif %}
        </blockquote>
        {% endif %}
        {% if item.Status != 1 %} {# 当前评论内容 #}
          该内容正在审核中：{{item.Content|truncatechars:9}}
        {% else %}
        {{item.Content}}
        {% endif %}
      </div>
      {# 点赞和回复操作区，稍后解释 #}
      <div class="comment-actions">
        <a class="praise-button" data-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="reply-button" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
      </div>
    </div>
    {% endfor %}
{% endcommentList %}

在这个示例中，我们通过 {% if item.Parent %} 来判断当前评论是否为回复。如果是，就显示“回复”字样，并引用父评论的用户名和部分内容，让用户一目了然。同时，我们还使用了 item.Status 来判断评论是否处于审核中，以便给出相应的提示。

直观点赞数量显示

点赞是衡量评论受欢迎程度的一个重要指标。安企CMS在每条评论数据中都提供了 VoteCount 字段，直接存储了该评论获得的点赞数量。您只需要在模板中引用这个字段，即可在前端显示出来。

在上面的代码示例中，您可以看到点赞数量的显示方式：

<a class="praise-button" data-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>

这里 {{item.VoteCount}} 会直接显示当前评论的点赞数。通常，为了实现用户点击点赞后数字实时更新的效果，我们会结合JavaScript和后端API（如安企CMS提供的 /comment/praise 接口）来完成动态交互，但那是前端JS的范畴，在此我们主要关注数据的展示。

评论提交与互动（简要提及）

为了让用户能够发表评论或进行点赞操作，您还需要在评论列表下方或旁边放置一个评论提交表单，并为点赞按钮绑定JavaScript事件。

评论提交表单： 一个基本的评论提交表单需要 archive_id（当前文章ID）、user_name、content 等字段，若要回复特定评论，则需加上 parent_id。提交地址为 /comment/publish。

<form method="post" action="/comment/publish">
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <input type="hidden" name="parent_id" value="" id="parent-comment-id"> {# 用于回复 #}
  <input type="text" name="user_name" placeholder="您的昵称" required>
  <textarea name="content" placeholder="您的评论" required></textarea>
  <button type="submit">发表评论</button>
</form>

评论点赞交互： 点赞功能可以通过前端JavaScript监听点赞按钮的点击事件，然后通过AJAX向 /comment/praise 接口发送POST请求，带上评论 id。成功后更新页面上 VoteCount 的显示。

评论列表分页处理

当评论数量较多时，合理的分页能提升页面加载速度和用户体验。在 commentList 标签中设置 type="page" 后，您就可以结合 pagination 标签来生成分页导航。

”`twig {# 评论列表代码（如上述示例） #}

{# 分页代码 #}

{% pagination pages with show="5" %}
<ul>
    {# 首页、上一页、中间页、下一页、尾页的显示逻辑 #}
    <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
    {% if pages.PrevPage %}
        <li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
    {% endif %}
    {% for item in pages.Pages %}
        <li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
    {% endfor %}
    {% if pages.NextPage %}
        <li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name