How to retrieve and display the comment list of an article in AnQiCMS template, including parent and child comments
As a website operator who is well-versed in the operation of Anqi CMS, I know that the comment section is an indispensable part of the website content ecosystem. It is not only an important place for user interaction but also an extension and amplification of content value.A lively and well-organized comment section can significantly enhance user stickiness, promoting a positive interaction cycle between content creators and readers.In Anqi CMS, we can be very flexible in obtaining and displaying the complete comment list in the article detail page template, including detailed information of parent-child comments, thus providing users with a clear conversation context.
The template design of AnQi CMS follows the principle of simplicity and efficiency, and the core lies in utilizingcommentListThe tag is specifically designed to retrieve comment data for a specified article from the database. In most cases, we name the template file for the comment list ascomment/list.htmlPlace it in the root directory of the current template package orpartial/in the subdirectory for convenience on the article detail page({模型table}/detail.html) throughincludereferences.}
To display the comment list of an article, you first need to obtain the unique identifier of the article, that is, the article ID. In the article detail page of AnQi CMS, the detail data of the current article is usually already througharchiveDetailLabel preloaded into the template contextarchiveVariable. Therefore, we can directly access{{archive.Id}}To get the current article ID and use it ascommentListlabel'sarchiveIdParameters, in order to ensure that we obtain comments related to the current article.
Comment List LabelcommentListBasic usage is to define it as a variable, for example,commentsThen proceedforLoop through this variable to display each comment one by one. We can choose according to the need,type="list"to simply list the comments, or choosetype="page"to implement the pagination display of comments. At the same time,limitThe parameter can control the number of comments per page or per load,orderThe parameter allows us to sort comments by ID in ascending (id asc) or descending (id descSort them to adapt to different display logic.
Here is an example of displaying a comment list:
<div class="comments-section">
<h3>读者评论</h3>
{% commentList comments with archiveId=archive.Id type="page" limit="10" order="id asc" %}
{% for item in comments %}
<div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
<div class="comment-meta">
<span class="comment-author">
{% if item.Status != 1 %}
审核中：{{item.UserName|truncatechars:6}}
{% else %}
{{item.UserName}}
{% endif %}
</span>
{% if item.Parent %}
<span class="reply-to">回复</span>
<span class="comment-parent-author">
{% 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>
<span class="comment-votes">点赞({{item.VoteCount}})</span>
</div>
<div class="comment-content">
{% if item.Parent %}
<blockquote class="parent-comment-quote">
{% if item.Parent.Status != 1 %}
该内容正在审核中：{{item.Parent.Content|truncatechars:50}}
{% else %}
{{item.Parent.Content|truncatechars:100}}
{% endif %}
</blockquote>
{% endif %}
{% if item.Status != 1 %}
该内容正在审核中：{{item.Content|truncatechars:50}}
{% else %}
{{item.Content}}
{% endif %}
</div>
<div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
<a class="action-item praise-btn" data-id="praise">赞</a>
<a class="action-item reply-btn" data-id="reply">回复</a>
</div>
</div>
{% empty %}
<p class="no-comments">目前还没有评论，快来发表你的看法吧！</p>
{% endfor %}
{% endcommentList %}
{# 如果使用了 type="page"，这里需要添加分页导航 #}
{% if pages.TotalPages > 1 %}
<div class="comment-pagination">
{% pagination pages with show="5" %}
<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>
{% endpagination %}
</div>
{% endif %}
</div>
In the above example, we traversedcommentseach variable,itemRepresents a comment. When displaying comments, we first checkitem.Statusfield. If the status is not1The comment is still under review, and a prompt such as "Under Review" will be displayed, and part of the comment content will be clipped to ensure that the entire unreviewed information is not displayed.
The display of parent-child comments is the key here. Anqi CMScommentListThe tags cleverly label each commentitemand provided anitem.Parentobject, if the current comment is a reply to another commentitem.ParentIt will include the complete data of the replied comment. By judging{% if item.Parent %}, we can identify sub-comments and display them above the contentblockquoteThe form of referencing part of the parent comment and the author to clearly show the level of comments, for example, This greatly enhances the user's experience of reading comments, making complex conversation flows easier to understand.
In addition, the comment's posting timeCreatedTimeis a timestamp, and we make use ofstampToDateLabel it to format the date and time in a user-friendly manner. Like countVoteCountIt will be displayed directly, and we have also reserved HTML structures for liking and replying functions, which are usually combined with JavaScript for interactive implementation. IfcommentListTag configuration is set totype="page"Then, below the comment list, we will also introduce an additionalpaginationtag to generate pagination navigation, guiding users to browse all comments.
Frequently Asked Questions (FAQ)
How do I implement multi-level replies (i.e., replies to replies) in a comment list?A: Safe CMS of
commentListTags mainly support the display of parent-child two-level comments, that is, comments and direct replies to comments.item.ParentThe field can help you identify and display the direct parent comments. If you need to display a deeper level of nested reply structure, you may need to perform additional logic processing on the front-end through JavaScript, based on the flattened comment list data according toParentIdandIdThe field is organized into a tree structure for rendering.Q: Will the links in the comment content be automatically converted to clickable links?A:
commentListThe tag defaults to outputting.item.ContentThe content is the original text. If you want the URLs or email addresses in the comments to be automatically converted to clickable hyperlinks, you can do so in the template byitem.ContentUseurlizeFilter, for example{{item.Content|urlize|safe}}This will help improve the user experience in the comment area.Q: How to control the display of unreviewed comments?A: Each comment data contains a
Statusfield. WhenStatusWith1When it indicates that the comment has passed the review and can be displayed normally; whenStatusWith0or other values indicate that the comment is still under review. You can use the template to{% if item.Status != 1 %}Determine, display the prompt "Under review" for comments that have not been approved, and optionally hide the full content or only show a partial summary to ensure compliance.