如何在AnQiCMS中显示文档的评论列表并进行分页？

在安企CMS中，为文档页面添加评论列表并实现分页功能，是提升用户互动体验的关键一步。这不仅能让访客参与讨论，分享观点，也为网站内容带来了更多活力。安企CMS为此提供了直观且强大的模板标签，让我们可以轻松实现这些功能。

整合评论功能到您的文档详情页

通常，评论列表和评论表单会集成在文档的详情页面上。在安企CMS中，文档详情页的模板文件通常位于类似 archive/detail.html 的位置。在开始之前，我们需要确保文档详情页能够正确获取到当前文档的唯一标识，这通常通过 archiveDetail 标签实现，例如，获取当前文档的ID：{% archiveDetail with name="Id" %}。

1. 展示文档的评论列表

安企CMS提供了 commentList 标签来获取和显示文档的评论。这个标签非常灵活，可以用来获取特定文档的评论，并支持多种显示方式，包括列表模式（list）和分页模式（page）。

要在文档详情页显示评论列表并准备进行分页，您可以这样使用 commentList 标签：

<div class="comments-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
        {% for item in comments %}
        <div class="comment-item">
            <div class="comment-meta">
                <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 15:04")}} 发布</span>
            </div>
            <div class="comment-content">
                {% if item.Parent %}
                <blockquote>
                    {% if item.Parent.Status != 1 %}
                    该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
                    {% else %}
                    {{item.Parent.Content|safe}}
                    {% endif %}
                </blockquote>
                {% endif %}
                {% if item.Status != 1 %}
                    该内容正在审核中：{{item.Content|truncatechars:9}}
                {% else %}
                {{item.Content|safe}}
                {% endif %}
            </div>
            <div class="comment-actions">
                <a class="praise-button" data-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
                <a class="reply-button" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
            </div>
        </div>
        {% empty %}
        <p>目前还没有评论，期待您的第一条评论！</p>
        {% endfor %}
    {% endcommentList %}
</div>

在这段代码中，我们：

• 使用 {% commentList comments with archiveId=archive.Id type="page" limit="10" %} 来获取评论。
  • archiveId=archive.Id 确保获取的是当前文档的评论。archive.Id 是通过外层文档详情模板中自动或手动获取的当前文档ID。
  • type="page" 是启用分页的关键，它会告诉系统您需要分页数据。
  • limit="10" 则指定了每页显示10条评论。
• 通过 {% for item in comments %} 循环遍历每一条评论。
• 显示了评论者的用户名（item.UserName）、评论内容（item.Content）和发布时间（item.CreatedTime，使用 stampToDate 过滤器格式化）。
• 特别处理了回复（通过 item.Parent 判断是否有上级评论）和评论的审核状态（item.Status != 1）。
• 为评论内容和父级评论内容添加了 |safe 过滤器，以确保HTML内容（如果评论支持富文本的话）能正确解析而不是被转义。
• 添加了“赞”和“回复”按钮，它们通常需要JavaScript配合后端API进行交互。

2. 实现评论列表的分页

当 commentList 标签以 type="page" 模式使用时，它会提供一个 pages 对象，这个对象包含了所有分页所需的信息。我们可以使用 pagination 标签来根据这些信息生成分页导航。

紧接着上面的评论列表代码，您可以添加以下分页代码：

<div class="pagination-section">
    {% pagination pages with show="5" %}
    <ul class="pagination-list">
        <li class="pagination-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
        {% if pages.PrevPage %}
            <li class="pagination-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
        {% endif %}
        {% for item in pages.Pages %}
            <li class="pagination-item {% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
        {% if pages.NextPage %}
            <li class="pagination-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
        {% endif %}
        <li class="pagination-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>

这里：

• {% pagination pages with show="5" %} 使用 pages 对象生成分页。
• show="5" 参数限制了中间页码最多显示5个。
• 我们遍历了 pages 对象中的 FirstPage (首页), PrevPage (上一页), Pages (中间页码数组), NextPage (下一页), LastPage (末页)，并根据 IsCurrent 字段为当前页添加 active 类。
• item.Link 提供了正确的页码链接，item.Name 提供了页码文字（如“1”、“2”等）。
• 最后，还显示了总评论数、总页数和当前页数，让用户对评论概况一目了然。

3. 添加评论提交表单

为了让用户能够发布评论，我们需要一个提交表单。这个表单通常包含用户名、评论内容，以及一个隐藏字段来指定评论所属的文档ID。

”`twig

<h3>发表您的评论</h3>
<form method="post" action="/comment/publish">
    <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
    <input type="hidden" name="parent_id" value="0" id="comment-parent-id"> {# 用于回复功能，默认为0 #}
    <p id="reply