In website operation, article comments are an indispensable part of enhancing user interaction and activating the community atmosphere. AnQiCMS (AnQiCMS) provides us with a powerful and flexible comment management feature, through the clever use ofcommentListTags, we can easily display the comments of articles on the front-end of the website.
This article will delve deeper intocommentListThe various functions of the tags and their actual application in templates, helping you create a highly interactive and user-friendly comment section.
Core tags:commentListOverview
In the Anqi CMS,commentListTags are the core tools used to retrieve and display a specific article's comment list.It allows us to flexibly control the source, sorting, number, and even pagination display of comments.commentListAll of them can meet your needs.
commentListThe basic usage form of the label is as follows:
{% commentList comments with archiveId="文章ID" type="page|list" %}
{# 循环输出评论内容 #}
{% endcommentList %}
Here,commentsIs the variable name you specify for the obtained comment list, you can access the specific information of each comment through the loop within the label.
参数详解：细致掌控评论展示
为了更好地控制评论的显示，commentList标签提供了几个重要的参数：
archiveId：指定评论所属文章This parameter is crucial, it tells the system which article's comments you want to get. Usually, on the article detail page, you canarchive.IdEnglish translation: Get the current article ID dynamically. For example:archiveId=archive.Id.archiveIdIf you do not specify,type: Select list display modetype="list"When you want to display all comments (or a specified number of comments) without pagination, select this mode.type="page"：If you need to paginate comments display, for example, displaying 10 comments per page, then select this mode. It is compatible with the pagination tags of Anqi CMS.pagination，you can build a complete pagination navigation.
order：Define the comment sorting methodYou can control the display order of comments through this parameter:order="id desc"：Default value, sorts comments in descending order by comment ID, usually meaning the latest comments are displayed first.order="id asc"：Comments are sorted in ascending order by comment ID, which usually means the oldest comments are displayed first.
limit：Limit the number of comments displayed.This parameter is used to set the number of comments you want to display.- If you want to display a specified number of comments, for example,
limit="10". - it also supports,
offset,limitMode, for examplelimit="2,10"indicating that the display starts from the 3rd comment and shows 10 comments.
- If you want to display a specified number of comments, for example,
siteId: Comment calls in a multi-site environmentFor CMS users who have deployed multiple sites, if you need to call comment data from other sites,siteIdParameter specifies the ID of the target site. In a single-site environment, this parameter is usually not required.
Comment data field: Learn about the available information
commentListthe tags you getcommentsA variable is an array object, and eachitemrepresents a comment, which includes the following important fields:
Id: The unique ID of the comment.ArchiveId: The ID of the article the comment belongs to.UserName：The nickname or name of the comment user.UserId：The ID of the comment user (if the user is logged in).Ip：The IP address of the comment user.VoteCount：The number of likes the comment has received.Content: The specific content of the comment.Please note that when displaying the HTML content submitted by users, in order to prevent HTML escaping and the tags from being displayed as plain text, it may be necessary to use|safeFilter, for example{{item.Content|safe}}. But also be警惕 potential security risks, ensure that the content has been strictly filtered.ParentId: If this is a reply, it points to the ID of its parent comment.Status：The review status of the comments.Status = 1Means the comment has been reviewed and displayed,Status = 0Means the comment is under review, usually should not be displayed on the front end.ParentIf there is a parent comment, this field will contain the complete data object of the parent comment, with the same structure as the current commentitemThe same, convenient for displaying the reply relationship.CreatedTime：Comment posting timestamp, you can usestampToDateTag it for formatting, such as{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}.
Display comments: two common methods
Understood the label parameters and comment data structure, let's take a look at how to actually display comments in the front-end template.
1. Display of the conventional comment list
When you want to list all comments (or a specified number) on a page without pagination, you can usetype="list":
{# 假设我们正在文章详情页，archive.Id 可用 #}
<div class="comments-section">
<h3>读者评论</h3>
{% commentList comments with archiveId=archive.Id type="list" limit="5" %}
{% for item in comments %}
{# 仅显示已审核通过的评论，或根据业务需求显示审核中的占位符 #}
{% if item.Status == 1 %}
<div class="comment-item">
<div class="comment-meta">
<strong>{{item.UserName}}</strong>
于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}
{% if item.Parent %}
回复 <strong>{{item.Parent.UserName}}</strong>
{% endif %}
</div>
<div class="comment-content">
{{item.Content|safe}} {# 使用|safe避免HTML转义，请确保内容已通过后端安全过滤 #}
</div>
<div class="comment-actions">
<a href="#" class="praise-btn" data-id="{{item.Id}}">赞 ({{item.VoteCount}})</a>
<a href="#" class="reply-btn" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
</div>
</div>
{% elif item.Status == 0 %}
<div class="comment-item comment-pending">
<p>您的评论正在审核中，审核通过后将显示。</p>
</div>
{% endif %}
{% empty %}
<p class="no-comments">暂无评论，快来发表您的看法吧！</p>
{% endfor %}
{% endcommentList %}
</div>
2. Display comments list with pagination
For articles with a large number of comments, pagination can greatly improve page loading speed and user experience. At this time, it is necessary totype="page"and combinepaginationTags:
English