在网站运营中,用户评论是提升内容互动性、增强社区氛围乃至优化搜索引擎排名(SEO)的重要一环。安企CMS(AnQiCMS)提供了一套灵活且强大的模板标签系统,让在文章页面下方集成用户评论列表和评论表单变得轻松便捷。
本文将详细介绍如何在安企CMS的文章详情页中,优雅地展示用户评论,并提供用户提交评论的功能。
一、理解评论功能的核心要素
在安企CMS中,评论功能主要通过内置的 commentList 模板标签来实现。这个标签允许我们根据不同的需求,灵活地调用和展示文章相关的评论数据。此外,评论的提交则依赖于特定的表单结构和提交接口。
评论的管理在后台”功能管理”中的”内容评论”模块,可以对评论进行审核、删除等操作,确保内容的质量和合规性。
二、准备文章详情页模板
评论列表通常会展示在文章详情页的底部。因此,我们需要找到对应文章详情页的模板文件。在安企CMS的模板结构中,文章详情页模板通常位于 template/{你的模板目录}/{模型table}/detail.html 或类似的路径下。
在文章模板中,我们需要首先获取当前文章的唯一标识,即文章ID。在文章详情页上下文中,通常可以直接通过 archive.Id 来获取,或者使用 {% archiveDetail with name="Id" %} 标签来明确获取文章ID。这个ID是关联评论与文章的关键。
三、显示评论列表
要显示评论列表,我们将在文章内容的下方使用 commentList 标签。为了实现评论列表的分页显示,我们通常会设置 type="page"。
{# 假设这是你的文章详情内容结束后,评论区域的开始 #}
<div class="comments-section">
<h3>用户评论</h3>
{# 获取当前文章的ID,以便加载其相关评论 #}
{% archiveDetail currentArchiveId with name="Id" %}
{# 使用 commentList 标签获取评论列表,并启用分页 #}
{% commentList comments with archiveId=currentArchiveId type="page" limit="10" %}
{% if comments %}
<ul class="comment-list">
{% for item in comments %}
{# 仅显示审核通过的评论 #}
{% if item.Status == 1 %}
<li class="comment-item">
<div class="comment-meta">
<span class="user-name">{{ item.UserName }}</span>
<span class="post-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
</div>
<div class="comment-content">
{% if item.Parent %}
{# 如果是回复,显示被回复的内容 #}
<blockquote class="reply-to">
回复 {{ item.Parent.UserName }}:
{{ item.Parent.Content|truncatechars:100 }}
</blockquote>
{% endif %}
<p>{{ item.Content }}</p>
</div>
{# 可选:点赞和回复按钮,回复功能通常需要JavaScript实现 #}
<div class="comment-actions" data-comment-id="{{ item.Id }}" data-user-name="{{ item.UserName }}">
<a href="javascript:void(0);" class="praise-btn">赞 (<span>{{ item.VoteCount }}</span>)</a>
<a href="javascript:void(0);" class="reply-btn">回复</a>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
{% else %}
<p class="no-comments">暂无评论,快来发表你的看法吧!</p>
{% endif %}
{% endcommentList %}
{# 集成评论列表的分页功能 #}
{% pagination pages with show="5" %}
<div class="comment-pagination">
{% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}" class="prev">上一页</a>{% endif %}
{% for pageItem in pages.Pages %}
<a href="{{ pageItem.Link }}" class="{% if pageItem.IsCurrent %}current{% endif %}">{{ pageItem.Name }}</a>
{% endfor %}
{% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}" class="next">下一页</a>{% endif %}
</div>
{% endpagination %}
</div>
在上述代码中,我们首先使用 {% archiveDetail currentArchiveId with name="Id" %} 获取当前文章的ID。然后,{% commentList comments with archiveId=currentArchiveId type="page" limit="10" %} 标签会加载与该文章ID关联的评论,并设定每页显示10条评论。
在循环 comments 时,item.Status == 1 的条件非常重要,它确保只有经过后台审核通过的评论才会在前台显示。item.Parent 对象则用于判断当前评论是否是对其他评论的回复,从而在显示时增加被回复评论的内容引用。stampToDate 标签则用于将评论的时间戳格式化为易读的日期时间。
四、添加评论表单
评论列表下方,通常会紧跟着一个评论提交表单,让用户能够方便地发表自己的评论。
”`twig