When building a vibrant website, the article comment feature is undoubtedly a core element for enhancing user interaction and promoting the development of a content community.AnQiCMS as an efficient and flexible content management system provides us with powerful template tags, making it simple and intuitive to integrate and display comments.Today, let's delve deeper into AnQiCMS togethercommentListHow tags help us display article comments and cleverly integrate reply and like functions.
commentListTags: The foundation of comment display.
Imagine that we hope to present readers' enthusiastic comments at the bottom of each article. AnQiCMS'commentListThe tag is the key to achieving this goal. It can conveniently obtain the 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" %}To get the current article'sId.
Next iscommentListBasic structure of the tag, we usually name itcommentsVariable to reference in subsequent template code:
{% archiveDetail currentArchiveId with name="Id" %}
{% commentList comments with archiveId=currentArchiveId type="list" limit="6" %}
{# 在这里循环展示评论 #}
{% endcommentList %}
here,archiveIdThe parameter ensures that we get the comments of the current article.type="list"It indicates that we want to get a simple list of comments, andlimit="6"then limits the number of comments loaded for the first time.
commentsVariables are actually an array of comment objects, we can traverse it to display the details of each comment. Each comment (we call itforby looping through it, we can display the details of each comment. Each comment (we call ititemContains rich fields, such as:
Id: 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 obtained throughstampToDateFormat labels.VoteCount: The number of likes the comment has received.Parent: A very important field, if this comment is a reply to another comment,Parentit will contain the complete information of the replied comment.Status: The review status of the comment, for example,1indicating the review has passed,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, ensuring that only reviewed comments are displayed, or giving a friendly reminder to comments under review, is crucial for maintaining the quality of the website content.
Integrate reply function: Make the conversation deeper
The value of comments lies in interaction, and the reply function is the embodiment of the depth of interaction. AnQiCMS is incommentListthe tag throughitem.ParentThe field provides the convenience to implement the reply function.
Ifitem.Parentexists, it means that the currentitemis a reply. We can use it toitem.Parent.UserNameget the nickname of the replied user, and throughitem.Parent.ContentA brief quote of the replied content, allowing the user to clearly see the context of the conversation.
In order for users to be able to initiate a reply, we need to add a 'Reply' button below each comment. When this button is clicked, JavaScript dynamically displays the comment being replied to.IdandUserNameFill in the hidden field in the comment submission form.
`twig {% archiveDetail currentArchiveId with name=“Id” %}
{# Comment submission form #}