The Anqi CMS provides a convenient comment function for website content interaction, allowing visitors to express their opinions on articles, products, and other content.For website operators, how to clearly display these comments on the website front-end and provide user-friendly pagination and parent-child comments (that is, reply function) is a key link to improve user experience.Below, let's discuss how to achieve this goal in Anqi CMS.
Understanding the core elements of the comment function
In AnQi CMS, the comment feature is built around documents (such as articles, products, etc.).Each comment is associated with a specific document ID.
- Document ID (
archiveId): This tells the system which article or product comments we want to retrieve. - Comments list tag (
commentList): Used to retrieve comment data from the database. - Pagination tag (
pagination): Handling page jump when the number of comments is large. - Parent-child comment structure (
item.Parent): Differentiating between the main comment and the reply to the main comment, implementing nested display.
Step 1: Get the document ID of the current page
Generally, comment lists are displayed on the detail page of specific documents. Therefore, we need to first obtain the unique identifier of the current document - the document ID. Anqi CMS providesarchiveDetailLabel to get the document details, which includes the document ID.
You can use the template on the document detail page (for example)archive/detail.html) to obtain the current document ID in the following way:
{% archiveDetail currentArchiveId with name="Id" %}
Here, we assign the current document ID to a variablecurrentArchiveIdso that it can be used in subsequent operationscommentListin the tag.
Step two: Display the basic comment list
With the document ID, we can usecommentListThe tag retrieves and displays comments. This tag is very flexible, allowing us to control the sorting, display quantity, and list type of comments.
To display a basic comment list, we can specifyarchiveIdfor the just obtainedcurrentArchiveIdAnd, totypeis set tolist, and setlimitto control the number of comments displayed per page (here we assume it is set to 10 comments).
<div class="comments-section">
<h3>用户评论</h3>
{% commentList comments with archiveId=currentArchiveId type="list" limit="10" %}
{% for item in comments %}
<div class="comment-item">
<p class="comment-meta">
<strong>{{ item.UserName }}</strong> 发表于
<span>{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
</p>
<div class="comment-content">
{% if item.Status != 1 %}
<p class="moderating-tip">此评论正在审核中，稍后可见。</p>
{% else %}
<p>{{ item.Content }}</p>
{% endif %}
</div>
<div class="comment-actions">
<a href="javascript:;" class="reply-btn" data-id="{{ item.Id }}" data-user="{{ item.UserName }}">回复</a>
<a href="javascript:;" class="praise-btn" data-id="{{ item.Id }}">赞(<span class="vote-count">{{ item.VoteCount }}</span>)</a>
</div>
</div>
{% empty %}
<p>目前还没有评论，快来发表你的看法吧！</p>
{% endfor %}
{% endcommentList %}
</div>
In this example, we traversedcommentsthe list, displaying the username, posting time, comment content, and added comment status judgment (item.Status), in order to give users a friendly reminder during comment review. At the same time, we also added 'reply' and 'like' buttons for subsequent interactions.
Step 3: Implement pagination for the comment list
When there are many comments, loading them all at once can affect the performance of the page. At this point, pagination becomes particularly important. To implement pagination, we need tocommentListlabel'stypeparameters fromlistchanged topage, then combinepaginationtags to generate pagination navigation.
First, modifycommentListTags:
{% commentList comments with archiveId=currentArchiveId type="page" limit="10" %}
{# 评论内容展示与之前类似 #}
{% endcommentList %}
Next, incommentListlabel's{% endcommentList %}After, addpaginationTags to generate pagination links:
<div class="pagination-section">
{% pagination pages with show="5" %}
<ul>
{% if pages.FirstPage %}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
{% endif %}
{% if pages.PrevPage %}
<li class="page-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
{% endif %}
{% for item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li class="page-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
{% endif %}
{% if pages.LastPage %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
{% endif %}
</ul>
<p class="pagination-info">共 {{pages.TotalItems}} 条评论，当前第 {{pages.CurrentPage}} / {{pages.TotalPages}} 页</p>
{% endpagination %}
</div>
paginationTags will generate home, previous page, specific page number, next page, and end page links based on the current comment list.show="5"The parameter indicates that up to 5 page number buttons can be displayed.item.IsCurrentIt can help us add a highlight style to the current page number.
Step 4: Implement nested display of parent-child comments.
The parent-child comment (i.e., reply) function is an important embodiment of the interactivity in the comment area. Anqi CMScommentListtags are provided in each comment itemitemin the form of a tagParentIf the current comment is a reply to another comment,item.Parentit will contain the complete information of the replied comment. We can use this to design nested comment styles.
To implement the display of parent-child comments, we can iterate through in the loopcommentswhen, judgeitem.ParentDoes it exist. If it exists, it means it is a reply, and we can display its content nested and indicate which comment it is replying to.
`twig