`commentList`标签如何显示文章的评论

在网站运营中，文章评论是提升用户互动、活跃社区氛围不可或缺的一环。安企CMS（AnQiCMS）为我们提供了强大而灵活的评论管理功能，通过巧妙运用commentList标签，我们可以轻松地在网站前端展示文章的评论内容。

本文将深入探讨commentList标签的各项功能及其在模板中的实际运用，帮助您打造一个互动性强、用户体验友好的评论区。

核心标签：commentList 概览

在安企CMS中，commentList标签是用于获取和展示特定文章评论列表的核心工具。它允许我们灵活控制评论的来源、排序、数量乃至是否分页显示。无论您是想在文章详情页底部展示评论，还是构建一个独立的评论页面，commentList都能满足您的需求。

commentList标签的基本使用形式如下：

{% commentList comments with archiveId="文章ID" type="page|list" %}
    {# 循环输出评论内容 #}
{% endcommentList %}

在这里，comments是您为获取到的评论列表指定的变量名，您可以在标签内部通过循环这个变量来访问每一条评论的具体信息。

参数详解：细致掌控评论展示

为了更好地控制评论的显示，commentList标签提供了几个重要的参数：

1. archiveId：指定评论所属文章 这个参数是至关重要的，它告诉系统您想获取哪篇文章的评论。通常情况下，在文章详情页，您可以通过archive.Id来动态获取当前文章的ID。例如：archiveId=archive.Id。 如果您不指定archiveId，系统默认会尝试获取当前页面的文档ID。

2. type：选择列表展示模式

   • type="list"：当您希望一次性展示所有评论（或指定数量的评论）而不涉及分页时，选择此模式。
   • type="page"：如果您需要对评论进行分页显示，例如每页显示10条，那么选择此模式。配合安企CMS的分页标签pagination，可以构建完整的分页导航。

3. order：定义评论排序方式 您可以通过此参数控制评论的显示顺序：

   • order="id desc"：默认值，按评论ID降序排列，通常意味着最新评论在前。
   • order="id asc"：按评论ID升序排列，通常意味着最旧评论在前。

4. limit：限制评论显示数量 此参数用于设定您希望展示的评论条数。

   • 如果您希望显示指定数量的评论，例如limit="10"。
   • 它还支持offset,limit模式，例如limit="2,10"表示从第3条评论开始，显示10条。

5. siteId：多站点环境下的评论调用 对于部署了多个站点的安企CMS用户，如果您需要调用其他站点的评论数据，可以通过siteId参数指定目标站点的ID。在单站点环境下，通常无需设置此参数。

评论数据字段：了解可用的信息

commentList标签获取到的comments变量是一个数组对象，数组中的每一个item都代表一条评论，并包含以下重要的字段信息：

• Id：评论的唯一ID。
• ArchiveId：评论所属文章的ID。
• UserName：评论用户的昵称或名称。
• UserId：评论用户的ID（如果用户已登录）。
• Ip：评论用户的IP地址。
• VoteCount：该评论获得的“赞”数。
• Content：评论的具体内容。请注意，在显示用户提交的HTML内容时，为防止HTML转义导致标签显示为纯文本，可能需要使用|safe过滤器，例如{{item.Content|safe}}。但同时也要警惕潜在的安全风险，确保内容经过了严格的过滤。
• ParentId：如果这是一条回复，则指向其父级评论的ID。
• Status：评论的审核状态。Status = 1表示评论已审核通过并显示，Status = 0表示评论正在审核中，通常不应该在前端显示。
• Parent：如果存在父级评论，此字段将包含父级评论的完整数据对象，结构与当前评论item相同，方便展示回复关系。
• CreatedTime：评论的发布时间戳，您可以使用stampToDate标签对其进行格式化，例如{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}。

展示评论：两种常见方式

了解了标签参数和评论数据结构后，我们来看看如何在前端模板中实际展示评论。

1. 常规评论列表展示

当您希望在一个页面上直接列出所有评论（或指定数量）而无需分页时，可以使用type="list"：

{# 假设我们正在文章详情页，archive.Id 可用 #}
<div class="comments-section">
    <h3>读者评论</h3>
    {% commentList comments with archiveId=archive.Id type="list" limit="5" %}
        {% for item in comments %}
            {# 仅显示已审核通过的评论，或根据业务需求显示审核中的占位符 #}
            {% if item.Status == 1 %}
                <div class="comment-item">
                    <div class="comment-meta">
                        <strong>{{item.UserName}}</strong>
                        于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}
                        {% if item.Parent %}
                            回复 <strong>{{item.Parent.UserName}}</strong>
                        {% endif %}
                    </div>
                    <div class="comment-content">
                        {{item.Content|safe}} {# 使用|safe避免HTML转义，请确保内容已通过后端安全过滤 #}
                    </div>
                    <div class="comment-actions">
                        <a href="#" class="praise-btn" data-id="{{item.Id}}">赞 ({{item.VoteCount}})</a>
                        <a href="#" class="reply-btn" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
                    </div>
                </div>
            {% elif item.Status == 0 %}
                 <div class="comment-item comment-pending">
                     <p>您的评论正在审核中，审核通过后将显示。</p>
                 </div>
            {% endif %}
        {% empty %}
            <p class="no-comments">暂无评论，快来发表您的看法吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

2. 分页评论列表展示

对于评论数量较多的文章，分页显示可以大幅提升页面加载速度和用户体验。这时需要type="page"并结合pagination标签：

”`twig {# 假设我们正在文章详情页，archive.Id 可用 #}

<h3>读者评论</h3>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
        {% if item.Status == 1 %}
            <div class="comment-item">
                <div class="comment-meta">
                    <strong>{{item.UserName}}</strong>
                    于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}
                    {% if item.Parent %}
                        回复 <strong>{{item.Parent.UserName}}</strong>
                    {% endif %}
                </div>
                <div class="comment-content">
                    {{item.Content|safe}}
                </div>
                <div class="comment-actions">
                    <a href="#" class="praise-btn" data-id="{{item.Id}}">赞 ({{item.VoteCount}})</a>
                    <a href="#" class="reply-btn" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
                </div>
            </div>
        {% endif %}
    {% empty %}
        <p class="no-comments">暂无评论，快来发表您的看法吧！</p>
    {% endfor %}
{% endcommentList %}

{# 分页导航 #}