How to retrieve and display a list of comments for an article, and support comment pagination functionality?

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

Enable comment function and backend preparation

Before delving into front-end template development, ensure that your security CMS backend has configured the comment feature correctly. Usually, you can find the related settings in the "Function Management" section under "Content Comment Management".Here you can enable or disable comments, set whether comments require moderation, and configure anti-spam measures for comments (such as captcha).Comments pending review (Status=0) will not be displayed on the front end by default. Make sure your comments have been reviewed or set to auto-review status (Status=1) to display normally.

Get article comment list

The Auto CMS providescommentListLabels to conveniently retrieve the comment data of articles. This label can be used directly in your article detail page template, usually located in/template/{您的模板名称}/{模型table}/detail.htmldirectory.

To get the comment list of a specific article, you need to provide the article ID forcommentListthe tag. The article ID for the current article can be found on the article detail page.archiveDetailLabeling is easy to obtain. 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 obtain comments of the current article,type="list"Means to get a simple comment list,limit="6"Then limited to displaying six comments each time. In the loop,itemThe object includes detailed information about the comments, such asUserName(Commenter name),Content(The comment content),CreatedTime(Timestamp),Status(Review status) as well asParent(If this comment is a reply to another comment, it includes the information of the parent comment).stampToDateThe function is used to format timestamps into readable date and time.

Implement comment list pagination feature

When the number of article comments is high, pagination becomes particularly important, as it not only improves page loading speed but also enhances user experience. To implement comment pagination, you need tocommentListTagstypeparameter settingspage, and cooperate withpaginationtags to be used.

Firstly,commentListSet the number of comments displayed per page in English.limitParameters), and specify.type="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 %}

Immediately following,commentListAfter the tag closure, usepaginationtags to generate page 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 to the.pagesvariable, and limit the maximum number of page links displayed to 5.pagesThe object includes the total number of comments, total pages, current page, and links and states 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 section of the article detail page, or separately.comment/list.htmlin the template file, and then through{% include "comment/list.html" %}The method is introduced to the article detail page.

Comment submission and interaction enhancement.

In addition to displaying comments, providing a comment submission feature is also a key to 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(Commenter name),content(Comment content) and optional.parent_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 to send a POST request to the path with the comment ID to increase the number of likes./comment/praiseThe path sends a POST request to increase the number of likes by carrying the comment ID.

<!-- 评论提交表单示例 -->
<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 features in the security CMS.This not only makes your website content more attractive, but also effectively promotes interaction among users, thereby enhancing the overall activity of the website.Always remember to check if the background cache has been updated and clear the browser cache after making any template modifications to ensure the changes take effect.

Frequently Asked Questions

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

A1:This is usually due to the review status of comments.Please log in to the AnQi CMS backend, go to "Content Comment Management" under "Function Management