User comments are an important manifestation of website vitality, as they not only enhance the interactivity of the content but also provide valuable references for other visitors.Anqi CMS fully understands the importance of comment management, providing simple yet powerful features that allow you to flexibly display comment lists on the website front-end and clearly identify the review status of comments.
The core of displaying the comment list on the front end:commentListtags
To display user comments on your website's frontend page, you need to use the AnQiCMS providedcommentListTemplate tag. This tag helps you easily retrieve comment data related to a specific article or product.
In most cases, the comment list is associated with a specific document (such as an article detail page or a product detail page). Therefore, when usingcommentListtags, we usually specifyarchiveIdParameter, the value of this parameter is the unique identifier ID of the current page document. You can use{% archiveDetail with name="Id" %}tags to get the ID of the current document.
In addition, to better control the display of comments, you can use parameters to select the list type. When you want the comment list to support pagination, you shouldtypeuse the parameter to enable it.typeset"page"It is a good choice; if you only need to display a fixed number of comments without pagination, you can set it to"list"and combine withlimitParameter.
For example, on the article detail page, you can start fetching comment data like this:
{% archiveDetail archiveId with name="Id" %} {# 获取当前文档的ID，并赋值给archiveId变量 #}
<div class="comments-section">
<h3>用户评论 ({{ archive.CommentCount }}条)</h3>
{% commentList comments with archiveId=archiveId type="page" limit="10" %}
{# 遍历获取到的评论列表 #}
{% for item in comments %}
{# 这里是每条评论的展示内容 #}
{% empty %}
<p>目前还没有评论，快来抢沙发吧！</p>
{% endfor %}
{% endcommentList %}
</div>
In this example,commentsThe variable will contain all the comment data that meets the criteria.forThe loop will process each comment one by one,emptyBlocks will display a prompt message when there are no comments.
Clearly indicate the review status
AnQiCMS has fully considered the needs of content review in comment management, so each comment data comes with aStatusThis field is the key to distinguish whether the comment has passed the review:
- When
Statusresponse for1means that the comment has passed the review and can be normally displayed on the front-end. - When
Statusresponse for0When, it indicates that the comment is still under review. At this time, we usually do not display it completely to the public, but instead give the user a "under review" prompt.
UtilizeifLogical judgment label, we can easily judge according toitem.StatusThe value controls the display content of comments.For example, we can only display comments that have passed the review, while for comments that are under review, we can only show a username and a 'Under review' prompt. We can even truncate or hide their content.
Here is an example of displaying the review status in the comment list and handling replies:
{% archiveDetail archiveId with name="Id" %}
<div class="comments-section">
<h3>用户评论 ({{ archive.CommentCount }}条)</h3>
{% commentList comments with archiveId=archiveId type="page" limit="10" %}
{% for item in comments %}
<div class="comment-item {% if item.Status != 1 %}comment-pending{% endif %}">
<div class="comment-header">
<span class="comment-username">
{% if item.Status != 1 %}
<i class="icon-pending"></i> 审核中用户：{{item.UserName|truncatechars:6}}
{% else %}
{{item.UserName}}
{% endif %}
</span>
{% if item.Parent %}
<span class="reply-indicator">回复</span>
<span class="comment-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.Status != 1 %}
<blockquote class="pending-message">该评论正在审核中，请耐心等待。</blockquote>
{# 如果您希望在审核中也显示部分内容，可以这样处理： #}
{# <p class="pending-content">{{item.Content|truncatechars:30}}...</p> #}
{% else %}
{% if item.Parent %}
<blockquote class="reply-quote">
{% if item.Parent.Status != 1 %}
<span class="text-muted">原评论正在审核中...</span>
{% else %}
{{item.Parent.Content|truncatechars:100}}
{% endif %}
</blockquote>
{% endif %}
<p>{{item.Content}}</p>
{% endif %}
</div>
<div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
{% if item.Status == 1 %}
<a class="action-btn praise-btn" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
<a class="action-btn reply-btn" data-id="reply">回复</a>
{% endif %}
</div>
</div>
{% empty %}
<p>目前还没有评论，快来抢沙发吧！</p>
{% endfor %}
{# 评论分页 #}
{% pagination pages with show="5" %}
<div class="pagination-nav">
<a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
{% if pages.PrevPage %}<a class="page-link" href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
{% for pageItem in pages.Pages %}
<a class="page-link {% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
{% endfor %}
{% if pages.NextPage %}<a class="page-link" href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
<a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
</div>
{% endpagination %}
{% endcommentList %}
</div>
In the above code, we useditem.ParentTo determine if the current comment is a reply to another comment, and to display a part of the parent comment in the form of a block quote.stampToDateThe filter helps us format timestamps into readable date and time.
Comment submission form with captcha
To enable users to submit comments conveniently on the front end, you also need to integrate a comment submission form. AnQiCMS provides a unified comment submission interface/comment/publishThe form must includearchive_id(Document ID of the comment),user_name/contentetc. If the comment is a reply to a specific comment, additional information is also required,parent_id.
To effectively prevent malicious flooding or robot comments, it is strongly recommended that you add a captcha function to the comment form.AnQiCMS built-in captcha support, you just need to enable the relevant settings in the background and add the specific HTML structure and JavaScript code to the front-end form.
`twig