In website content operation, user comments are an important part of building community atmosphere, enhancing content interaction, and collecting user feedback.AnQiCMS (AnQiCMS) knows this well, 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 like counts and other detailed information.
Next, we will together learn how to clearly present these comment contents on your website using the template tags and fields of the Anqi CMS.
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 uniformly through the backend.Especially in the front-end display, Anqi CMS empowers users with high levels of customization through predefined template tags, allowing you to flexibly control the display style of comments according to the design style of the website and user experience requirements.
Core: UtilizecommentListTag Display Comments
To display comments on the front-end page, we will mainly use AnQiCMS'scommentListTemplate tag. This tag is specifically used to retrieve the comment list of specified content.
Generally, comments are attached to an article or product. Therefore, when usingcommentListTags, we need to clearly inform the system which article or product comments you want to get. This can be done byarchiveIdParameters to implement. The ID of the current content is usually through thearchive.Idto get.
The following is an example of a basic comment list call:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 评论循环体，稍后详细解释 #}
{% endcommentList %}
Here:
commentsThis is the variable name you set for the comment list, you can access the data of each comment using it in subsequent operations.forin the loop byitem(or the loop variable name you customized) to access the data of each comment.archiveId=archive.IdIt indicates that we are retrieving the comments corresponding to the current detail page article (or product).type="page"The comment list is expected to support pagination, so that when the number of comments is large, they can be displayed across different pages.limit="10"It sets 10 comments to be displayed per page.
Clear display of reply levels
Users often interact with each other through replies, and showing the reply relationship of comments can make the discussion more organized. The Anqi CMS includes acommentListtag contains aParentThe field, it saves the detailed information of the parent comment that the current comment replies to. By using this field, we can build a hierarchical reply display on the front-end.
Whenitem.ParentIt means that the current comment is a reply to another comment. We can adjust the display style, for example, using a quote block.item.ParentWhether it exists, such as using a quote block.<blockquote>）to highlight the replied content and specify 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 judge 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 it at a glance. At the same time, we also useditem.StatusTo determine if the comment is under review, so that the corresponding prompt can be given.
Direct like count display
Liking is an important indicator of the popularity of comments. Anqi CMS provides this information for each comment data.VoteCountThe field directly stores the number of likes the comment received. You only need to refer to this field in the template to display it on the frontend.
In the above code example, you can see the display method of the like count:
<a class="praise-button" data-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
Here{{item.VoteCount}}This will directly display the number of likes for the current comment. Usually, to achieve the effect of real-time update of the number after the user clicks like, we will combine JavaScript and backend API (such as the one provided by Anqi CMS)/comment/praiseInterface）to complete dynamic interaction, but that is within the scope of frontend JS, and here we mainly focus on data display.
Comment submission and interaction (briefly mentioned)
To allow users to post comments or like operations, 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., if you want 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 feature can be monitored through the click event of the like button on the front-end JavaScript, and then transmitted through AJAX to/comment/praiseInterface sends a POST request, with commentsidAfter successful, update the page onVoteCountDisplay.
Comment list pagination processing
When there are many comments, reasonable pagination can improve the page loading speed and user experience.commentListsetting in the labeltype="page"After that, you can combinepaginationtags to generate pagination navigation.
`twig {# Comment list code (such as the above example) #}
{# Page #}