如何实现文章评论列表的分页显示功能？

在网站运营中，高效地管理和展示用户评论对于提升用户互动和内容活力至关重要。安企CMS（AnQiCMS）作为一个功能强大的内容管理系统，提供了灵活的模板标签，让我们可以轻松实现文章评论列表的分页显示。本文将详细介绍如何在安企CMS中，通过模板标签实现这一功能，从而为用户提供更佳的浏览体验。

理解评论和分页的核心

在安企CMS的模板体系中，实现文章评论列表的分页显示，主要依赖于两个核心模板标签：commentList 和 pagination。

• commentList 标签：用于获取指定文章的评论数据。它支持多种参数，例如通过文章ID (archiveId) 筛选评论，通过 type="page" 启用分页模式，以及设置每页显示的评论数量 (limit)。
• pagination 标签：专门用于生成分页导航。它能够根据 commentList 标签获取到的分页数据，自动生成“上一页”、“下一页”以及页码链接。

通过这两个标签的组合使用，我们就能构建一个功能完善、用户友好的评论分页系统。

第一步：准备评论列表模板

通常，评论列表会放置在文章详情页 (archive/detail.html) 或单独的评论列表模板文件 (comment/list.html) 中。无论哪种方式，我们都需要一个容器来承载评论内容和分页导航。

如果你想为评论列表使用一个独立的模板文件，可以参考安企CMS模板制作约定中的comment/list.html命名规范。更常见的情况是，我们将评论功能直接集成到文章详情页。

第二步：调用评论数据并启用分页

要显示某篇文章的评论，我们需要获取当前文章的ID，并将其传递给 commentList 标签。安企CMS的文章详情页中，当前文章的信息通常通过 archive 对象直接提供。

以下是调用评论数据的基本结构：

{# 假设这是文章详情页 (archive/detail.html) 或其他包含评论的模板 #}

<div class="comment-list-container">
    <h3>用户评论 ({{ archive.CommentCount }})</h3> {# 显示评论总数 #}
    {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
        {% for item in comments %}
        <div class="comment-item">
            <div class="comment-meta">
                <span class="username">
                    {% if item.Status != 1 %}
                    待审核用户: {{item.UserName|truncatechars:6}}...
                    {% else %}
                    {{item.UserName}}
                    {% endif %}
                </span>
                {% if item.Parent %}
                <span class="reply-to">回复 {% if item.Parent.Status != 1 %}待审核用户: {{item.Parent.UserName|truncatechars:6}}...{% else %}{{item.Parent.UserName}}{% endif %}</span>
                {% endif %}
                <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
            </div>
            <div class="comment-content">
                {% if item.Parent %}
                <blockquote class="reply-quote">
                    {% if item.Parent.Status != 1 %}
                    <p>该内容正在审核中...</p>
                    {% else %}
                    <p>{{item.Parent.Content|truncatechars:100}}</p>
                    {% endif %}
                </blockquote>
                {% endif %}
                {% if item.Status != 1 %}
                <p class="moderation-pending">该评论正在审核中，审核通过后将显示。</p>
                {% else %}
                <p>{{item.Content}}</p>
                {% endif %}
            </div>
            {# 如果需要点赞功能，可以放置此处 #}
            <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
                <a class="like-btn" data-id="praise">赞 ({{item.VoteCount}})</a>
                <a class="reply-btn" data-id="reply">回复</a>
            </div>
        </div>
        {% empty %}
        <p class="no-comments">暂无评论，快来发表你的看法吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

代码解释：

• archiveId=archive.Id：这是关键，它将当前文章的ID传递给commentList，确保只显示与当前文章相关的评论。archive是安企CMS在文章详情页自动提供的当前文章对象。
• type="page"：告诉系统我们需要分页模式，而不是简单的列表模式。
• limit="10"：设定每页显示10条评论。你可以根据实际需求调整这个数字。
• {% for item in comments %}：循环遍历获取到的评论数据。
• item.UserName, item.CreatedTime, item.Content：分别获取评论的用户名、创建时间和评论内容。
• item.Status：用于判断评论是否通过审核，如果评论在后台设置为审核状态，未审核通过前可以提示用户。
• item.Parent：这是为了支持多级评论（回复评论）而提供的字段，如果存在，表示当前评论是对另一条评论的回复。
• stampToDate：一个格式化时间戳的辅助标签，将时间戳转换为可读的日期格式。

第三步：构建分页导航

在 commentList 循环结束后，紧接着使用 pagination 标签来生成分页导航。

{# 紧接在 commentList 标签之后 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页链接 #}
        <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 page_item in pages.Pages %}
            <li class="page-item {% if page_item.IsCurrent %}active{% endif %}">
                <a href="{{page_item.Link}}">{{page_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>
    <p class="pagination-info">
        共 {{pages.TotalItems}} 条评论，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页
    </p>
    {% endpagination %}
</div>

代码解释：

• pages：这是 commentList 在 type="page" 模式下自动生成的包含分页信息的对象。
• show="5"：表示在中间页码部分最多显示5个页码按钮，例如 ... 2 3 4 5 6 ...。
• pages.FirstPage.Link、pages.PrevPage.Link 等：分别获取首页、上一页、下一页和尾页的链接。
• pages.Pages：这是一个包含所有中间页码信息的数组，通过循环 {% for page_item in pages.Pages %} 来显示具体的页码数字。
• page_item.IsCurrent：用于判断当前页码是否是当前正在浏览的页面，通常会给其添加一个 active 类来突出显示。

整合代码示例

将上述两段代码片段（评论列表和分页导航）按照顺序放置在你的模板文件中，就能实现完整的评论分页功能。例如，在default模板的archive/detail.html文件中：

”`twig {# … 文章详情内容 … #}

<div class="comment-list-container">
    <h3>用户评论 ({{ archive.CommentCount }})</h3>
    {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
        {% for item in comments %}
        <div class="comment-item">
            <div class="comment-meta">
                <span class="username">
                    {% if item.Status != 1 %}
                    待审核用户: {{item.UserName|truncatechars:6}}...
                    {% else %}
                    {{item.UserName}}
                    {% endif %}
                </span>
                {% if item.Parent %}
                <span class="reply-to">回复 {% if item.Parent.Status != 1 %}待审核用户: {{item.Parent.UserName|truncatechars:6}}