In Anqi CMS, make your article page not just a display of content, but also an active communication platform. The comment function is the bridge connecting content and readers.Understanding how to flexibly display the article comment list in templates, including multi-level replies and clear review status indicators, is crucial for building an interactive website.
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 Comments" option, and here you can make global settings for comments, such as whether to enable comments and whether they need to be reviewed.Ensure that 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 place it on the article detail page (like your)article/detail.htmlAn English template file with a similar name) is used to display the comments of the current article. Anqi CMS provides simple 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 by{{ archive.Id }}Get it. Next, we can usecommentListTags to get 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 comments with the current article.type="list"Indicates that we want to get a simple comment list, not the complete dataset used for pagination (pagination will be mentioned later).limit="10"Limited the number of comments displayed per page.order="id desc"Latest comments are displayed first.
Skillfully handles multi-level replies.
Comments are often not one-way; there may be reply relationships between users. The Anqi CMS comment system naturally supports multi-level replies.commentListLabel returns the comment data, each comment item (we name it here)item) will contain aParentIdfield to indicate which comment it is replying to. More conveniently, it also providesParentThe object directly includes the complete data of the parent comment.
Using this information, we can build a comment display structure with a sense of hierarchy. A common practice is to check if the comment hasParentObject, if any, is displayed as a nested reply.
Here 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 clearly define the reply object, and throughitem.Parent.ContentDisplay part of the replied content, increase 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 in Anqi CMS includes aStatusfield, whose value is1Means the comment has been approved.0Means it is under review.
To provide users with a transparent experience, we can add a review status hint when displaying comments, based on theStatusfield.
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 add:<span class="moderating-label">审核中：</span>In the comment content section, if the comment is in review status, a prompt message is displayed instead of the actual content.This protects the website from displaying unreviewed content and also informs users of their comment status.
Introduce the comment submission form
To allow users to post comments, you also need to add a comment submission form below the comment list or at an appropriate location. This form usually POSTs data to/comment/publishinterface.
An English version of the comment form might include these fields:
`twig