How does AnQiCMS implement the pagination display of comment lists and the like function for comment content?

In website operation, user comments and interaction are the key to enhancing content vitality.Auto CMS (AutoCMS) provides powerful content management capabilities, where the comment feature is an important bridge for users to interact with content.This article will discuss in detail how to implement pagination for the comment list in the Anqi CMS, as well as adding a like function for comment content, making your website's interactive experience even better.

Overview of AnQi CMS Comment Functionality

AnQi CMS has been integrated with article comments and comment management features since its early versions, providing the website with native user interaction support.The system allows users to post comments, and supports administrators to review and manage comments in the backend to ensure the quality and compliance of the content.To display these comments, we need to make flexible calls with the template tags provided by the AnQi CMS.

Implement the pagination display of comment lists

When there are many comments on an article, loading all comments at once not only affects the page loading speed but also reduces the user experience.The CMS provides pagination for the comment list, allowing you to load comments as needed to keep the page clean and efficient.

To implement the pagination display of comment lists, we mainly use two key template tags:commentListUsed to obtain comment data,paginationUsed to generate pagination navigation.

1. UsecommentListtags to get comment data commentListTags are used to retrieve comment data from the database. To implement pagination, we need totypeparameter settings"page"and specify the number of comments to display per page.limitIn addition,archiveIdThe parameter is required, it specifies which article's comments to retrieve. Usually, you will use this feature on the article detail page, atarchive.Idwhich it will automatically provide the current article's ID.

   The following is a basiccommentListexample of tag usage, 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"Tell the system that we need paginated data.
   • limit="10"Set the number of comments displayed per page to 10.
   • item.Status != 1Used to determine if a comment has passed the review, unreviewed comments can be displayed as "Under review".
   • item.ParentUsed to display the parent comment information of the reply comment, forming a nested comment structure.
   • stampToDateIt is a convenient time formatting function.

2. UsepaginationTag generates pagination navigationObtained the paginated comment data, we still need a pagination navigation to allow users to jump to different comment pages.paginationTags andcommentListTags used together can automatically generate pagination links that match the current page status.

   IncommentListTags{% 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,pagesYespaginationa pagination information object provided by the tag automaticallyshow="5"The maximum number of page buttons displayed is 5. 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 for comments is an effective way to enhance user interaction and encourage quality comments.The like function of Anqi CMS is implemented through asynchronous requests (AJAX) sent by front-end JavaScript to interact with the backend.

1. The HTML structure for liking commentsIn the display area of each comment, we need an clickable element (such as<a>tag), and it should include the number of likes displayed<span>The key is to add a like element fordata-idattribute to store the unique ID of the current comment, so that we know which comment is 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 a like for<a>Label has been addedclass="vote-comment"anddata-comment-id="{{item.Id}}", and a display of the number of likes<span>itsclass="vote-count"will be used for subsequent JavaScript updates.

2. JavaScript implementation for liking commentsThe like function needs to be monitored by JavaScript for click events and send a POST request to the backend. The comment like interface of Anqi CMS 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.

   The following is an example of JavaScript code that uses 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 ||