在安企CMS中,让您的文章页面不仅仅是内容的展示,更是一个活跃的交流平台,评论功能便是连接内容与读者的桥梁。理解如何在模板中灵活地显示文章的评论列表,包括多级回复和清晰的审核状态标识,对于构建互动性强的网站至关重要。

评论功能的基石:确保后台配置就绪

在深入模板代码之前,我们首先需要确认评论功能已在安企CMS后台启用。您可以前往“功能管理”菜单,找到“内容评论”选项,在这里可以进行评论的全局设置,例如是否开启评论、是否需要审核等。确保这些基础设置符合您的网站运营需求,是评论正常显示的前提。

在文章详情页引入评论列表

通常,我们会在文章详情页(比如您的 article/detail.html 或类似命名的模板文件)来展示当前文章的评论。安企CMS提供了简洁而强大的模板标签 commentList 来帮助我们实现这一点。

要显示评论列表,您需要知道当前文章的唯一标识,也就是文章ID。在文章详情页,这个ID通常可以通过 {{ archive.Id }} 来获取。接下来,我们就可以使用 commentList 标签来获取评论数据。

一个基本的评论列表调用可能像这样:

{% commentList comments with archiveId=archive.Id type="list" limit="10" order="id desc" %}
    {% for item in comments %}
        <div>
            <!-- 这里将是每条评论的显示内容 -->
            <p>{{ item.UserName }} 说:</p>
            <p>{{ item.Content }}</p>
        </div>
    {% endfor %}
{% endcommentList %}

在上面的例子中:

  • comments 是我们为评论列表数据定义的变量名。
  • archiveId=archive.Id 将评论与当前文章关联起来。
  • type="list" 表示我们希望获取一个简单的评论列表,而不是用于分页的完整数据集(稍后会提到分页)。
  • limit="10" 限制了每页显示评论的数量。
  • order="id desc" 让最新的评论显示在前面。

巧妙处理多级回复

评论往往不是单向的,用户之间可能存在回复关系。安企CMS的评论系统天然支持多级回复。在 commentList 标签返回的评论数据中,每个评论项(我们这里命名为 item)会包含一个 ParentId 字段,用于指示它回复的是哪条评论。更方便的是,它还提供了 Parent 对象,直接包含了上级评论的完整数据。

利用这些信息,我们可以构建一个具有层级感的评论显示结构。一个常见的做法是,检查评论是否有 Parent 对象,如果有,就将其显示为嵌套的回复。

以下是一个包含多级回复逻辑的示例结构:

<div class="comments-section">
    {% commentList comments with archiveId=archive.Id type="list" limit="10" order="id desc" %}
        {% for item in comments %}
            <div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
                <div class="comment-meta">
                    <span class="comment-user">{{ item.UserName }}</span>
                    {% if item.Parent %}
                        <span class="comment-reply-to">回复 {{ item.Parent.UserName }}</span>
                    {% endif %}
                    <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                </div>
                <div class="comment-content">
                    {% if item.Parent and item.Parent.Status == 1 %}
                        <blockquote class="parent-quote">{{ item.Parent.Content|truncatechars:100 }}</blockquote>
                    {% endif %}
                    <p>{{ item.Content|safe }}</p> {# 使用 safe 过滤器确保富文本内容正确显示 #}
                </div>
                <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
                    <a class="item praise-button">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
                    <a class="item reply-button">回复</a>
                </div>
            </div>
        {% empty %}
            <p>目前还没有评论,快来发表第一条评论吧!</p>
        {% endfor %}
    {% endcommentList %}
</div>

在这个结构中,我们通过 {% if item.Parent %} 来判断是否为回复,并添加相应的样式类(例如 comment-reply)来区分。同时,我们还引用了 item.Parent.UserName 来明确回复对象,并通过 item.Parent.Content 展示部分被回复内容,增加上下文的清晰度。

审核状态的清晰标识

内容审核是网站运营不可或缺的一环,对于评论的显示也不例外。安企CMS的评论数据中包含一个 Status 字段,它的值为 1 表示评论已通过审核,0 则表示正在审核中。

为了给用户提供透明的体验,我们可以在评论显示时,根据 Status 字段来添加审核状态的提示。

在上面的多级回复示例中,我们可以在评论内容旁边加上这样的判断:

            <div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
                <div class="comment-meta">
                    <span class="comment-user">
                        {% if item.Status != 1 %}
                            <span class="moderating-label">审核中:</span>{{ item.UserName|truncatechars:6 }}
                        {% else %}
                            {{ item.UserName }}
                        {% endif %}
                    </span>
                    {% if item.Parent %}
                        <span class="comment-reply-to">回复
                            {% if item.Parent.Status != 1 %}
                                <span class="moderating-label">审核中:</span>{{ 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>
                </div>
                <div class="comment-content">
                    {% if item.Parent and item.Parent.Status == 1 %}
                        <blockquote class="parent-quote">{{ item.Parent.Content|truncatechars:100 }}</blockquote>
                    {% elif item.Parent and item.Parent.Status != 1 %}
                        <blockquote class="parent-quote"><span class="moderating-label">上级评论正在审核中</span></blockquote>
                    {% endif %}
                    {% if item.Status != 1 %}
                        <p><span class="moderating-label">您的评论正在审核中,审核通过后将显示。</span></p>
                    {% else %}
                        <p>{{ item.Content|safe }}</p>
                    {% endif %}
                </div>
                <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
                    <a class="item praise-button">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
                    <a class="item reply-button">回复</a>
                </div>
            </div>

这里我们添加了 <span class="moderating-label">审核中:</span>,并在评论内容部分,如果评论处于审核状态,则显示一条提示信息而非实际内容。这既保护了网站免受未经审核内容的展示,也告知了用户他们的评论状态。

引入评论提交表单

为了让用户能够发表评论,您还需要在评论列表下方或合适的位置添加一个评论提交表单。这个表单通常会 POST 数据到 /comment/publish 接口。

一个简化版的评论表单可能包含这些字段:

”`twig

<input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
<input type="hidden" name="parent_id" value="0" id="comment-parent-id"> {# 用于回复,初始为0 #}
<input type="hidden" name="return" value="html"> {# 可选择返回 html 或 json #}

<div class="form-group">
    <label for="user_name">您的昵称:</label>
    <input type="text" id="user_name" name="user_name" required placeholder="请填写您的昵称">
</div>

<div class="form-group">
    <label for="comment_content">评论内容