How to retrieve and display the comment list of an article, and support comment pagination functionality?

In Anqi CMS, efficiently managing and displaying article comments is an important aspect of enhancing user engagement and content interaction.As an expert familiar with AnQi CMS operation, I will elaborately explain how to obtain and display the comment list of articles on the website, and support comment pagination functionality, ensuring that your content can attract and retain users.

Enable comment function and backend preparation

Before delving into front-end template development, make sure your security CMS backend is properly configured for comment functionality.Usually, you can find the related settings in the 'Content Comment Management' section under the 'Function Management'.You can enable or disable comments, set whether comments need to be reviewed, and configure anti-spam comment measures (such as captcha).Unreviewed comments (Status=0) are not displayed by default on the front page. Make sure your comments have been reviewed or set to unreview status (Status=1) to display normally.

Retrieve article comment list

AnQi CMS provides through its flexible template tag system,commentListLabels to easily obtain the comment data of articles. This label can be used directly in your article detail page template, which is usually located/template/{您的模板名称}/{模型table}/detail.htmlpath.

You need to provide the article ID for the tag to get the comment list of a specific article. The current article ID can be found through the article detail page.commentListThe article ID can be found in the article detail page.archiveDetailLabels can be easily obtained. For example, you can define a comment list like this:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
      <div>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %}
        <span>回复</span>
        <span>
          {% if item.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>
        {% 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>
    </div>
    {% endfor %}
{% endcommentList %}

In the above code,archiveId=archive.IdSpecified to retrieve the comments of the current article,type="list"Indicates that a simple comment list is retrieved,limit="6"It limited the display of six comments at a time in the loop.itemThe object includes detailed information about the comments, such as.UserName(Name of the commenter),Content(Comment content),CreatedTime(Comment timestamp),Status(review status) as well asParentIf this comment is a reply to another comment, it contains information about the parent comment.stampToDateThe function is used to format a timestamp into a readable date and time.

Implement pagination functionality for the comment list.

When the number of article comments is high, pagination display becomes particularly important, as it not only improves page loading speed but also enhances user experience. In order to implement comment pagination, you need tocommentListlabel'stypethe parameter topage，and cooperatepaginationTags are used together.

First, incommentListSet the number of comments displayed per page (limitparameters), and specifytype="page":

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
    {# 评论内容展示区域，与上文基础列表示例类似 #}
    <div>
      <div>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %}
        <span>回复</span>
        <span>
          {% if item.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>
        {% 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>
    </div>
    {% endfor %}
{% endcommentList %}

Following that, incommentListAfter the tag is closed, usepaginationtags to generate pagination navigation:

<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,pagination pages with show="5"Assign pagination information topagesthe variable, and limit the display of up to 5 page link buttons.pagesThe object contains the total number of comments, total pages, current page, as well as links and status to the first page, last page, previous page, next page, and middle page numbers. Through the looppages.PagesYou can build a complete pagination navigation.

This comment list and pagination module are usually placed in the comment area of the article detail page, or separately.comment/list.htmlin the template file, then through.{% include "comment/list.html" %}The way to introduce it to the article detail page.

Comment submission and interaction enhancement

In addition to displaying comments, providing a comment submission feature is also a key factor in enhancing user interaction. Users can submit comments through a form, the form'sactionusually points to/comment/publish. The form fields includearchive_id(article ID),user_name(Name of the commenter),content(Comment content) and optionalparent_id(Used for reply function).

In addition, you can implement the like function for comments using JavaScript. Each comment'sVoteCountThe field stores the number of likes, you can set a click event, and send a POST request to the path using AJAX./comment/praisewith the comment ID to increase the number of likes.

<!-- 评论提交表单示例 -->
<form method="post" action="/comment/publish">
  <input type="hidden" name="return" value="html"> {# 可选，指定返回格式为html或json #}
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <div>
    <label for="user_name">您的昵称</label>
    <input type="text" id="user_name" name="user_name" required placeholder="请填写您的昵称" autocomplete="off">
  </div>
  <div>
    <label for="comment_content">评论内容</label>
    <textarea id="comment_content" name="content" required rows="5"></textarea>
  </div>
  <!-- 如果后台开启了验证码，这里需要添加验证码模块，参考tag-/anqiapi-other/167.html -->
  <div>
    <button type="submit">提交评论</button>
    <button type="reset">重置</button>
  </div>
</form>

Summary

By following these steps, you can flexibly obtain, display the article comment list, and support pagination functions in AnQi CMS.This not only makes your website content more attractive, but also effectively promotes interaction among users, thus enhancing the overall activity of the website.Always remember to check if the background cache has been updated after making any template modifications, and clear the browser cache to ensure that the changes take effect.

Frequently Asked Questions

Q1: Why can't I see the comments on the article detail page, even though I have already posted a comment?

A1:This is usually due to the review status of the comments. Please log in to the AnQi CMS backend, go to 'Function Management' under 'Content Comment Management', and check if the new comments you posted are in the 'pending review' status (Status=0).'If comments need to be reviewed, you need to manually approve them (update their status to Status=1), or set comments to unreviewed in the comment settings on the backend