如何在AnQiCMS中显示用户评论列表并进行分页处理？

在网站内容运营中，用户评论是提升互动性和活跃度的重要组成部分，而合理的分页处理则能确保评论列表既完整又加载流畅。安企CMS（AnQiCMS）提供了强大且灵活的模板标签，让您能够轻松地在前端页面展示和管理用户评论，并实现评论列表的分页功能。

展现用户评论列表的基石：commentList 标签

要在安企CMS的页面上显示用户评论，我们主要会用到 commentList 标签。这个标签能够帮助您获取特定文章或产品的评论数据。它就像一个评论数据的提取器，您可以根据自己的需求来配置它。

当您在模板中使用 commentList 标签时，可以先给它指定一个变量名，比如 comments，这样后续在循环展示评论时就能够引用这个变量。一个典型的用法是这样开始：{% commentList comments with archiveId=archive.Id type="list" limit="6" %}。

这里面的 archiveId 参数至关重要，它告诉系统您想获取哪篇文章或产品的评论。通常，这个值会动态地从当前文档的ID中获取，比如 archive.Id。type 参数定义了评论列表的展示方式，"list" 模式会返回指定数量的评论，而 "page" 模式则会为分页做准备。limit 参数则用于控制每页或每次显示多少条评论。

每个评论条目都包含了一系列有用的信息，例如：

• Id：评论的唯一标识。
• UserName：评论者的名称。
• Content：评论的具体内容。
• CreatedTime：评论发布的时间，这是一个时间戳，您可以结合 stampToDate 标签进行格式化显示，例如 {{stampToDate(item.CreatedTime, "2006-01-02")}}。
• Parent：如果这条评论是对其他评论的回复，那么 Parent 字段会包含上级评论的详细信息，这对于构建多级评论回复至关重要。
• Status：评论的审核状态，通常 1 表示审核通过，其他值可能表示审核中或未通过，您可以根据此状态来决定是否显示评论内容。
• VoteCount：评论的点赞数量，可以用来显示评论的受欢迎程度。

下面是一个基础的评论列表展示示例，它会获取当前文档的评论，并显示前6条，同时处理了评论的审核状态和回复关系：

