如何在前台页面显示AnqiCMS的评论列表，并支持分页和父子评论展示？

安企CMS为网站的内容互动提供了便捷的评论功能，让访客能够针对文章、产品等内容发表自己的看法。对于网站运营者来说，如何在网站前台清晰地展示这些评论，并提供用户友好的分页和父子评论（即回复功能），是提升用户体验的关键一环。下面，我们就来一起探讨如何在安企CMS中实现这一目标。

理解评论功能的核心要素

在安企CMS中，评论功能是围绕文档（如文章、产品等）构建的。每条评论都关联着一个具体的文档ID。为了在前台展示评论，我们需要掌握以下几个关键信息：

• 文档ID（archiveId）：这是告诉系统我们要获取哪篇文章或产品的评论。
• 评论列表标签（commentList）：用于从数据库中检索评论数据。
• 分页标签（pagination）：处理评论数量较多时的页面跳转。
• 父子评论结构（item.Parent）：区分主评论和对主评论的回复，实现嵌套显示。

第一步：获取当前页面的文档ID

通常，评论列表会展示在具体文档的详情页。因此，我们需要先获取当前文档的唯一标识——文档ID。安企CMS提供了archiveDetail标签来获取文档的详细信息，其中就包含了文档ID。

你可以在文档详情页的模板（例如archive/detail.html）中，使用以下方式来获取当前文档的ID：

{% archiveDetail currentArchiveId with name="Id" %}

这里，我们将当前文档的ID赋值给了变量currentArchiveId，以便后续在commentList标签中使用。

第二步：展示基本的评论列表

有了文档ID，我们就可以使用commentList标签来获取并展示评论了。这个标签非常灵活，允许我们控制评论的排序、显示数量以及列表类型。

要展示一个基本的评论列表，我们可以指定archiveId为刚刚获取的currentArchiveId，并将type设置为list，同时设置limit来控制每页显示的评论数量（这里我们假设设置为10条）。

<div class="comments-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=currentArchiveId type="list" limit="10" %}
        {% for item in comments %}
            <div class="comment-item">
                <p class="comment-meta">
                    <strong>{{ item.UserName }}</strong> 发表于
                    <span>{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                </p>
                <div class="comment-content">
                    {% if item.Status != 1 %}
                        <p class="moderating-tip">此评论正在审核中，稍后可见。</p>
                    {% else %}
                        <p>{{ item.Content }}</p>
                    {% endif %}
                </div>
                <div class="comment-actions">
                    <a href="javascript:;" class="reply-btn" data-id="{{ item.Id }}" data-user="{{ item.UserName }}">回复</a>
                    <a href="javascript:;" class="praise-btn" data-id="{{ item.Id }}">赞(<span class="vote-count">{{ item.VoteCount }}</span>)</a>
                </div>
            </div>
        {% empty %}
            <p>目前还没有评论，快来发表你的看法吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

在这个例子中，我们遍历了comments列表，显示了评论者的用户名、发布时间、评论内容，并加入了评论状态判断（item.Status），以便在评论审核中时给用户友好的提示。同时，为了后续的互动，我们还添加了“回复”和“赞”按钮。

第三步：实现评论列表的分页功能

当评论数量较多时，一次性全部加载会影响页面性能，这时分页就显得尤为重要。要实现分页，我们需要将commentList标签的type参数从list改为page，然后结合pagination标签来生成分页导航。

首先，修改commentList标签：

{% commentList comments with archiveId=currentArchiveId type="page" limit="10" %}
    {# 评论内容展示与之前类似 #}
{% endcommentList %}

接着，在commentList标签的{% endcommentList %}之后，添加pagination标签来生成分页链接：

<div class="pagination-section">
    {% pagination pages with show="5" %}
        <ul>
            {% if pages.FirstPage %}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
            {% endif %}
            {% 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 %}
            {% if pages.LastPage %}
                <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
            {% endif %}
        </ul>
        <p class="pagination-info">共 {{pages.TotalItems}} 条评论，当前第 {{pages.CurrentPage}} / {{pages.TotalPages}} 页</p>
    {% endpagination %}
</div>

pagination标签会根据当前的评论列表生成首页、上一页、具体页码、下一页和尾页的链接。show="5"参数表示最多显示5个页码按钮。item.IsCurrent可以帮助我们为当前页码添加高亮样式。

第四步：实现父子评论的嵌套展示

父子评论（即回复）功能是评论区互动性的重要体现。安企CMS的commentList标签在每个评论项（item）中提供了一个Parent属性，如果当前评论是对其他评论的回复，item.Parent就会包含被回复评论的完整信息。我们可以利用这一点来设计嵌套的评论样式。

要实现父子评论的展示，我们可以在循环遍历comments时，判断item.Parent是否存在。如果存在，就说明这是一个回复，我们可以将其内容嵌套显示，并指明回复的是哪条评论。

”`twig

<h3>用户评论</h3>
{% commentList comments with archiveId=currentArchiveId type="page" limit="10" %}
    {% for item in comments %}
        <div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
            <p class="comment-meta">
                <strong>{{ item.UserName }}</strong>
                {% if item.Parent %}
                    回复 <strong>{{ item.Parent.UserName }}</strong>
                {% endif %}
                发表于
                <span>{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
            </p>
            <div class="comment-content">
                {% if item.Status != 1 %}
                    <p class="moderating-tip">此评论正在审核中，稍后可见。</p>
                {% else %}
                    {% if item.Parent and item.Parent.Status == 1 %}
                        <blockquote class="reply-quote">
                            <p>{{ item.Parent.Content|truncatechars:100 }}</p>
                        </blockquote>
                    {% endif %}
                    <p>{{ item.Content }}</p>
                {% endif %}
            </div>
            <div class="comment-actions">
                <a href="javascript:;" class="reply-btn" data-id="{{ item.Id }}" data-user="{{