在网站内容运营中，用户评论是构建社区氛围、提升内容互动性和收集用户反馈的重要一环。安企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 {# 评论列表代码（如上述示例） #}
{# 分页代码 #}