`commentList`标签如何展示文章详情页的评论列表及分页？

在安企CMS中，文章详情页的评论列表是提升用户互动和内容活力的重要组成部分。要将这些评论自然流畅地展示出来，并实现友好的分页体验，我们需要巧妙地运用commentList和pagination这两个模板标签。接下来，我们就一起看看如何在文章详情页中实现评论的展示与分页功能。

一、commentList标签：展示评论的基础

安企CMS的commentList标签是专门用来获取和展示文章评论数据的。在文章详情页中，它能够帮助我们轻松地调取当前文章的所有评论，无论是最新评论还是回复评论，都能通过这个标签来处理。

它的基本用法是：

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {# 在这里循环展示评论 #}
{% endcommentList %}

其中，comments是我们为评论列表数据定义的变量名，你可以根据自己的习惯来命名。

几个关键参数的解释：

• archiveId：这个参数是必不可少的，它告诉commentList标签要获取哪篇文章的评论。在文章详情页中，我们可以通过archive.Id（由archiveDetail标签或页面上下文提供）来获取当前文章的ID。
• type：这个参数决定了评论列表的展示方式。当我们设置为type="list"时，它会获取指定数量的评论；如果设置为type="page"，则会启用分页功能，通常配合pagination标签使用。
• limit：当type="list"时，这个参数指定了最多显示多少条评论。例如，limit="6"表示只显示最新的6条评论。
• order：可以用来控制评论的排序方式，比如order="id desc"表示按评论ID倒序（最新评论在前）。
• siteId：如果你管理着多个站点，并需要调用其他站点的评论，可以通过这个参数指定站点ID。

评论数据包含的常用字段：

comments变量循环出的每一条评论（我们通常命名为item）都包含一些有用的字段，比如：

• Id：评论的唯一ID。
• UserName：评论者的昵称。
• Content：评论的具体内容。
• CreatedTime：评论发布的时间戳，需要用stampToDate格式化。
• Status：评论的审核状态，1表示通过，0表示待审核。
• ParentId：如果这是一条回复评论，它会指向被回复评论的ID。
• Parent：一个对象，包含被回复评论的完整数据，方便展示评论层级。

二、动手实践：展示非分页评论列表

我们先从最简单的评论列表开始，假设我们想在文章详情页底部展示最新的几条评论，而不需要分页。

{# 首先，确保你能获取到当前文章的ID。在文章详情页通常可以直接使用archive.Id #}
{# 如果页面上下文没有archive.Id，你可能需要先使用{% archiveDetail with name="Id" %}来获取 #}

<div class="comments-section">
    <h3>读者评论</h3>
    <ul class="comment-list">
        {% commentList comments with archiveId=archive.Id type="list" limit="5" order="id desc" %}
            {% for item in comments %}
                {# 检查评论状态，只显示已审核通过的评论，或给出审核中的提示 #}
                {% if item.Status == 1 %}
                    <li class="comment-item">
                        <div class="comment-meta">
                            <span class="comment-author">{{ item.UserName }}</span>
                            于
                            <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                            说：
                        </div>
                        <div class="comment-content">
                            {% if item.Parent %}
                                <blockquote class="reply-to">
                                    回复 <span class="original-author">{{ item.Parent.UserName }}</span>:
                                    <p>{{ item.Parent.Content|truncatechars:100 }}</p> {# 截取部分内容，避免太长 #}
                                </blockquote>
                            {% endif %}
                            <p>{{ item.Content }}</p>
                        </div>
                        {# 这里可以添加点赞或回复按钮，具体功能需要JS和后台接口支持 #}
                        <div class="comment-actions">
                            <a href="javascript:;" class="btn-reply" data-id="{{ item.Id }}" data-user="{{ item.UserName }}">回复</a>
                        </div>
                    </li>
                {% else %}
                    <li class="comment-item pending-review">
                        <div class="comment-meta">
                            <span class="comment-author">{{ item.UserName }}</span>
                            于
                            <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                            评论：
                        </div>
                        <div class="comment-content">
                            <p>您的评论正在审核中，请耐心等待。</p>
                        </div>
                    </li>
                {% endif %}
            {% empty %}
                <li class="no-comments">目前还没有评论，快来发表您的看法吧！</li>
            {% endfor %}
        {% endcommentList %}
    </ul>
</div>

代码解析：

• 我们使用了一个 <ul> 列表来包裹评论，每条评论是一个 <li>。
• item.Status 用于判断评论是否已审核。未审核的评论我们显示了一个提示信息，并使用了 truncatechars 过滤器来截取内容。
• item.Parent 的判断非常重要，它允许我们识别并展示回复关系，让评论看起来更有条理。当item.Parent存在时，表示这是一条回复，我们可以显示被回复者的昵称和部分内容。
• stampToDate(item.CreatedTime, "2006-01-02 15:04") 将时间戳格式化为我们易读的日期时间格式。
• {% empty %} 块在没有任何评论时显示一个友好提示。

三、进阶应用：评论分页显示

当文章评论数量较多时，一次性加载所有评论会影响页面性能和用户体验。这时，我们就需要引入分页功能。在安企CMS中，commentList配合pagination标签可以完美解决这个问题。

步骤如下：

1. 修改 commentList 的 type 参数为 "page"：这告诉系统我们需要分页数据。
2. 添加 pagination 标签：这个标签会生成分页导航的链接和信息。

”`twig

<h3>读者评论</h3>
<ul class="comment-list">
    {% commentList comments with archiveId=archive.Id type="page" limit="10" order="id desc" %}
        {% for item in comments %}
            {% if item.Status == 1 %}
                <li class="comment-item">
                    <div class="comment-meta">
                        <span class="comment-author">{{ item.UserName }}</span>
                        于
                        <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                        说：
                    </div>
                    <div class="comment-content">
                        {% if item.Parent %}
                            <blockquote class="reply-to">
                                回复 <span class="original-author">{{ item.Parent.UserName }}</span>:
                                <p>{{ item.Parent.Content|truncatechars:100 }}</p>
                            </blockquote>
                        {% endif %}
                        <p>{{ item.Content }}</p>
                    </div>
                    <div class="comment-actions">
                        <a href="javascript:;" class="btn-reply" data-id="{{ item.Id }}" data-user="{{ item.UserName }}">回复</a>
                    </div>
                </li>
            {% else %}
                <li class="comment-item pending-review">
                    <div class="comment-meta">
                        <span class="comment-author">{{ item.UserName }}</span>
                        于
                        <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                        评论：
                    </div>
                    <div class="comment-content">
                        <p>您的评论正在审核中，请耐心等待。</p>
                    </div>
                </li>
            {% endif %}
        {% empty %}
            <li class="no-comments">目前还没有评论，快来发表您的看法吧！</li>
        {% end