在AnQiCMS中构建一个充满互动性的网站，评论功能无疑是提升用户参与度的关键。 commentList 标签正是AnQiCMS为此提供的一大利器，它能够帮助网站开发者和运营者灵活地展示评论内容，并清晰地呈现评论者的状态，让访客一眼就能掌握评论区的动态。
核心功能概览：commentList 标签基础用法
commentList 标签主要用于获取指定文档的评论列表，并支持分页显示。它的基础结构通常是这样的：
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 评论内容将在这里循环展示 #}
{% endcommentList %}
在这里，comments 是我们为获取到的评论列表数据定义的变量名，你可以根据需要自行命名。archiveId=archive.Id 指定了要获取哪篇文章（或产品）的评论，这里的 archive.Id 通常是在文章详情页自动获取当前文章的ID。type="page" 表明我们希望以分页的形式展示评论，如果不需要分页，可以使用 type="list"。limit="10" 则控制了每页显示评论的数量。
通过这样的设置，我们就能从数据库中取出评论数据，为后续的展示做好准备。
评论内容的全面展示：item 变量详解
commentList 标签获取到的 comments 变量是一个数组对象，每一个数组元素代表一条评论，我们通常会在 {% for item in comments %} 循环中遍历这些评论。每个 item 对象都包含了丰富的评论信息，例如：
Id: 评论的唯一标识ID。UserName: 评论者的昵称。Content: 评论的实际文本内容。CreatedTime: 评论发布的时间戳，通常需要通过{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}这样的格式化函数转换为可读的日期时间。Status: 评论的审核状态。这是一个非常重要的字段，通常1表示审核通过并已显示，0表示待审核。ParentId和Parent对象：如果当前评论是对另一条评论的回复，ParentId会记录父评论的ID，而Parent对象则会包含父评论的完整信息，方便实现多级评论回复的展示。VoteCount: 评论获得的点赞数量。
掌握这些字段，我们就可以在模板中构建出灵活多样的评论显示效果。
区分评论状态：让用户一目了然
在评论展示中，清晰地告知用户某条评论是否已审核通过，对于网站的运营和用户体验都非常重要。利用 item.Status 字段，我们可以轻松实现这一点。
例如，可以在评论者名称旁边显示“审核中”的提示，或者在评论内容未通过审核时，仅显示部分内容或一个占位符。
<div>
<span>
{% if item.Status != 1 %}
<span style="color: gray;">[审核中]</span> {{item.UserName|truncatechars:6}}
{% else %}
{{item.UserName}}
{% endif %}
</span>
<span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 说：</span>
<div>
{% if item.Status != 1 %}
<p style="color: gray;">您的评论正在审核中，请耐心等待。</p>
{% else %}
<p>{{item.Content}}</p>
{% endif %}
</div>
</div>
通过这样的条件判断，既尊重了评论者的隐私，又明确告知了其他访客当前评论的状态，提升了页面的透明度和互动感。
实现评论回复与点赞互动
评论回复的展示
AnQiCMS的 commentList 标签通过 item.Parent 对象完美支持评论回复功能。当 item.Parent 存在时，意味着当前评论是对另一条评论的回复。我们可以根据这个信息，以嵌套或引用的方式展示父评论的内容，从而构建出清晰的对话结构。
<div>
{# 当前评论者的信息 #}
<span>{{item.UserName}}</span>
<span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 说：</span>
{# 如果是回复，显示父评论内容 #}
{% if item.Parent %}
<blockquote style="background-color: #f0f0f0; padding: 10px; margin-left: 20px; border-left: 3px solid #ccc;">
<p>回复 @{{ item.Parent.UserName }}：</p>
{% if item.Parent.Status != 1 %}
<p style="color: gray;">[原评论正在审核中]</p>
{% else %}
<p>{{ item.Parent.Content|truncatechars:100 }}</p> {# 截取父评论内容避免过长 #}
{% endif %}
</blockquote>
{% endif %}
{# 当前评论内容 #}
<p>{{item.Content}}</p>
</div>
评论点赞功能的实现
item.VoteCount 字段直接显示了评论的点赞数。要实现点赞功能本身，通常需要在前端通过JavaScript与AnQiCMS提供的 /comment/praise API进行交互。当用户点击点赞按钮时，JS会发送一个POST请求到该API，并带上评论的 id，API处理成功后，前端再更新 VoteCount 的显示。
<div class="comment-actions">
<a href="javascript:;" class="like-button" data-comment-id="{{item.Id}}">
赞 (<span class="vote-count">{{item.VoteCount}}</span>)
</a>
<a href="javascript:;" class="reply-button" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
</div>
（前端JS代码会监听 .like-button 的点击事件，发送 POST 请求到 /comment/praise，并根据返回结果更新 vote-count 元素。）
评论列表的分页控制
对于评论数量较多的文章，分页显示是必不可少的。当 commentList 标签的 type 参数设置为 page 时，它会配合 pagination 标签提供完整的分页功能。
{# 评论列表循环... #}
{# 分页部分 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
{% if pages.PrevPage %}
<a href="{{pages.PrevPage.Link}}">上一页</a>
{% endif %}
{% for pageItem in pages.Pages %}
<a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
{% endfor %}
{% if pages.NextPage %}
<a href="{{pages.NextPage.Link}}">下一页</a>
{% endif %}
<a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
{% endpagination %}
</div>
这样，用户就可以方便地在不同评论页之间跳转，浏览所有评论。
评论表单的集成与提交
最后，要让用户能够发表评论，需要集成一个评论表单。这个表单通常会提交到 AnQiCMS 提供的 /comment/publish 接口。表单中需要包含一些隐藏字段和用户输入字段：
”`twig