在安企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