用户评论是网站活力的重要体现,它们不仅能增加内容的互动性,还能为其他访问者提供有价值的参考。安企CMS深知评论管理的重要性,提供了简洁而强大的功能,让您能够在网站前端灵活地展示评论列表,并清晰地标识评论的审核状态。
在前端展示评论列表的核心:commentList 标签
要在您的网站前端页面上展示用户评论,您需要使用AnQiCMS提供的commentList模板标签。这个标签能帮助您轻松地获取与特定文章或产品相关的评论数据。
通常情况下,评论列表会与某个具体的文档(如文章详情页或产品详情页)关联。因此,在使用commentList标签时,我们通常会指定archiveId参数,该参数的值就是当前页面文档的唯一标识ID。您可以使用{% archiveDetail with name="Id" %}标签来获取当前文档的ID。
此外,为了更好地控制评论的显示方式,您可以通过type参数来选择列表类型。当您希望评论列表支持分页功能时,将type设置为"page"是一个不错的选择;如果只需要显示固定数量的评论而不分页,则可以设置为"list"并配合limit参数。
例如,在文章详情页中,您可以这样开始获取评论数据:
{% archiveDetail archiveId with name="Id" %} {# 获取当前文档的ID,并赋值给archiveId变量 #}
<div class="comments-section">
<h3>用户评论 ({{ archive.CommentCount }}条)</h3>
{% commentList comments with archiveId=archiveId type="page" limit="10" %}
{# 遍历获取到的评论列表 #}
{% for item in comments %}
{# 这里是每条评论的展示内容 #}
{% empty %}
<p>目前还没有评论,快来抢沙发吧!</p>
{% endfor %}
{% endcommentList %}
</div>
在这个示例中,comments变量将包含所有符合条件的评论数据。for循环会逐一处理每条评论,empty块则会在没有评论时显示一段提示信息。
清晰标识审核状态
AnQiCMS在评论管理方面充分考虑了内容审核的需求,因此每条评论数据都带有一个Status字段。这个字段是区分评论是否已通过审核的关键:
- 当
Status为1时,表示评论已通过审核,可以在前端正常显示。 - 当
Status为0时,则表示评论仍在审核中,此时我们通常不将其完全公开展示,而是给予用户一个“审核中”的提示。
利用if逻辑判断标签,我们可以轻松地根据item.Status的值来控制评论的显示内容。例如,我们可以只显示已通过审核的评论内容,而对于审核中的评论,则仅显示一个用户名和“审核中”的提示,甚至可以对其内容进行截断或隐藏。
下面是一个在评论列表中展示审核状态并处理回复的示例:
{% archiveDetail archiveId with name="Id" %}
<div class="comments-section">
<h3>用户评论 ({{ archive.CommentCount }}条)</h3>
{% commentList comments with archiveId=archiveId type="page" limit="10" %}
{% for item in comments %}
<div class="comment-item {% if item.Status != 1 %}comment-pending{% endif %}">
<div class="comment-header">
<span class="comment-username">
{% if item.Status != 1 %}
<i class="icon-pending"></i> 审核中用户:{{item.UserName|truncatechars:6}}
{% else %}
{{item.UserName}}
{% endif %}
</span>
{% if item.Parent %}
<span class="reply-indicator">回复</span>
<span class="comment-parent-username">
{% 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>
</div>
<div class="comment-content">
{% if item.Status != 1 %}
<blockquote class="pending-message">该评论正在审核中,请耐心等待。</blockquote>
{# 如果您希望在审核中也显示部分内容,可以这样处理: #}
{# <p class="pending-content">{{item.Content|truncatechars:30}}...</p> #}
{% else %}
{% if item.Parent %}
<blockquote class="reply-quote">
{% if item.Parent.Status != 1 %}
<span class="text-muted">原评论正在审核中...</span>
{% else %}
{{item.Parent.Content|truncatechars:100}}
{% endif %}
</blockquote>
{% endif %}
<p>{{item.Content}}</p>
{% endif %}
</div>
<div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
{% if item.Status == 1 %}
<a class="action-btn praise-btn" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
<a class="action-btn reply-btn" data-id="reply">回复</a>
{% endif %}
</div>
</div>
{% empty %}
<p>目前还没有评论,快来抢沙发吧!</p>
{% endfor %}
{# 评论分页 #}
{% pagination pages with show="5" %}
<div class="pagination-nav">
<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>
</div>
{% endpagination %}
{% endcommentList %}
</div>
在上述代码中,我们使用了item.Parent来判断当前评论是否是对其他评论的回复,并以引用块的形式展示父级评论的部分内容。同时,stampToDate过滤器帮助我们将时间戳格式化为易读的日期时间。
评论提交表单与验证码
为了让用户能够在前端方便地提交评论,您还需要集成评论提交表单。AnQiCMS提供了一个统一的评论提交接口/comment/publish。表单中需要包含archive_id(评论所属文档ID)、user_name、content等基本信息,如果评论是对某条评论的回复,还需要提供parent_id。
为了有效防范恶意灌水或机器人评论,强烈建议您为评论表单添加验证码功能。AnQiCMS内置了验证码支持,您只需在后台开启相关设置,并在前端表单中加入特定的HTML结构和JavaScript代码即可。
”`twig