Build a highly interactive website in AnQiCMS, and the comment feature is undoubtedly the key to increasing user engagement.commentListThe label is a great tool provided by AnQiCMS for this purpose, it can help website developers and operators flexibly display comment content, and clearly present the status of commenters, allowing visitors to grasp the dynamics of the comment area at a glance.
Overview of core features: commentListBasic usage of tags
commentListTags are mainly used to obtain the comment list of a specified document and support pagination. Its basic structure is usually like this:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 评论内容将在这里循环展示 #}
{% endcommentList %}
Here, commentsWe define the variable name for the comment list data obtained, you can name it as needed.archiveId=archive.IdSpecifies which article (or product) comments to retrieve, here thearchive.Idusually it is automatically obtained the ID of the current article on the article detail page.type="page"indicates that we want to display comments in the form of pagination, if pagination is not needed, you can usetype="list".limit="10"It controlled the number of comments displayed per page.
With such settings, we can retrieve comment data from the database to prepare for subsequent display.
A comprehensive display of comment content:itemVariable Details
commentListTags retrieved from comments.commentsA variable is an array object, each array element represents a comment, we usually iterate over these comments in a{% for item in comments %}loop. Each object contains rich comment information, for example:item.
Id: The unique identifier ID of the comment.UserName: The nickname of the commenter.Content: The actual text content of the comment.CreatedTime: The timestamp of the comment post, usually needs to be{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}converted to a readable date and time by such a formatting function.Status: The review status. This is a very important field, usually1indicating that the review has been approved and displayed,0Pending review.ParentIdandParentobject: If the current comment is a reply to another comment,ParentIdIt will record the ID of the parent comment, andParentthe object will contain the complete information of the parent comment, convenient for implementing the display of multi-level comment replies.VoteCount: The number of likes received from comments.
Master these fields, and we can build flexible and diverse comment display effects in the template.
Differentiate comment status: make it clear to the user.
In comment display, clearly inform the user whether a comment has been approved, which is very important for the operation of the website and the user experience. Usingitem.StatusField, we can easily achieve this.
For example, you can display a "Under review" prompt next to the commenter's name, or show only part of the content or a placeholder when the comment content does not pass review.
<div>
<span>
{% if item.Status != 1 %}
<span style="color: gray;">[审核中]</span> {{item.UserName|truncatechars:6}}
{% else %}
{{item.UserName}}
{% endif %}
</span>
<span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 说：</span>
<div>
{% if item.Status != 1 %}
<p style="color: gray;">您的评论正在审核中，请耐心等待。</p>
{% else %}
<p>{{item.Content}}</p>
{% endif %}
</div>
</div>
By making such a judgment, it respects the privacy of the reviewer while also clearly informing other visitors of the current status of the comment, enhancing the transparency and interactivity of the page.
Implement comment replies and like interactions
Display of comment replies
AnQiCMS'commentListTag throughitem.ParentThe object perfectly supports comment replies. Whenitem.ParentWhen present, it means that the current comment is a reply to another comment.We can use this information to display the content of the parent comment in a nested or referenced manner, thus building a clear conversation structure.
<div>
{# 当前评论者的信息 #}
<span>{{item.UserName}}</span>
<span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 说：</span>
{# 如果是回复，显示父评论内容 #}
{% if item.Parent %}
<blockquote style="background-color: #f0f0f0; padding: 10px; margin-left: 20px; border-left: 3px solid #ccc;">
<p>回复 @{{ item.Parent.UserName }}：</p>
{% if item.Parent.Status != 1 %}
<p style="color: gray;">[原评论正在审核中]</p>
{% else %}
<p>{{ item.Parent.Content|truncatechars:100 }}</p> {# 截取父评论内容避免过长 #}
{% endif %}
</blockquote>
{% endif %}
{# 当前评论内容 #}
<p>{{item.Content}}</p>
</div>
Implementation of comment like feature
item.VoteCountThe field directly displays the number of likes on the comment. To implement the like function itself, it is usually necessary to use JavaScript on the front end and AnQiCMS provided/comment/praiseAPI interacts. When the user clicks the like button, the JS sends a POST request to the API, including the comment'sid, and the front end updates after the API is processedVoteCountdisplay.
<div class="comment-actions">
<a href="javascript:;" class="like-button" data-comment-id="{{item.Id}}">
赞 (<span class="vote-count">{{item.VoteCount}}</span>)
</a>
<a href="javascript:;" class="reply-button" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
</div>
(Front-end JS code will listen.like-buttonfor the click event, sendPOSTrequests to/comment/praise, and update elements based on the returned resultsvote-count.)
Page control for comment list
Pagination display is essential for articles with a large number of comments. WhencommentListlabel'stypethe parameter topageIt will cooperate when,paginationTags provide complete pagination functionality.
{# 评论列表循环... #}
{# 分页部分 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
{% if pages.PrevPage %}
<a href="{{pages.PrevPage.Link}}">上一页</a>
{% endif %}
{% for pageItem in pages.Pages %}
<a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
{% endfor %}
{% if pages.NextPage %}
<a href="{{pages.NextPage.Link}}">下一页</a>
{% endif %}
<a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
{% endpagination %}
</div>
Users can easily navigate between different comment pages and view all comments.
Integration and submission of the comment form.
Finally, in order for users to be able to post comments, an comment form needs to be integrated. This form is usually submitted to the AnQiCMS provided/comment/publishInterface. The form must include some hidden fields and user input fields:
`twig