How to display the AnQiCMS comment list on the front end and show the reply level and like count?
In website content operation, user comments are an important part of building community atmosphere, enhancing content interaction, and collecting user feedback.AnQiCMS (AnQiCMS) fully understands this, providing a powerful and flexible comment management feature, and through its powerful template engine, allowing you to easily display comments on the front-end page, including reply levels and likes count and other detailed information.
Next, we will together learn how to use the template tags and fields of Anqi CMS to clearly present these comments on your website.
AnQiCMS Comment Function Overview
The comment feature of AnQi CMS is designed to be simple and efficient, just like the other parts of its content management system.It allows users to post comments below articles, products, and other content, and to manage them centrally through the backend.Especially in the front-end display, AnQi CMS empowers users with high customization capabilities through predefined template tags, allowing you to flexibly control the display of comments according to the design style and user experience needs of the website.
Core: utilizingcommentListTag Display Comments
To display comments on the front-end page, we mainly use AnQiCMS'scommentListTemplate tag. This tag is specifically used to retrieve the comment list for specified content.
Generally, comments will be attached to an article or product. Therefore, when usingcommentListWhen labeling, we need to clearly inform the system which article or product comments you want to retrieve. This can be done byarchiveIdParameters are used to implement. In an article or product detail page, the ID of the current content is usually obtained througharchive.IdGet it.
The following is a basic example of a comment list call:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 评论循环体，稍后详细解释 #}
{% endcommentList %}
Here:
commentsIs the variable name you set for the comment list, you can access the data of each comment in subsequent operations.forthrough the loopitem(Or you can use a custom loop variable name) to access the data of each comment.archiveId=archive.IdIndicated that we are retrieving the comments corresponding to the current detail page article (or product).type="page"We hope that this comment list supports pagination, so that when the number of comments is large, they can be displayed on different pages.limit="10"Then set 10 comments to be displayed per page.
Clear display of reply levels
Interactions between users often take the form of replies, displaying the reply relationship of comments can make the discussion more organized. Anqi CMS'scommentListA tag contains oneParentA field that stores the detailed information of the parent comment to which the current comment is replying. Using this field, we can build a hierarchical reply display on the front end.
Whenitem.ParentWhen present, it means that the current comment is a reply to another comment. We can adjust the display style by judgingitem.Parentwhether it exists, such as using a block quote (<blockquote>To highlight the content being replied to and indicate which user's comment was replied to.
Here is an example code snippet showing the reply hierarchy.
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
{% for item in comments %}
<div class="comment-item">
<div class="comment-header">
<span class="username">
{% if item.Status != 1 %}
审核中：{{item.UserName|truncatechars:6}}
{% else %}
{{item.UserName}}
{% endif %}
</span>
{% if item.Parent %} {# 如果存在父级评论，说明是回复 #}
<span class="reply-to">回复</span>
<span class="parent-username">
{% if item.Parent.Status != 1 %}
审核中：{{item.Parent.UserName|truncatechars:6}}
{% else %}
{{item.Parent.UserName}}
{% endif %}
</span>
{% endif %}
<span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
</div>
<div class="comment-content">
{% if item.Parent %} {# 显示父级评论的引用内容 #}
<blockquote class="parent-comment-quote">
{% if item.Parent.Status != 1 %}
该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
{% else %}
{{item.Parent.Content|truncatechars:100}}
{% endif %}
</blockquote>
{% endif %}
{% if item.Status != 1 %} {# 当前评论内容 #}
该内容正在审核中：{{item.Content|truncatechars:9}}
{% else %}
{{item.Content}}
{% endif %}
</div>
{# 点赞和回复操作区，稍后解释 #}
<div class="comment-actions">
<a class="praise-button" data-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
<a class="reply-button" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
</div>
</div>
{% endfor %}
{% endcommentList %}
In this example, we use{% if item.Parent %}To determine whether the current comment is a reply. If it is, display the word "reply" and quote the username and part of the content of the parent comment so that the user can see at a glance. At the same time, we also useditem.StatusTo determine whether the comment is under review, so that the corresponding prompt can be given.
Display the number of likes directly.
Liking is an important indicator of the popularity of comments. Anqi CMS provides this for each comment data.VoteCountThe field directly stores the number of likes the comment has received. You just need to refer to this field in the template to display it on the frontend.
In the above code example, you can see the way the like count is displayed:
<a class="praise-button" data-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
Here{{item.VoteCount}}The number of likes for the current comment will be displayed directly. Usually, to achieve the effect of real-time update of the number of likes after the user clicks the like button, we will combine JavaScript and the backend API (such as the one provided by Anqi CMS)/comment/praiseAn interface is used to achieve dynamic interaction, but that is the scope of front-end JS, and here we mainly focus on data display.
Comments submission and interaction (briefly mentioned)
In order for users to be able to post comments or like, you also need to place a comment submission form below or next to the comment list and bind a JavaScript event to the like button.
Comment submission form:A basic comment submission form needsarchive_id(Current article ID),user_name/contentetc. To reply to a specific comment, you need to addparent_id. The submission address is/comment/publish.
<form method="post" action="/comment/publish">
<input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
<input type="hidden" name="parent_id" value="" id="parent-comment-id"> {# 用于回复 #}
<input type="text" name="user_name" placeholder="您的昵称" required>
<textarea name="content" placeholder="您的评论" required></textarea>
<button type="submit">发表评论</button>
</form>
Comment like interaction:The like function can be monitored by the front-end JavaScript for the click event of the like button, and then send a POST request through AJAX to/comment/praisethe interface with the commentid. After successful update on the pageVoteCountdisplay.
Comment list pagination processing
When there are many comments, reasonable pagination can improve page loading speed and user experience. IncommentListSet in the labeltype="page"After that, you can combinepaginationtags to generate pagination navigation.
`twig {# Comment list code (as shown in the example) #}
{# Pagination code #}