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 display for article comment lists.This article will introduce in detail how to implement this feature through template tags in the Anqi CMS, thus providing users with a better browsing experience.
Understanding the core of comments and pagination
In the template system of AnQi CMS, the pagination display of article comment lists mainly depends on two core template tags: EnglishcommentListandpagination.
commentListtags：Used to retrieve the comment data of a specified article. It supports various parameters, such as filtering comments through the article ID (archiveId) to filter comments, throughtype="page"Enable pagination mode, as well as setting the number of comments displayed per page ()limit).paginationtags: Used specifically to generate pagination navigation. It can be based oncommentListThe label retrieves the pagination data, automatically generates "Previous Page
Through the combination of these two tags, we can build a feature-rich, user-friendly comment pagination system.
Step 1: Prepare the comment list template
通常，评论列表会放置在文章详情页 (archive/detail.html) 或单独的评论列表模板文件 (comment/list.html) In English, no matter which way, 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.comment/list.htmlNaming conventions. A more common scenario is that we integrate the comment feature 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 get the current article's ID and pass it tocommentListThe article information on the article detail page of Anqi CMS is usually passed througharchiveThe object is provided directly.
The basic structure of the comment data called:
{# 假设这是文章详情页 (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 critical, it passes the current article ID tocommentListto ensure that only comments related to the current article are displayed.archiveIs the current article object provided automatically by the Anqi CMS on the article detail page.type="page": Tell the system that we need pagination mode, not just a simple list mode.limit="10"：Set the number of comments displayed per page to 10. 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.ContentEnglish translation: Retrieve the username, creation time, and comment content of the comments.item.Status：Used to determine whether the comment has passed the review, if the comment is set to review status in the background, a prompt can be displayed to the user before it is approved.item.ParentThis field is provided to support multi-level comments (reply to comments). If it exists, it indicates that the current comment is a reply to another comment.stampToDateAn auxiliary label for formatting timestamps, converting timestamps to a readable date format.
Step 3: Build pagination navigation.
IncommentListUse immediately after the loop ends.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:
pages：This iscommentListIntype="page"modes automatically generate objects containing pagination information.show="5": indicates that at most 5 page number buttons are displayed in the middle page number section, for example.... 2 3 4 5 6 ....pages.FirstPage.Link/pages.PrevPage.LinkGet links to the home page, previous page, next page, and last page respectively.pages.PagesThis is an array containing all the middle page number information, through the loop{% for page_item in pages.Pages %}to display the specific page number.page_item.IsCurrentEnglish: Used to determine whether the current page number is the page currently being viewed, usually adding aactiveEnglish: Class to highlight.
Integrated code example
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,defaultparts of thearchive/detail.htmlfile:
`twig {# … Article details content … #}