{# 列表展示评论，默认type="list" #}
<div>
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
      <div>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.UserName|truncatechars:6}} {# 截取用户名显示 #}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %} {# 如果是回复评论 #}
        <span>回复</span>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.Parent.UserName|truncatechars:6}}
          {% else %}
          {{item.Parent.UserName}}
          {% endif %}
        </span>
        {% endif %}
        <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
      </div>
      <div>
        {% if item.Parent %} {# 显示上级评论的引用内容 #}
        <blockquote>
          {% 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-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="item" data-id=reply>回复</a>
      </div>
    </div>
    {% endfor %}
{% endcommentList %}
</div>

结合 pagination 标签实现评论列表分页

当评论数量较多时，一次性加载所有评论会影响页面性能和用户体验。这时，就需要引入分页功能。在安企CMS中，实现评论分页非常简单，只需要将 commentList 标签的 type 参数设置为 "page"，然后配合 pagination 标签即可。

当 commentList 的 type 设置为 "page" 后，它会返回一个包含当前页评论数据和分页信息 pages 对象的数据结构。这个 pages 对象就是 pagination 标签的输入。

pagination 标签允许您灵活地控制分页链接的显示方式。其中最常用的参数是 show，它用来控制页面上显示多少个页码按钮，例如 show="5" 会显示当前页附近最多5个页码。

pages 对象提供了以下关键信息，让您可以构建完整的分页导航：

• TotalItems：评论总数量。
• TotalPages：总页码数。
• CurrentPage：当前访问的页码。
• FirstPage、LastPage、PrevPage、NextPage：分别代表首页、末页、上一页和下一页的链接和状态，它们内部也包含 Link（链接地址）和 IsCurrent（是否为当前页）等字段。
• Pages：一个包含所有中间页码信息的数组，您可以遍历这个数组来显示数字页码。

下面是一个完整的、带有分页功能的评论列表展示代码：

{# 启用分页模式的评论列表 #}
<div>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %} {# type="page" 启用分页 #}
    {% for item in comments %}
    <div>
      <div>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %}
        <span>回复</span>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.Parent.UserName|truncatechars:6}}
          {% else %}
          {{item.Parent.UserName}}
          {% endif %}
        </span>
        {% endif %}
        <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
      </div>
      <div>
        {% if item.Parent %}
        <blockquote>
          {% 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-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="item" data-id=reply>回复</a>
      </div>
    </div>
    {% endfor %}
{% endcommentList %}
</div>

{# 分页导航区域 #}
<div class="pagination-area">
    {% pagination pages with show="5" %} {# show="5" 表示最多显示5个页码按钮 #}
    <ul>
        <li>总数：{{pages.TotalItems}}条，共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
            <li class="page-item">
                <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            </li>
        {% endif %}
        {# 中间数字页码 #}
        {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
        {# 下一页链接 #}
        {% if pages.NextPage %}
            <li class="page-item">
                <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            </li>
        {% endif %}
        {# 末页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    {% endpagination %}
</div>

评论提交与互动

除了显示评论，安企CMS也支持用户通过表单提交评论。评论表单的 action 属性应指向 /comment/publish。提交时需要包含 archive_id (文章ID)、user_name (评论者昵称)和 content (评论内容)。如果需要实现回复功能，还需要包含 parent_id 字段，值为被回复评论的ID。此外，您可以通过 return 字段指定后端返回格式为 html 或 json。

例如，一个基本的评论提交表单可能像这样：

<form method="post" action="/comment/publish">
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <input type="hidden" name="return" value="html"> {# 可以设置为json，如果需要JS处理返回 #}
  <div>
    <label for="user_name">您的昵称</label>
    <input type="text" id="user_name" name="user_name" required placeholder="请填写您的昵称">
  </div>
  <div>
    <label for="comment-content">评论内容</label>
    <textarea id="comment-content" name="content" rows="5" required placeholder="请留下您的宝贵评论..."></textarea>
  </div>
  {# 如果是回复评论，这里会动态添加一个hidden input #}
  <input type="hidden" name="parent_id" value=""> 
  <button type="submit">提交评论</button>
</form>

此外，安企CMS还提供了评论点赞功能，通过向 /comment/praise 地址 POST 评论 id 即可实现点赞，这通常需要通过 JavaScript 来完成。为了增强评论的安全性，您也可以在后台开启评论验证码功能，并在前端模板中添加相应的验证码显示和输入框，这会用到 tag-captcha.md 中详细介绍的 api/captcha 接口。

通过以上这些标签和功能，您可以全面地在安企CMS网站上构建一个交互性强、用户体验友好的评论系统。

---

常见问题 (FAQ)

Q1: 如何在评论表单中加入验证码以防止垃圾评论？

A1: 安企CMS 支持在评论提交时集成验证码功能。您首先需要在后台的“功能管理”中找到相关设置，启用评论验证码。然后，在您的评论提交表单中，根据 tag-captcha.md 文档的指引，添加一个 captcha_id 的隐藏字段、一个 captcha 的文本输入框以及一个用于显示验证码图片的 <img> 标签，并附带一段 JavaScript 代码，用于从 /api/captcha 接口获取并刷新验证码图片。

Q2: 安企CMS 是否支持多级评论回复的显示？

A2: 是的，安企CMS 原生支持多级评论回复的显示。在 commentList 标签获取到的每个评论 item 对象中，如果这条评论是对其他评论的回复，那么 item.Parent 字段会包含上级评论的完整信息。您可以通过判断 item.Parent 是否存在，来判断当前评论是否为回复，并在模板中通过 item.Parent.UserName、item.Parent.Content 等字段来构建回复引用，从而实现多级评论的视觉呈现。

**Q3: 评论提交后，前端如何知道评论是否需要审核或已