As a website operator who is deeply familiar with the operation of AnQin CMS, I know that the comment section is an indispensable part of the website's content ecosystem. It is not only an important place for user interaction but also an extension and amplification of content value.An active and well-organized comment section can significantly enhance user stickiness and promote a positive interaction cycle between content creators and readers.In AnQi CMS, we can very flexibly obtain and display the complete comment list on the article detail page template, including the detailed information of parent and child-level comments, thereby providing users with a clear dialogue context.
The template design of AnQi CMS adheres to the principle of simplicity and efficiency, and the core lies in utilizingcommentListLabel. This label is specifically designed to retrieve comment data for specified articles from the database. In most cases, we name the template file for the comment list ascomment/list.html，and place it in the root directory of the current template package.partial/Subdirectory for convenience in the article detail page.{模型table}/detail.html) by tag reference.include.
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 transmitted througharchiveDetailLabel preloading to the template context.archiveTherefore, we can directly access the{{archive.Id}}current article ID and use it ascommentListTagsarchiveIdParameters, in order to ensure that we obtain comments related to the current article.
Comment list labelcommentListThe basic usage is to define it as a variable, for examplecommentsand then throughforLoop through this variable to sequentially display each comment. We can choosetype="list"to simply list comments, ortype="page"to implement comment pagination.limitThe parameter can control the number of comments per page or per load.orderThe parameter allows us to sort comments by ID in ascending order (id asc) or descending order (id desc) Sort it to adapt to different display logic.
Here is an example of a comment list display:
<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 a comment, we first checkitem.Statusfield. If the status is not1The comment is still under review. If so, the prompt 'Under review' will be displayed, and part of the comment content will be truncated to ensure that the full unreviewed information is not displayed.
父子级评论的展示是此处的关键。安企CMS的commentList标签巧妙地在每个评论item中提供了一个item.Parent对象，如果当前评论是对其他评论的回复，那么item.ParentThis will include the complete data of the replied comment.{% if item.Parent %}By doing so, we can identify child comments and display their content above.blockquote
In addition, the posting time of the comment.CreatedTimeis a timestamp, and we utilize it tostampToDateLabel it as a user-friendly date and time display. Number of likesVoteCountIt will also be displayed directly, and we have reserved HTML structures for like and reply functions, which are usually combined with JavaScript for interactive implementation. IfcommentListLabel configuration set totype="page"Then, below the comment list, we will also introducepaginationa label to generate pagination navigation, guiding users to browse all comments.
Common Questions (FAQ)
Q: How to implement multi-level replies in the comment list (i.e., replies to replies)?A: Secure CMS
commentListTags mainly support the display of parent-child two-level comments, that is, comments and direct replies to comments.item.ParentThe field helps you identify and display direct parent comments. If you need to display a deeper nested reply structure, you may need to perform additional logic processing through JavaScript on the front-end, based on the flattened comment list data.ParentIdandIdThe 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 default output of tags.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.item.ContentUseurlizeFilter, for example{{item.Content|urlize|safe}}This will help improve the user experience of the comment section.Q: How to control the display of unmoderated comments?A: Each comment data contains a
Statusfield. WhenStatusresponse for1It indicates that the comment has passed the review and can be displayed normally; whenStatusresponse for0or other values, it indicates that the comment is still under review. You can use it in the template.{% if item.Status != 1 %}Determine, display a "Under review" prompt for unapproved comments, and optionally hide the full content or only show a partial summary to ensure content compliance.