In AnQi CMS, adding a comment list to the document page and implementing pagination is a key step to improving user interaction experience.This not only allows visitors to participate in discussions and share opinions, but also brings more vitality to the website content.AnQi CMS provides intuitive and powerful template tags, allowing us to easily achieve these functions.
Integrate the comment feature into your document detail page
Generally, comment lists and comment forms are integrated into the document detail pages. In Anqicms, the template files for the document detail page are usually located in similararchive/detail.htmlThe position. Before starting, we need to ensure that the document detail page can correctly obtain the unique identifier of the current document, which is usually througharchiveDetailLabel implementation, for example, get the ID of the current document:{% archiveDetail with name="Id" %}.
1. Display the comment list of the document
AnQi CMS providescommentListThe tag to retrieve and display document comments. This tag is very flexible, and can be used to retrieve comments of specific documents, and supports various display methods, including list mode (list）and pagination mode（page)
To display the comment list on the document detail page and prepare for pagination, you can use it like thiscommentListTags:
<div class="comments-section">
<h3>用户评论</h3>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{% for item in comments %}
<div class="comment-item">
<div class="comment-meta">
<span>
{% if item.Status != 1 %}
审核中：{{item.UserName|truncatechars:6}}
{% else %}
{{item.UserName}}
{% endif %}
</span>
{% if item.Parent %}
<span>回复</span>
<span>
{% if item.Parent.Status != 1 %}
审核中：{{item.Parent.UserName|truncatechars:6}}
{% else %}
{{item.Parent.UserName}}
{% endif %}
</span>
{% endif %}
<span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 发布</span>
</div>
<div class="comment-content">
{% if item.Parent %}
<blockquote>
{% if item.Parent.Status != 1 %}
该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
{% else %}
{{item.Parent.Content|safe}}
{% endif %}
</blockquote>
{% endif %}
{% if item.Status != 1 %}
该内容正在审核中：{{item.Content|truncatechars:9}}
{% else %}
{{item.Content|safe}}
{% endif %}
</div>
<div class="comment-actions">
<a class="praise-button" data-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
<a class="reply-button" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
</div>
</div>
{% empty %}
<p>目前还没有评论，期待您的第一条评论！</p>
{% endfor %}
{% endcommentList %}
</div>
In this code, we:
- Use
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}to retrieve comments.archiveId=archive.IdMake sure to get the comments of the current document.archive.IdIt is obtained automatically or manually from the outer document detail template to get the current document ID.type="page"Is the key to enabling pagination, it tells the system that you need paginated data.limit="10"It specifies that 10 comments are displayed per page.
- By
{% for item in comments %}Loop through each comment. - Displays the username of the commentor (
item.UserName）、comment content（item.ContentAnd the publish time(item.CreatedTime, usingstampToDateFiltered formatting()). - Special handling of replies (via
item.ParentJudging whether there is a superior comment) and the review status of comments(item.Status != 1) - Added for comment content and parent comment content
|safeA filter to ensure that HTML content (if comments support rich text) can be parsed correctly instead of being escaped. - Added "Like" and "Reply" buttons, which usually require JavaScript to interact with the backend API.
2. Implement pagination for the comment list
WhencommentListtags totype="page"A pattern used providespagesan object that contains all the information needed for pagination. We can usepaginationtags to generate pagination navigation based on this information.
Following the above comment list code, you can add the following pagination code:
<div class="pagination-section">
{% pagination pages with show="5" %}
<ul class="pagination-list">
<li class="pagination-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
{% if pages.PrevPage %}
<li class="pagination-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
{% endif %}
{% for item in pages.Pages %}
<li class="pagination-item {% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li class="pagination-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
{% endif %}
<li class="pagination-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>
Here:
{% pagination pages with show="5" %}UsepagesGenerate pagination for the object.show="5"The parameter limits the maximum display of middle page numbers to 5.- We traversed.
pagesWithin the objectFirstPage(Home page),PrevPage(Previous page),Pages(Page number array in the middle),NextPage(Next page),LastPage(End page), and according toIsCurrentfield to add the current pageactiveClass. item.LinkProvided the correct page link,item.NameProvided page text (such as "1- Finally, it also displays the total number of comments, total pages, and current page number, allowing users to get an overview of the comments at a glance.
3. Add comment submission form
To allow users to post comments, we need a submission form.This form typically includes a username, comment content, and a hidden field to specify the document ID of the comment.
`twig