As an experienced website operation expert, I am very clear that the comment feature in a content management system can not only increase user interaction, but also bring vitality and richness to the website.AnQiCMS (AnQiCMS) is an efficient content management system developed based on the Go language, which provides strong comment functions while also considering the flexibility of template creation.commentListThe label elegantly implements the pagination display of comment data.
In AnQiCMS,commentListHow does the label implement the pagination display of comment data?
The importance of User Generated Content (UGC) in today's internet environment is self-evident.Comments serve as an important form of interaction between users and website content, which can significantly enhance the sense of community and user stickiness of the website.However, when the number of comments is large, if not managed and displayed reasonably, the page loading speed, user experience, and server performance will all be affected.commentListtags, withpaginationTags, which can efficiently and flexibly implement pagination of comment data, ensuring that even with a large amount of comments, the website can maintain a smooth access experience.
commentListTags: The core of comment data acquisition.
commentListThe tag is the starting point for obtaining comment data in the AnQiCMS template.It can not only pull the comment content, but more importantly, it can retrieve data in "pagination mode", which lays a foundation for the subsequent pagination display.
To enable pagination functionality,commentListthe tag needs to be set with two key parameters:
archiveIdThis parameter specifies the ID of the document (article, product, etc.) you want to retrieve comments for. Usually, on the document detail page, we will go througharchiveDetailLabel to get the current document ID, then pass it tocommentListFor example,archiveId=archive.IdRepresents to get the comments of the current page document.type="page": This is the core to turn on pagination mode. Whentypeset"page"whencommentListThe label will intelligently split comment data according to the current page number and the number of comments per page, and generate the necessary pagination information forpaginationUse the label.limit: is used to set the number of comments displayed per page. For example,limit="10"The display of 10 comments per page.
WhencommentListlabels totype="page"While in the runtime mode, it will store the comment data in a variable that you can customize (for example, we often name it commentsThis variable is an array that contains comment objects, each of which includes the comment ID, username, content, publication time, review status, and whether it is a reply, and other detailed information.
At the same time, it will also silently prepare a global "pagination object" that contains the total number of comments, total number of pages, current page number, first page, previous page, next page, last page, and links to all middle page numbers, which we will use later.paginationLabel to access it.
Let's take a look first.commentListBasic structure of the label:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{% for item in comments %}
{# 在这里渲染每一条评论的具体内容 #}
<div>
<span>{{ item.UserName }}</span> 于
<span>{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span> 评论道：
<p>{{ item.Content|safe }}</p>
{% if item.Parent %}
<blockquote>回复 {{ item.Parent.UserName }}：{{ item.Parent.Content|truncatechars:50|safe }}</blockquote>
{% endif %}
{% if item.Status != 1 %}
<p style="color: gray;">（评论正在审核中...）</p>
{% endif %}
<div class="comment-actions">
<a href="javascript:;" data-id="{{ item.Id }}" class="reply-btn">回复</a>
<a href="javascript:;" data-id="{{ item.Id }}" class="like-btn">点赞 ({{ item.VoteCount }})</a>
</div>
</div>
{% empty %}
<p>暂无评论，快来发表您的真知灼见吧！</p>
{% endfor %}
{% endcommentList %}
In the above code,archive.IdIt is usually the current document ID we get through the document detail page.archiveDetail[en] Tag (such as{% archiveDetail archive with name="Id" %}). We also usedstampToDateFilter to format time,|safeFilter to ensure HTML tags in the comment content can be rendered correctly, as well as|truncatecharsto truncate the reply content, improving readability.{% empty %}Blocks elegantly handles the case when there are no comments.
paginationTags: Build user-friendly pagination navigation
This is not enough to just get comment data, users also need intuitive pagination navigation to browse comments on different pages. At this point,paginationTags come into play.paginationThe label is specifically used to generate navigation links such as 'Home', 'Previous Page', 'Next Page', 'Last Page', and page numbers.
paginationCommon parameters of the label include:
show：Controls the number of page numbers displayed in pagination navigation. For example,show="5"Displays 5 page number digits before and after the current page number.
paginationThe tag will create a namedpagesobject (you can customize the variable name), thispagesThe object is very rich, including all the states and links related to pagination:
TotalItems: Total number of comments.TotalPages: Total number of pages.CurrentPage：Current page number.FirstPage/PrevPage/NextPage/LastPage: These are all objects, each containingName(such as "Home") andLink（对应的URL）。Pages：这是一个数组，包含了所有需要显示的中间页码对象，每个对象同样有Name/LinkandIsCurrent（表示是否是当前页）。
Below ispaginationTags andcommentListLabel usage complete example:
`twig {# 假设这里已经通过 archiveDetail 标签获取到了当前文档的 archive.Id #} {# 例如：{% archiveDetail archive with name=“Id” %}{% set archiveId = archive %}{% endarchiveDetail %} #}