In Anqi CMS, let your article page not only be a display of content, but also an active communication platform, and the comment feature is the bridge connecting content with readers.Understanding how to flexibly display a list of comments in an article template, including multi-level replies and clear review status indicators, is crucial for building interactive websites.
The foundation of the comment function: ensure the backend configuration is ready
Before delving into the template code, we first need to confirm that the comment feature has been enabled in the AnQi CMS backend.You can go to the "Function Management" menu, find the "Content Comment" option, and here you can make global settings for comments, such as whether to enable comments, whether to need to review, etc.Ensure these basic settings meet your website operation requirements, which is a prerequisite for the normal display of comments.
Introduce the comment list on the article detail page
Usually, we will add comments on the article detail page (like your article/detail.htmlOr a similar-named template file to display the comments of the current article. Anqi CMS provides concise and powerful template tagscommentListto help us achieve this.
To display the comment list, you need to know the unique identifier of the current article, which is the article ID. On the article detail page, this ID is usually accessible through{{ archive.Id }}Get it. Next, we can usecommentListtags to obtain comment data.
A basic comment list call might look like this:
{% commentList comments with archiveId=archive.Id type="list" limit="10" order="id desc" %}
{% for item in comments %}
<div>
<!-- 这里将是每条评论的显示内容 -->
<p>{{ item.UserName }} 说:</p>
<p>{{ item.Content }}</p>
</div>
{% endfor %}
{% endcommentList %}
In the above example:
commentsIs the variable name we define for comment list data.archiveId=archive.IdAssociate the comment with the current article.type="list"Means we want to get a simple comment list, not the complete dataset for pagination (which will be mentioned later).limit="10"The number of comments displayed per page is limited.order="id desc"The latest comments are displayed at the top.
Elegantly handles multi-level replies.
Comments are often not one-way, users may have reply relationships between them. The Anqi CMS comment system naturally supports multi-level replies. IncommentListLabel returns the comment data, each comment item (we name it here asitem) will contain aParentIdfield indicates which comment it is replying to. What's more convenient is that it also providesParentThe object directly includes the complete data of the upper-level comment.
Using this information, we can build a comment display structure with a sense of hierarchy. A common practice is to check if comments haveParentAn object, if any, is displayed as a nested reply.
The following is an example structure containing multi-level reply logic:
<div class="comments-section">
{% commentList comments with archiveId=archive.Id type="list" limit="10" order="id desc" %}
{% for item in comments %}
<div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
<div class="comment-meta">
<span class="comment-user">{{ item.UserName }}</span>
{% if item.Parent %}
<span class="comment-reply-to">回复 {{ item.Parent.UserName }}</span>
{% endif %}
<span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
</div>
<div class="comment-content">
{% if item.Parent and item.Parent.Status == 1 %}
<blockquote class="parent-quote">{{ item.Parent.Content|truncatechars:100 }}</blockquote>
{% endif %}
<p>{{ item.Content|safe }}</p> {# 使用 safe 过滤器确保富文本内容正确显示 #}
</div>
<div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
<a class="item praise-button">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
<a class="item reply-button">回复</a>
</div>
</div>
{% empty %}
<p>目前还没有评论，快来发表第一条评论吧！</p>
{% endfor %}
{% endcommentList %}
</div>
In this structure, we use{% if item.Parent %}To determine whether it is a reply and add the corresponding style class (for examplecomment-reply) to distinguish. At the same time, we also refer toitem.Parent.UserNameto clarify the reply object and to proceed throughitem.Parent.ContentDisplaying part of the reply content, enhancing the clarity of the context.
Clear identification of the review status.
Content review is an indispensable part of website operation, and this also applies to the display of comments. The comment data of Anqi CMS contains aStatusfield, whose value is1indicating that the comment has passed the review,0It means that it is under review.
To provide users with a transparent experience, we can display comments according to theStatusfield to add review status hints.
In the above multi-level reply example, we can add such a judgment next to the comment content:
<div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
<div class="comment-meta">
<span class="comment-user">
{% if item.Status != 1 %}
<span class="moderating-label">审核中：</span>{{ item.UserName|truncatechars:6 }}
{% else %}
{{ item.UserName }}
{% endif %}
</span>
{% if item.Parent %}
<span class="comment-reply-to">回复
{% if item.Parent.Status != 1 %}
<span class="moderating-label">审核中：</span>{{ 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 and item.Parent.Status == 1 %}
<blockquote class="parent-quote">{{ item.Parent.Content|truncatechars:100 }}</blockquote>
{% elif item.Parent and item.Parent.Status != 1 %}
<blockquote class="parent-quote"><span class="moderating-label">上级评论正在审核中</span></blockquote>
{% endif %}
{% if item.Status != 1 %}
<p><span class="moderating-label">您的评论正在审核中，审核通过后将显示。</span></p>
{% else %}
<p>{{ item.Content|safe }}</p>
{% endif %}
</div>
<div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
<a class="item praise-button">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
<a class="item reply-button">回复</a>
</div>
</div>
Here we added<span class="moderating-label">审核中：</span>and if the comment is in review status, display a prompt message instead of the actual content in the comment content section.This protects the website from displaying unreviewed content and also informs users of their comment status.
Introduce the comment submission form
In order for users to be able to post comments, you also need to add a comment submission form below the comment list or at a suitable location. This form usually POSTs data to/comment/publishinterface.
A simplified comment form may include these fields:
`twig