在 AnQiCMS 模板中优雅地展示文章评论列表与分页

文章评论是网站互动的重要组成部分，它不仅能提升用户参与度，还能为网站内容带来更丰富的讨论和价值。对于运营者来说，如何在页面上清晰、高效地展示这些评论，并支持分页功能，是提升用户体验的关键。AnQiCMS 提供了一套直观且强大的模板标签，让您轻松实现这一目标。

了解 AnQiCMS 模板基础

AnQiCMS 采用类似 Django 的模板引擎语法，这使得模板开发既灵活又易于上手。在模板文件中，您会看到两种主要的标签形式：双花括号 {{变量}} 用于输出变量内容，而单花括号和百分号 {% 标签 %} 则用于控制逻辑（如循环、条件判断）或调用特定功能。模板文件通常以 .html 为后缀，并统一存放在 /template 目录下。

要实现在文章详情页显示评论列表并支持分页，我们主要会用到两个核心标签：commentList 用于获取评论数据，以及 pagination 用于生成分页导航。

获取文章评论列表：commentList 标签

commentList 标签是 AnQiCMS 中专门用于获取文章评论数据的工具。它能帮您轻松地将某个文章下的评论提取出来。

在使用这个标签时，有几个关键参数需要您留意：

  • archiveId：这是最重要的参数，它告诉系统您想获取哪篇文章的评论。通常，在文章详情页中，当前文章的 ID 会自动作为 archive.Id 这样的变量提供。
  • type：这个参数决定了您想要获取的列表类型。如果设置为 list，它会简单地返回指定数量的评论；如果设置为 page，它会为评论列表启用分页功能，以便后续配合 pagination 标签使用。
  • limit：用于控制每页显示多少条评论。例如，limit="10" 意味着每页显示 10 条评论。
  • order：您可以指定评论的排序方式，例如按 ID 降序 (id desc) 或升序 (id asc)。

当您通过 commentList 标签获取到评论数据后，它会返回一个评论对象的数组。您可以对这个数组进行循环，并访问每个评论对象的属性，比如评论 ID (Id)、用户名 (UserName)、评论内容 (Content)、点赞数 (VoteCount)、创建时间 (CreatedTime) 等。值得一提的是，评论内容还可能包含回复（即 Parent 对象），以及评论的审核状态 (Status)，这些信息都可以通过条件判断在模板中灵活展示。

实现评论分页功能：pagination 标签

一旦 commentList 标签的 type 参数设置为 page，评论数据就具备了分页的能力。此时，pagination 标签便能大显身手，为您自动生成一套完整的分页导航。

pagination 标签常用的参数是 show，它指定了分页导航中最多显示多少个页码按钮，例如 show="5" 会显示当前页附近最多 5 个页码。

pagination 标签会提供一个包含总条数 (TotalItems)、总页码数 (TotalPages)、当前页码 (CurrentPage)、首页 (FirstPage)、末页 (LastPage)、上一页 (PrevPage)、下一页 (NextPage)，以及中间页码数组 (Pages) 等信息的对象。您可以通过循环 Pages 数组来构建页码按钮，并通过 IsCurrent 属性判断当前页，从而添加相应的样式。

在模板中实际操作

通常，我们会在 archive/detail.html 这样的文章详情模板中集成评论功能。

首先，确保您能获取到当前文章的 ID。在文章详情页中，这通常通过 {{archive.Id}} 直接获取，或者使用 {% archiveDetail archiveInfo with name="Id" %} 来更显式地获取。

接着，我们就可以构建评论列表和分页了。

展示评论列表

以下代码片段展示了如何在文章详情页模板中显示评论列表，并处理评论的审核状态和回复关系：

”`twig {# 获取当前文章的ID，以便关联评论 #} {% archiveDetail currentArchiveId with name=“Id” %}

读者评论

{% commentList comments with archiveId=currentArchiveId type="page" limit="10" order="id desc" %} {% for item in comments %}
{% if item.Status != 1 %} 审核中：{{ item.UserName|truncatechars:6 }} {% else %} {{ item.UserName }} {% endif %} {% if item.Parent %} 回复 {% if item.Parent.Status != 1 %} 审核中：{{ item.Parent.UserName|truncatechars:6 }} {% else %} {{ item.Parent.UserName }} {% endif %} {% endif %} {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}
{% if item.Parent %}

{% if item.Parent.Status != 1 %} 该内容正在审核中：{{ item.Parent.Content|truncatechars:100 }} {% else %} {{ item.Parent.Content|truncatechars:100 }} {% endif %}

{% endif %}

{% if item.Status != 1 %} 该内容正在审核中：{{ item.Content|truncatechars:100 }} {% else %} {{ item.Content|safe }} {% endif %}

赞({{item.VoteCount}}) 回复
{% empty %}

暂无评论，快来发表您的看法吧！

{% endfor %} {% endcommentList %} 
{# 评论分页代码 #}
<div class="comment-pagination">
    {% 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 item in pages.Pages %}
                <li class="page-item {% if item.IsCurrent %}active{% endif %}"><a href="{{ item.Link }}">{{ 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>
    {% endpagination %}
</div>

{# 评论提交表单 #}
<div class="comment-form-section">
    <h3>发表评论</h3>
    <form method="post" action="/comment/publish" class="comment-submit-form">
        <input type="hidden" name="return" value="html">
        <input type="hidden" name="archive