How to implement pagination display and like function for comment content in AnQiCMS?

In website operation, user comments and interaction are the key to enhancing the vitality of content.AnQiCMS (AnQiCMS) provides powerful content management capabilities, among which the comment function is an important bridge for user interaction with content.This article will discuss in detail how to implement pagination for the comment list in Anqi CMS, as well as add a like function for comment content, to enhance the interactive experience of your website.

AnQiCMS comment feature overview

AnQi CMS has been built-in with article comment and comment management functions since its early version, which provides the website with native user interaction support.The system allows users to post comments and supports administrators to review and manage them in the background, ensuring the quality and compliance of the comment content.We need to use the flexible template tags provided by Anqicms to display these comments.

Implement comment list pagination display

When the number of comments on an article is high, loading all comments at once not only affects the page loading speed but also reduces the user experience.The Anqi CMS provides a pagination feature for the comment list, allowing you to load comments as needed to keep the page neat and efficient.

To implement comment list pagination display, we mainly use two key template tags:commentListused to retrieve comment data, as well aspaginationused to generate pagination navigation.

1. UsecommentListTag to get comment data commentListTags are used to retrieve comment data from the database. To implement pagination, we need to specify the number of comments to display per page.typethe parameter to"page"，and specify the number of comments to display per page.limit。“Furthermore，”archiveIdThe parameter is mandatory, it indicates which article's comments to retrieve. Usually, you will use this feature on the article detail page, at this timearchive.Idthe current article's ID will be provided automatically.

   Here is a basiccommentListTag usage example, it will retrieve the comments of the current article and display 10 comments per page:

   {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
       {# 遍历评论列表 #}
       {% for item in comments %}
           <div>
               {# 显示评论用户名，如果未审核则提示 #}
               <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")}}</span>
           </div>
           <div>
               {# 显示评论内容，如果未审核则提示 #}
               {% if item.Parent %}
               <blockquote>
                   {% if item.Parent.Status != 1 %}
                   该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
                   {% else %}
                   {{item.Parent.Content|truncatechars:100}}
                   {% endif %}
               </blockquote>
               {% endif %}
               {% if item.Status != 1 %}
                   该内容正在审核中：{{item.Content|truncatechars:9}}
               {% else %}
               {{item.Content}}
               {% endif %}
           </div>
           {# 此处可以放置点赞和回复按钮，下文将详细讲解点赞 #}
           <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
               <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
               <a class="item" data-id="reply">回复</a>
           </div>
       {% endfor %}
   {% endcommentList %}
   

   In the above code:

   • archive.IdIs the ID of the current article, making sure that the comments are associated with the article.
   • type="page"Informs the system that we need paginated data.
   • limit="10"Set to display 10 comments per page.
   • item.Status != 1Used to determine whether a comment has passed the review, unreviewed comments can be displayed as "Under review".
   • item.ParentUsed to display the parent comment information of a reply comment, forming a nested comment structure.
   • stampToDateIs a convenient time formatting function.

2. UsepaginationThe tag generates pagination navigationAfter obtaining the paginated comment data, we still need a pagination navigation so that users can jump to different comment pages.paginationwith the tag andcommentListUsing the tag in conjunction, it can automatically generate pagination links that match the current page status.

   IncommentListlabel's{% endcommentList %}After that, you can addpaginationTags:

   <div>
       {% pagination pages with show="5" %}
           <ul>
               <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
               <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
               {% if pages.PrevPage %}
                   <li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
               {% endif %}
               {% for item in pages.Pages %}
                   <li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
               {% endfor %}
               {% if pages.NextPage %}
                   <li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
               {% endif %}
               <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
           </ul>
       {% endpagination %}
   </div>
   

   here,pagesIspaginationthe pagination information object provided by the tag,show="5"Indicate that up to 5 page number buttons are displayed. You can adjust the display style and content of pagination according to your design requirements.

Implement the like function for comment content.

Adding a like feature to comments is an effective way to enhance user interaction and encourage high-quality comments.The like function of AnQi CMS is implemented through asynchronous requests (AJAX) sent by the front-end JavaScript to interact with the backend.

1. HTML structure for liking commentsIn the display area of each comment, we need an clickable element (such as<a>tag), and include the number of likes displayed<span>. The key is to add a like element.data-idattribute, storing the unique ID of the current comment so that you know which comment was liked when clicked.

   <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
       <a class="item vote-comment" data-comment-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
       <a class="item" data-id="reply">回复</a>
   </div>
   

   Here, we add likes for the<a>Tag addedclass="vote-comment"anddata-comment-id="{{item.Id}}"and a like count display<span>Itsclass="vote-count"will be used for subsequent JavaScript updates

2. JavaScript implementation for comment likingThe like function needs to listen for click events with JavaScript and send a POST request to the backend. The Anqi CMS comment like interface is/comment/praiseIt needs to accept a parameter namedidwhich is the ID of the liked comment. The backend will handle the like logic and return the latest number of likes.

   Here is an example of a JavaScript code snippet using jQuery to implement a like function

   `javascript $(document).ready(function() {

   $(".vote-comment").on("click", function (e) {
       e.preventDefault(); // 阻止默认的链接跳转行为
       let that = $(this);
       let commentId = that.data("comment-id"); // 获取评论ID
   
       // 发送点赞请求
       $.ajax({
           url: "/comment/praise",
           method: "POST", // 点赞通常是POST请求
           data: { id: commentId }, // 传递评论ID
           dataType: "json", // 期望后端返回JSON数据
           success: function (res) {
               if (res.code === 0) { // 假设 res.code == 0 表示成功
                   // 点赞成功，更新页面上的点赞数量
                   that.find(".vote-count").text(res.data.vote_count);
                   // 可以选择性地禁用点赞按钮，防止重复点赞
                   // that.addClass("liked").off("click");
                   alert(res.msg || "点赞成功！");
               } else {
                   // 点赞失败，显示错误信息
                   alert(res.msg ||