在网站运营中，用户评论和互动是提升内容活力的关键。安企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 ||