How to implement the pagination display function of the article comment list?
In website operation, efficiently managing and displaying user comments is crucial for enhancing user interaction and content vitality.AnQiCMS (AnQiCMS) is a powerful content management system that provides flexible template tags, allowing us to easily implement pagination of article comment lists.This article will introduce in detail how to implement this function through template tags in Anqi CMS, thereby providing users with a better browsing experience.
Understanding the core of comments and pagination
In the Anqi CMS template system, the pagination display of article comment lists mainly depends on two core template tags: commentListandpagination.
commentListTagUsed to retrieve the comment data for a specified article. It supports various parameters, such as filtering comments through the article ID (archiveId)type="page"Enable pagination mode and set the number of comments displayed per page (limit).paginationTag: It is used specifically for generating pagination navigation. It can according tocommentListTag gets the pagination data, automatically generates "Previous page", "Next page", and page number links.
By combining these two tags, we can build a fully functional and user-friendly comment pagination system.
Step 1: Prepare the comment list template
usually, the comment list is placed on the article detail page (archive/detail.html) or in a separate comment list template file (comment/list.htmlIn any case, we need a container to hold the comment content and pagination navigation.
If you want to use a separate template file for the comment list, you can refer to the Anqi CMS template production conventions incomment/list.htmlName specification. It is more common to integrate the comment function directly into the article detail page.
Step 2: Call the comment data and enable pagination.
To display the comments of an article, we need to obtain the current article ID and pass it tocommentListthe tag. In the article detail page of Anqi CMS, the information of the current article is usually obtained througharchiveThe object is provided directly.
The basic structure of the comment data call is as follows:
{# 假设这是文章详情页 (archive/detail.html) 或其他包含评论的模板 #}
<div class="comment-list-container">
<h3>用户评论 ({{ archive.CommentCount }})</h3> {# 显示评论总数 #}
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{% for item in comments %}
<div class="comment-item">
<div class="comment-meta">
<span class="username">
{% if item.Status != 1 %}
待审核用户: {{item.UserName|truncatechars:6}}...
{% else %}
{{item.UserName}}
{% endif %}
</span>
{% if item.Parent %}
<span class="reply-to">回复 {% 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>
</div>
<div class="comment-content">
{% if item.Parent %}
<blockquote class="reply-quote">
{% if item.Parent.Status != 1 %}
<p>该内容正在审核中...</p>
{% else %}
<p>{{item.Parent.Content|truncatechars:100}}</p>
{% endif %}
</blockquote>
{% endif %}
{% if item.Status != 1 %}
<p class="moderation-pending">该评论正在审核中，审核通过后将显示。</p>
{% else %}
<p>{{item.Content}}</p>
{% endif %}
</div>
{# 如果需要点赞功能，可以放置此处 #}
<div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
<a class="like-btn" data-id="praise">赞 ({{item.VoteCount}})</a>
<a class="reply-btn" data-id="reply">回复</a>
</div>
</div>
{% empty %}
<p class="no-comments">暂无评论，快来发表你的看法吧！</p>
{% endfor %}
{% endcommentList %}
</div>
Code explanation:
archiveId=archive.Id: This is crucial, it passes the current article's ID tocommentListto ensure that only comments related to the current article are displayed.archiveThis is the current article object automatically provided by AnQi CMS on the article detail page.type="page": Tell the system that we need pagination mode instead of simple list mode.limit="10": Set the number of comments displayed per page. You can adjust this number according to your actual needs.{% for item in comments %}: Loop through the comments data obtained.item.UserName,item.CreatedTime,item.Content: Retrieve the username, creation time, and comment content of the comments.item.Status: Used to determine if a comment has passed the review, if the comment is set to review status in the background, it can prompt the user before it is approved.item.ParentThis field is provided to support multi-level comments (reply comments). If it exists, it indicates that the current comment is a reply to another comment.stampToDateA helper tag for formatting timestamps, converting timestamps to a readable date format.
Step 3: Build pagination navigation
IncommentListAfter the loop ends, use it immediately.paginationtags to generate pagination navigation.
{# 紧接在 commentList 标签之后 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul>
{# 首页链接 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{# 上一页链接 #}
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
</li>
{% endif %}
{# 中间页码链接 #}
{% for page_item in pages.Pages %}
<li class="page-item {% if page_item.IsCurrent %}active{% endif %}">
<a href="{{page_item.Link}}">{{page_item.Name}}</a>
</li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
{# 尾页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
<p class="pagination-info">
共 {{pages.TotalItems}} 条评论，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页
</p>
{% endpagination %}
</div>
Code explanation:
pagesThis iscommentListIntype="page"Automatically generated object containing pagination information in mode.show="5": indicates that up to 5 page number buttons are displayed in the middle page number section, for example... 2 3 4 5 6 ....pages.FirstPage.Link/pages.PrevPage.Linketc.: to get the links of Home, Previous Page, Next Page, and Last Page.pages.PagesThis is an array that contains all the middle page number information, through the loop{% for page_item in pages.Pages %}to display the specific page number.page_item.IsCurrent: It is used to determine whether the current page number is the one being viewed, and it is usually given anactiveclass to highlight.
Integration of code examples
Place the above two code snippets (comment list and pagination navigation) in order in your template file to implement the complete comment pagination feature. For example, indefaultTemplate'sarchive/detail.htmlfile:
`twig {# ... article details ... #}