如何在安企CMS模板中显示一个文档的评论列表，包括回复和分页功能？

在安企CMS中为文档内容添加评论列表，并使其具备回复和分页功能，能够极大地提升网站的用户互动性。用户可以就特定文档发表看法、进行讨论，这不仅丰富了内容生态，也为网站带来了更多活跃度。

一、显示评论列表：构建互动的基础

要在文档页面显示评论，主要依赖安企CMS内置的commentList标签。这个标签能帮助我们轻松地获取到与当前文档关联的评论数据。

首先，我们需要在文档的详情页模板（通常是{模型table}/detail.html，或者自定义的文档模板，如download.html）中找到合适的位置来放置评论区域。

commentList标签的核心参数包括：

• archiveId：这是关键，它指定了要显示哪个文档的评论。通常我们会获取当前文档的ID。
• type：评论列表的类型。设置为"list"时，会按指定数量列出评论；设置为"page"时，则表示我们要为评论列表启用分页功能，这会与pagination标签配合使用。
• limit：控制每页或每次显示评论的数量。
• order：用于指定评论的排序规则，例如按id desc（最新评论在前）或id asc（最旧评论在前）。

以下是一个基础的评论列表代码结构，它会循环展示评论，并包含一些基本信息：

{# 获取当前文档的ID，以便加载其评论 #}
{% archiveDetail currentArchiveId with name="Id" %}

<div class="comment-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=currentArchiveId type="list" limit="10" order="id desc" %}
        {% for item in comments %}
            <div class="comment-item">
                <div class="comment-header">
                    <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.Status != 1 %}
                        <p class="review-status">（评论正在审核中...）</p>
                    {% else %}
                        <p>{{item.Content}}</p>
                    {% endif %}
                </div>
            </div>
        {% empty %}
            <p class="no-comments">暂无评论，快来发表你的看法吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

在这个示例中，我们首先通过archiveDetail标签获取了当前文档的Id，然后将其传递给commentList的archiveId参数。for循环遍历每一条评论（item），并显示作者、时间及内容。item.Status字段可用于判断评论是否通过审核，以便在前台显示不同的内容。

二、集成回复功能：让讨论更深入

评论区的互动不仅仅是单向的评论，回复功能是提升互动深度的关键。安企CMS的commentList标签天然支持回复功能，通过item.Parent字段就可以判断并展示父级评论。

当一条评论是对另一条评论的回复时，item.Parent会包含父级评论的完整数据。我们可以利用这个特性来构建层级感的回复显示。

{# 假设currentArchiveId已在上方获取 #}
<div class="comment-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=currentArchiveId type="list" limit="10" order="id desc" %}
        {% for item in comments %}
            <div class="comment-item">
                <div class="comment-header">
                    <span class="comment-author">{{item.UserName}}</span>
                    <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
                </div>
                <div class="comment-body">
                    {# 如果是回复，显示父级评论内容 #}
                    {% if item.Parent %}
                        <blockquote class="reply-to">
                            回复 @{{item.Parent.UserName}}：
                            {% if item.Parent.Status != 1 %}
                                <p>（原评论正在审核中...）</p>
                            {% else %}
                                <p>{{item.Parent.Content|truncatechars:100}}</p>
                            {% endif %}
                        </blockquote>
                    {% endif %}
                    <div class="comment-content">
                        {% if item.Status != 1 %}
                            <p class="review-status">（评论正在审核中...）</p>
                        {% else %}
                            <p>{{item.Content}}</p>
                        {% endif %}
                    </div>
                </div>
                <div class="comment-actions">
                    <a href="javascript:;" class="reply-button" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
                    <a href="javascript:;" class="like-button" data-comment-id="{{item.Id}}">点赞 (<span class="vote-count">{{item.VoteCount}}</span>)</a>
                </div>
            </div>
        {% empty %}
            <p class="no-comments">暂无评论，快来发表你的看法吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

通过添加一个blockquote元素来展示被回复的评论内容，并给“回复”按钮添加data-comment-id和data-user-name属性，以便后续通过JavaScript实现点击回复时，自动填充表单的回复对象。

三、平滑浏览：评论分页功能

当评论数量较多时，分页是保持页面加载速度和用户体验的关键。安企CMS通过commentList的type="page"参数和pagination标签的配合，可以轻松实现评论分页。

我们将commentList的type参数设置为"page"，然后在其外部使用pagination标签来生成分页导航。

{# 假设currentArchiveId已在上方获取 #}
<div class="comment-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=currentArchiveId type="page" limit="5" order="id desc" %}
        {% for item in comments %}
            <div class="comment-item">
                {# ... 评论内容及回复逻辑（同上） ... #}
                <div class="comment-header">
                    <span class="comment-author">{{item.UserName}}</span>
                    <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
                </div>
                <div class="comment-body">
                    {% if item.Parent %}
                        <blockquote class="reply-to">
                            回复 @{{item.Parent.UserName}}：
                            {% if item.Parent.Status != 1 %}
                                <p>（原评论正在审核中...）</p>
                            {% else %}
                                <p>{{item.Parent.Content|truncatechars:100}}</p>
                            {% endif %}
                        </blockquote>
                    {% endif %}
                    <div class="comment-content">
                        {% if item.Status != 1 %}
                            <p class="review-status">（评论正在审核中...）</p>
                        {% else %}
                            <p>{{item.Content}}</p>
                        {% endif %}
                    </div>
                </div>
                <div class="comment-actions">
                    <a href="javascript:;" class="reply-button" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
                    <a href="javascript:;" class="like-button" data-comment-id="{{item.Id}}">点赞 (<span class="vote-count">{{item.VoteCount}}</span>)</a>
                </div>
            </div>
        {% empty %}
            <p class="no-comments">暂无评论，快来发表你的看法吧！</p>
        {% endfor %}
    {% endcommentList %}

    {# 评论分页导航 #}
    <div class="comment-pagination">
        {% pagination pages with show="5" %}
            <ul>
                {% if pages.FirstPage %}
                    <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
                {% endif %}
                {% if pages.PrevPage %}
                    <li class="page-item"><a href="{{pages.PrevPage.Link}}">上一页</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}}">下一页</a></li>
                {% endif %}
                {% if pages.LastPage %}
                    <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">末页</a></li>
                {% endif %}
            </ul>
        {% endpagination %}
    </div>
</div>

pagination标签的show参数控制了最多显示多少个页码按钮。它会生成“首页”、“上一页”、“数字页码”、“下一页”、“末页”等链接，这些链接的Link属性可以直接使用。

四、收集反馈：评论提交表单

有了评论列表，自然少不了提交评论的表单。评论提交表单需要特定的action路径和字段。

”`twig {# 假设currentArchiveId已在上方获取 #}

<h3>发表评论</h3>
<form method="post" action="/comment/publish" id="comment-form">
    <input type="hidden" name="return" value="html"> {# 后台返回html