AnQiCMS如何实现评论列表的分页显示和评论内容的点赞功能？

在网站运营中，用户评论和互动是提升内容活力的关键。安企CMS（AnQiCMS）提供了强大的内容管理能力，其中评论功能是用户与内容互动的重要桥梁。本文将详细探讨如何在安企CMS中实现评论列表的分页显示，以及为评论内容添加点赞功能，让您的网站互动体验更上一层楼。

安企CMS 评论功能概览

安企CMS从早期版本便已内置了文章评论和评论管理功能，这为网站提供了原生的用户互动支持。系统允许用户发表评论，并支持管理员在后台进行审核与管理，确保评论内容的质量和合规性。要展示这些评论，我们需要借助安企CMS提供的模板标签进行灵活调用。

实现评论列表的分页显示

当一篇文章的评论数量较多时，一次性加载所有评论不仅影响页面加载速度，也会降低用户体验。安企CMS提供了评论列表的分页功能，让您可以按需加载评论，保持页面整洁和高效。

要实现评论列表的分页显示，我们主要会用到两个关键的模板标签：commentList 用于获取评论数据，以及 pagination 用于生成分页导航。

1. 使用 commentList 标签获取评论数据 commentList 标签是用来从数据库中检索评论数据的。为了实现分页，我们需要将 type 参数设置为 "page"，并指定每页显示的评论数量 limit。此外，archiveId 参数是必不可少的，它指明了要获取哪篇文章的评论。通常，您会在文章详情页中使用此功能，此时 archive.Id 会自动提供当前文章的ID。

   以下是一个基本的 commentList 标签用法示例，它将获取当前文章的评论，并每页显示10条：

   {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
       {# 遍历评论列表 #}
       {% for item in comments %}
           <div>
               {# 显示评论用户名，如果未审核则提示 #}
               <span>
                   {% if item.Status != 1 %}
                   审核中：{{item.UserName|truncatechars:6}}
                   {% else %}
                   {{item.UserName}}
                   {% endif %}
               </span>
               {# 如果是回复，显示回复对象 #}
               {% if item.Parent %}
               <span>回复</span>
               <span>
                   {% if item.Parent.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>
       {% endfor %}
   {% endcommentList %}
   

   在上述代码中：

   • archive.Id 是当前文章的ID，确保评论与文章关联。
   • type="page" 告诉系统我们需要分页数据。
   • limit="10" 设置每页显示10条评论。
   • item.Status != 1 用于判断评论是否已通过审核，未审核的评论可以显示为“审核中”。
   • item.Parent 用于显示回复评论的父评论信息，形成评论嵌套。
   • stampToDate 是一个方便的时间格式化函数。

2. 使用 pagination 标签生成分页导航 获取到分页评论数据后，我们还需要一个分页导航，让用户能够跳转到不同的评论页。pagination 标签与 commentList 标签配合使用，能够自动生成符合当前页码状态的分页链接。

   在 commentList 标签的 {% endcommentList %} 之后，您可以添加 pagination 标签：

   <div>
       {% pagination pages with show="5" %}
           <ul>
               <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
               <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}}</a></li>
               {% endif %}
               <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
           </ul>
       {% endpagination %}
   </div>
   

   这里，pages 是 pagination 标签自动提供的分页信息对象，show="5" 表示最多显示5个页码按钮。您可以根据自己的设计需求来调整分页的显示样式和内容。

实现评论内容的点赞功能

为评论添加点赞功能，是提升用户互动性、鼓励优质评论的有效方式。安企CMS的点赞功能通过前端JavaScript发送异步请求（AJAX）与后端交互实现。

1. 评论点赞的 HTML 结构 在每条评论的展示区域，我们需要一个可以点击的元素（例如 <a> 标签），并包含显示点赞数量的 <span>。关键在于为点赞元素添加 data-id 属性，存储当前评论的唯一ID，以便在点击时知道是哪条评论被点赞。

   <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
       <a class="item vote-comment" data-comment-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
       <a class="item" data-id="reply">回复</a>
   </div>
   

   这里，我们为点赞的 <a> 标签添加了 class="vote-comment" 和 data-comment-id="{{item.Id}}"，以及一个显示点赞数的 <span>，其 class="vote-count" 将用于后续的JavaScript更新。

2. 评论点赞的 JavaScript 实现 点赞功能需要通过JavaScript监听点击事件，并向后端发送一个POST请求。安企CMS的评论点赞接口是 /comment/praise，它需要接收一个名为 id 的参数，即被点赞评论的ID。后端会处理点赞逻辑并返回最新的点赞数量。

   以下是一个使用jQuery实现点赞功能的JavaScript代码示例：

   ”`javascript $(document).ready(function() {

   $(".vote-comment").on("click", function (e) {
       e.preventDefault(); // 阻止默认的链接跳转行为
       let that = $(this);
       let commentId = that.data("comment-id"); // 获取评论ID
   
       // 发送点赞请求
       $.ajax({
           url: "/comment/praise",
           method: "POST", // 点赞通常是POST请求
           data: { id: commentId }, // 传递评论ID
           dataType: "json", // 期望后端返回JSON数据
           success: function (res) {
               if (res.code === 0) { // 假设 res.code == 0 表示成功
                   // 点赞成功，更新页面上的点赞数量
                   that.find(".vote-count").text(res.data.vote_count);
                   // 可以选择性地禁用点赞按钮，防止重复点赞
                   // that.addClass("liked").off("click");
                   alert(res.msg || "点赞成功！");
               } else {
                   // 点赞失败，显示错误信息
                   alert(res.msg ||