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

安企CMS在内容运营中，用户互动是提升网站活跃度的重要一环，而评论功能及其配套的分页显示和点赞功能，无疑是实现这一目标的关键。得益于AnQiCMS灵活的模板引擎和丰富的内置标签，我们可以相对轻松地为网站的文章或产品添加这些功能。

1. 评论功能的基础启用与配置

首先，要确保网站的评论功能处于启用状态。这通常在AnQiCMS的后台管理界面中进行设置，具体位置在“功能管理”下的“内容评论管理”。在这里，你可以开启或关闭评论功能，并配置一些基本规则，例如是否需要审核、是否启用验证码等。开启验证码（参考tag-captcha.md）可以有效防止垃圾评论，提升评论内容的质量。

默认情况下，新提交的评论可能需要经过审核才能在前台显示。在模板中，我们可以根据评论的审核状态（Status字段）进行判断和展示，例如，对正在审核中的评论给出相应的提示。

2. 构建评论列表的模板结构

要在文章详情页（或其他内容详情页）展示评论列表，我们需要使用AnQiCMS提供的commentList模板标签。这个标签能够获取指定文章的评论数据。

假设我们正在一个文档详情页中，当前文档的ID可以通过archiveDetail标签获取，例如{% archiveDetail with name="Id" %}。然后，我们可以将这个ID传递给commentList标签。

以下是一个基本的评论列表模板代码片段，它会遍历并显示评论：

{# 获取当前文章的ID，以便加载其评论 #}
{% archiveDetail archiveId with name="Id" %}

<div class="comment-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=archiveId type="page" limit="10" %}
        {% for item in comments %}
            {% if item.Status == 1 %} {# 仅显示已审核通过的评论 #}
                <div class="comment-item" data-comment-id="{{ item.Id }}">
                    <div class="comment-header">
                        <span class="username">{{ item.UserName }}</span>
                        {% if item.Parent %}
                            <span class="reply-to">回复 <span class="parent-username">{{ item.Parent.UserName }}</span></span>
                        {% endif %}
                        <span class="timestamp">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                    </div>
                    <div class="comment-content">
                        {% if item.Parent %}
                            <blockquote class="reply-quote">
                                {{ item.Parent.Content|truncatechars:100 }}
                            </blockquote>
                        {% endif %}
                        <p>{{ item.Content }}</p>
                    </div>
                    <div class="comment-actions">
                        <a href="javascript:;" class="like-btn" data-id="{{ item.Id }}">
                            赞 (<span class="vote-count">{{ item.VoteCount }}</span>)
                        </a>
                        <a href="javascript:;" class="reply-btn" data-id="{{ item.Id }}" data-user="{{ item.UserName }}">回复</a>
                    </div>
                </div>
            {% else %}
                {# 如果评论正在审核中，可以给出提示 #}
                <div class="comment-item pending-review">
                    <div class="comment-header">
                        <span class="username">{{ item.UserName }}</span>
                        <span class="timestamp">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                    </div>
                    <div class="comment-content">
                        <p>您的评论正在审核中，审核通过后将显示。</p>
                    </div>
                </div>
            {% endif %}
        {% empty %}
            <p class="no-comments">暂无评论，快来发表你的看法吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

在上述代码中：

• archiveId 参数确保我们获取的是当前文章的评论。
• type="page" 是启用分页的关键，它会为pagination标签提供必要的数据。
• limit="10" 设置每页显示10条评论。
• 我们通过item.Status == 1来判断评论是否已通过审核。
• item.Parent对象用于处理回复评论的显示，如果存在，则表示该评论是对另一条评论的回复。
• stampToDate标签用于格式化评论时间，使其更具可读性。

3. 实现评论列表的分页显示

由于在commentList标签中我们设置了type="page"，系统会自动生成分页所需的数据。接下来，我们就可以使用pagination标签来显示分页导航了。

紧接着上面的commentList代码块，在{% endcommentList %}之后添加分页代码：

{# ... 前面是评论列表显示代码 ... #}

{# 分页代码 #}
<div class="pagination-container">
    {% pagination pages with show="5" %} {# show="5" 表示最多显示5个页码按钮 #}
        <ul>
            {% if pages.FirstPage.Link %} {# 首页 #}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
                </li>
            {% endif %}

            {% if pages.PrevPage %} {# 上一页 #}
                <li class="page-item">
                    <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
                </li>
            {% endif %}

            {% for pageItem in pages.Pages %} {# 中间页码 #}
                <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                    <a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
                </li>
            {% endfor %}

            {% if pages.NextPage %} {# 下一页 #}
                <li class="page-item">
                    <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
                </li>
            {% endif %}

            {% if pages.LastPage.Link %} {# 尾页 #}
                <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                    <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
                </li>
            {% endif %}
        </ul>
    {% endpagination %}
</div>

pagination标签会创建一个pages对象，其中包含了当前页码、总页数、首页链接、末页链接、上一页链接、下一页链接以及一个包含中间页码的数组。通过遍历这个pages对象，我们可以构建出完整且交互友好的分页导航。

4. 实现评论点赞功能

点赞功能通常需要通过JavaScript（AJAX）与后端进行交互，以实现无刷新更新点赞数量。AnQiCMS提供了评论点赞的API接口。

在评论列表中，每个点赞按钮可以添加一个data-id属性来存储评论的ID，vote-count类来显示点赞数：

<a href="javascript:;" class="like-btn" data-id="{{ item.Id }}">
    赞 (<span class="vote-count">{{ item.VoteCount }}</span>)
</a>

然后，你可以编写JavaScript代码来处理点击事件和API请求。这里以jQuery为例：

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

// 处理点赞按钮点击事件
$('.comment-actions .like-btn').on('click', function(e) {
    e.preventDefault();
    const $this = $(this);
    const commentId = $this.data('id');
    const $voteCountSpan = $this.find('.