如何在页面中嵌入评论列表并控制其显示分页？

在网站运营中，用户互动是提升站点活跃度和内容价值的关键。AnQiCMS 提供了一套直观而强大的功能，帮助我们轻松地在页面中嵌入评论功能，并灵活地控制评论列表的显示方式，尤其是其分页管理，这对于拥有大量用户评论的页面来说至关重要。

开启评论功能，让内容活起来

首先，要让用户能够发表评论，我们需要确保后台的评论功能已经开启。一旦评论功能激活，我们就可以在希望展示评论的页面模板中集成评论列表了。通常，评论列表会出现在文章详情页、产品详情页等内容型页面的底部。

在AnQiCMS的模板系统中，评论列表的展示主要依赖于 commentList 标签。这个标签允许我们根据不同的需求，灵活地调用和展示评论数据。例如，要在一个文档（如文章或产品）详情页显示评论，我们通常需要知道当前文档的唯一标识ID。假设我们的文档详情页已经通过 archiveDetail 标签获取到了文档信息，那么文档ID可以通过 archive.Id 来获取。

一个基本的评论列表代码结构可能如下所示：

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
        <span>{{item.UserName}}</span>
        <span>{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
        {% if item.Parent %}
            <p>回复 {{item.Parent.UserName}}：</p>
            <blockquote>{{item.Parent.Content}}</blockquote>
        {% endif %}
        <p>{{item.Content}}</p>
        {% if item.Status != 1 %}
            <p style="color: gray;">评论待审核</p>
        {% endif %}
        {# 这里还可以添加点赞、回复等操作按钮 #}
    </div>
    {% else %}
    <p>暂无评论，快来发表您的看法吧！</p>
    {% endfor %}
{% endcommentList %}

在上面的代码中，commentList 标签通过 archiveId=archive.Id 指定了要获取哪个文档的评论。type="list" 表示以列表形式展示，limit="6" 则限制了每页显示评论的数量。我们遍历 comments 对象，逐一显示评论者的用户名、发布时间以及评论内容。特别地，通过判断 item.Parent 是否存在，我们可以优雅地处理回复评论的显示，以及通过 item.Status 判断评论是否已通过审核。

当然，有了评论列表，用户发表评论的表单也必不可少。通常，我们会创建一个表单，提交到 AnQiCMS 预设的评论发布接口 /comment/publish。表单中需要包含 archive_id (文档ID)、user_name (评论者昵称) 和 content (评论内容) 等字段，根据实际需求还可以添加 parent_id 用于回复特定评论。

实现评论列表分页，优化用户体验

当页面上的评论数量逐渐增多时，如果没有分页功能，页面将会变得非常冗长，加载缓慢，用户也难以浏览历史评论。AnQiCMS 提供了简便的方式来为评论列表添加分页控制，从而显著提升用户体验和页面性能。

要为评论列表启用分页，我们需要在 commentList 标签中将 type 参数设置为 "page"，而不是默认的 "list"。例如：

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# ... 评论列表内容，与上方示例类似 ... #}
{% endcommentList %}

这里 limit="10" 不再是简单地限制显示数量，而是指定了每页显示的评论条数。

紧接着 commentList 标签，我们需要引入 pagination 标签来生成分页导航。pagination 标签会读取上一个 type="page" 的列表标签（在此例中是 commentList）生成的分页数据，并据此渲染出页码链接。

以下是一个集成了评论列表和分页导航的完整示例：

”`twig {# 获取当前文档的ID，确保评论关联到正确的文档 #} {% archiveDetail archiveInfo with name=“Id” %}

{# 评论分页导航 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %}
        <ul>
            {# 首页链接 #}
            <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>

{# 评论提交表单 #}
<div class="comment-form">
    <h4>发表评论</h4>
    <form method="post" action="/comment/publish">
        <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
        <input type="hidden" name="return" value="html"> {# 可选，指定后端返回HTML或JSON #}
        {# 这里可以添加 CAPTCHA 验证码的隐藏字段和图片刷新JS，参考