AnQiCMS模板如何获取并展示文章的评论列表，包括父子

作为一名深谙安企CMS运营之道的网站运营人员，我深知评论区是网站内容生态中不可或缺的一部分，它不仅是用户互动的重要场所，更是内容价值的延伸与放大。一个活跃且组织有序的评论区，能够显著提升用户黏性，促使内容创作者与读者之间形成良性互动循环。在安企CMS中，我们能够非常灵活地在文章详情页模板中，获取并展示完整的评论列表，包括父子级评论的详细信息，从而为用户提供清晰的对话脉络。

安企CMS的模板设计遵循简洁高效的原则，对于评论列表的展示，核心在于利用 commentList 标签。这个标签专门设计用于从数据库中检索指定文章的评论数据。通常情况下，我们将评论列表的模板文件命名为 comment/list.html，并将其放置在当前模板包的根目录或 partial/ 子目录中，以方便在文章详情页 ({模型table}/detail.html) 通过 include 标签引用。

要展示某一篇文章的评论列表，首先需要获取该文章的唯一标识，即文章ID。在安企CMS的文章详情页中，当前文章的详情数据通常已通过 archiveDetail 标签预加载至模板上下文中的 archive 变量。因此，我们可以直接通过 {{archive.Id}} 来获取当前文章的ID，并将其作为 commentList 标签的 archiveId 参数，以此来确保我们获取的是与当前文章相关的评论。

评论列表标签 commentList 的基本用法是将其定义为一个变量，例如 comments，然后通过 for 循环遍历这个变量来逐一展示每条评论。我们可以根据需求，选择 type="list" 来简单列出评论，或者选择 type="page" 来实现评论的分页展示。同时，limit 参数可以控制每页或每次加载的评论数量，order 参数则允许我们按评论ID的升序 (id asc) 或降序 (id desc) 进行排序，以适应不同的展示逻辑。

以下是一个展示评论列表的示例：

<div class="comments-section">
    <h3>读者评论</h3>
    {% commentList comments with archiveId=archive.Id type="page" limit="10" order="id asc" %}
        {% for item in comments %}
            <div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
                <div class="comment-meta">
                    <span class="comment-author">
                        {% if item.Status != 1 %}
                            审核中：{{item.UserName|truncatechars:6}}
                        {% else %}
                            {{item.UserName}}
                        {% endif %}
                    </span>
                    {% if item.Parent %}
                        <span class="reply-to">回复</span>
                        <span class="comment-parent-author">
                            {% if item.Parent.Status != 1 %}
                                审核中：{{item.Parent.UserName|truncatechars:6}}
                            {% else %}
                                {{item.Parent.UserName}}
                            {% endif %}
                        </span>
                    {% endif %}
                    <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
                    <span class="comment-votes">点赞({{item.VoteCount}})</span>
                </div>
                <div class="comment-content">
                    {% if item.Parent %}
                        <blockquote class="parent-comment-quote">
                            {% if item.Parent.Status != 1 %}
                                该内容正在审核中：{{item.Parent.Content|truncatechars:50}}
                            {% else %}
                                {{item.Parent.Content|truncatechars:100}}
                            {% endif %}
                        </blockquote>
                    {% endif %}
                    {% if item.Status != 1 %}
                        该内容正在审核中：{{item.Content|truncatechars:50}}
                    {% else %}
                        {{item.Content}}
                    {% endif %}
                </div>
                <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
                    <a class="action-item praise-btn" data-id="praise">赞</a>
                    <a class="action-item reply-btn" data-id="reply">回复</a>
                </div>
            </div>
        {% empty %}
            <p class="no-comments">目前还没有评论，快来发表你的看法吧！</p>
        {% endfor %}
    {% endcommentList %}

    {# 如果使用了 type="page"，这里需要添加分页导航 #}
    {% if pages.TotalPages > 1 %}
        <div class="comment-pagination">
            {% pagination pages with show="5" %}
                <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
                {% if pages.PrevPage %}
                    <a class="page-link" href="{{pages.PrevPage.Link}}">上一页</a>
                {% endif %}
                {% for pageItem in pages.Pages %}
                    <a class="page-link {% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
                {% endfor %}
                {% if pages.NextPage %}
                    <a class="page-link" href="{{pages.NextPage.Link}}">下一页</a>
                {% endif %}
                <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
            {% endpagination %}
        </div>
    {% endif %}
</div>

在上面的示例中，我们遍历了 comments 变量，每一项 item 代表一条评论。展示评论时，我们首先会检查 item.Status 字段。如果状态不为 1（表示评论仍在审核中），则会显示“审核中”的提示，并截取部分评论内容，以确保不显示未经审核的完整信息。

父子级评论的展示是此处的关键。安企CMS的 commentList 标签巧妙地在每个评论 item 中提供了一个 item.Parent 对象，如果当前评论是对其他评论的回复，那么 item.Parent 将包含被回复评论的完整数据。通过判断 {% if item.Parent %}，我们可以识别出子评论，并在其内容上方以 blockquote 的形式引用父评论的部分内容和作者，从而清晰地展现评论的层级关系，例如“回复 [父评论作者]：[父评论内容]”。这种方式极大地提升了用户阅读评论的体验，使复杂的对话流变得易于理解。

此外，评论的发布时间 CreatedTime 是一个时间戳，我们利用 stampToDate 标签将其格式化为用户友好的日期和时间显示。点赞数量 VoteCount 也会直接显示出来，并且我们还为点赞和回复功能预留了HTML结构，这些通常会结合JavaScript进行交互实现。如果 commentList 标签配置为 type="page"，那么在评论列表下方，我们还会额外引入 pagination 标签来生成分页导航，引导用户浏览所有评论。

常见问题 (FAQ)

• Q: 如何在评论列表中实现多级回复（即回复的回复）？ A: 安企CMS的 commentList 标签主要支持父子两级评论的展示，即评论和对评论的直接回复。item.Parent 字段能帮助您识别和显示直接的上级评论。如果需要展示更深层次的嵌套回复结构，则可能需要在前端通过 JavaScript 进行额外的逻辑处理，将扁平化的评论列表数据根据 ParentId 和 Id 字段组织成树状结构进行渲染。

• Q: 评论内容中的链接会自动转换为可点击的链接吗？ A: commentList 标签默认输出的 item.Content 内容是原始文本。如果您希望评论中的URL或邮箱地址自动转换为可点击的超链接，可以在模板中对 item.Content 使用 urlize 过滤器，例如 {{item.Content|urlize|safe}}。这将有助于提升评论区的用户体验。

• Q: 如何控制未审核评论的显示？ A: 每条评论数据中都包含一个 Status 字段。当 Status 为 1 时表示评论已通过审核并可正常显示；当 Status 为 0 或其他值时，表示评论仍在审核中。您可以在模板中通过 {% if item.Status != 1 %} 判断，对未审核的评论显示“审核中”提示，并可以选择性地隐藏其完整内容，或者只显示部分摘要，以确保内容合规性。