In website operation, user comments are an important factor in enhancing content interaction, strengthening community atmosphere, and optimizing search engine rankings (SEO).AnQiCMS provides a flexible and powerful template tag system, making it easy and convenient to integrate a user comment list and comment form at the bottom of the article page.
This article will introduce in detail how to elegantly display user comments on the article detail page of Anqi CMS and provide the function of submitting comments.
1. Understand the core elements of the comment function.
In Anqi CMS, the comment feature is mainly implemented through built-incommentListThe template tag to implement.This tag allows us to flexibly call and display related comment data according to different needs.In addition, the submission of comments depends on a specific form structure and submission interface.
Comment management is in the background "function management" under the "content comment" module, where comments can be reviewed, deleted, and other operations to ensure the quality and compliance of the content.
Second, prepare the article detail page template
The comment list is usually displayed at the bottom of the article details page.Therefore, we need to find the corresponding article detail page template file.template/{你的模板目录}/{模型table}/detail.htmlor in a similar path.
In the article template, we need to first obtain the unique identifier of the current article, that is, the article ID. In the context of the article detail page, it is usually possible to obtain it directly byarchive.Idor use{% archiveDetail with name="Id" %}Label to explicitly obtain the article ID. This ID is the key to linking comments to articles.
3. Display the comment list
To display the comment list, we will use it below the article content.commentListLabel. To implement pagination of the comment list, we usually settype="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>
In the above code, we first use{% archiveDetail currentArchiveId with name="Id" %}To get the ID of the current article. Then,{% commentList comments with archiveId=currentArchiveId type="page" limit="10" %}The tag will load comments associated with the article ID and set 10 comments per page.
In the loopcommentsthen,item.Status == 1The condition is very important, it ensures that only comments that have passed the background review will be displayed on the front page.item.ParentThe object is used to determine whether the current comment is a reply to another comment, thereby adding the content reference of the replied comment when displayed.stampToDateLabels are used to format the timestamp of comments into a readable date and time.
4. Add comment form
Below the comment list, there is usually a comment submission form that allows users to conveniently post their comments.
`twig