When building a vibrant website, the article comment feature is undoubtedly a core element to enhance user interaction and promote the development of the content community.AnQiCMS as an efficient and flexible content management system, provides us with powerful template tags, making integration and display of comments simple and intuitive.commentListHow tags help us display article comments and ingeniously integrate reply and like functions.
commentListTag: The Foundation of Comment Display
Imagine, we hope to show readers' passionate comments at the bottom of each article. AnQiCMS'scommentListTags are the key to achieving this goal. They can conveniently retrieve comment data associated with a specific article and display it in the way we expect.
to usecommentListWe first need to specify the article ID associated with the comment. This is usually achieved by obtaining the current article ID, for example, on the article detail page, we can use{% archiveDetail with name="Id" %}Get the current article'sId.
Below iscommentListThe basic structure of tags, we usually name itcommentsVariables, so that they can be referenced in subsequent template code:
{% archiveDetail currentArchiveId with name="Id" %}
{% commentList comments with archiveId=currentArchiveId type="list" limit="6" %}
{# 在这里循环展示评论 #}
{% endcommentList %}
Here,archiveIdParameters ensure that we are getting the comments of the current article.type="list"Indicates that we want to get a simple list of comments,limit="6"while limiting the number of comments loaded initially.
commentsVariables are actually an array of comment objects, we can traverse it to display the details of each comment. Each comment (which we callforby looping through it, to display the details of each comment. Each comment (which we callitem）contains a wealth of fields, such as:
Id：The unique identifier of the comment.UserName：The nickname of the reviewer.Content: The specific content of the comment.CreatedTime：The posting time of the comment, which is a timestamp and needs to be processed through:stampToDateLabel formatting.VoteCount：The number of likes the comment has received.ParentAn extremely important field, if this comment is a reply to another comment,.Parentit will contain the complete information of the replied comment.StatusThe review status of the comment, for example,1Means approved.0Means under review.
With these fields, we can build a basic comment list:
{% archiveDetail currentArchiveId with name="Id" %}
<div class="comments-section">
<h3>读者评论</h3>
{% commentList comments with archiveId=currentArchiveId type="list" limit="6" %}
{% for item in comments %}
<div class="comment-item">
<div class="comment-meta">
<span>{{ item.UserName }}</span>
<span>发表于 {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
</div>
<div class="comment-content">
{% if item.Status != 1 %}
<p>（此评论正在审核中...）</p>
{% else %}
<p>{{ item.Content }}</p>
{% endif %}
</div>
</div>
{% empty %}
<p>还没有评论，快来发表您的看法吧！</p>
{% endfor %}
{% endcommentList %}
</div>
In this example, we also added support foritem.StatusThe judgment ensures that only comments that have been approved are displayed, or provides a friendly prompt for comments under review, which is crucial for maintaining the quality of the website's content.
Integrated reply function: Make the conversation more in-depth
The value of comments lies in interaction, and the reply function is the embodiment of the depth of interaction. AnQiCMS incommentListTags throughitem.ParentFields, provide us with the convenience to implement reply functions.
Ifitem.Parentexists, it means that the currentitemis a reply. We can useitem.Parent.UserNameto get the nickname of the replied user, and throughitem.Parent.ContentBriefly quote the content that has been replied to, so that users can clearly see the context of the conversation.
In order for users to be able to initiate replies, we need to add a 'Reply' button below each comment. When this button is clicked, JavaScript dynamically adds the comment being replied toIdandUserNameFill in the hidden field in the comment submission form.
auto
{# Comment submission form #}