How to display user comment lists and implement pagination in AnQiCMS?

In website content operation, user comments are an important part of enhancing interaction and activity, and reasonable pagination processing can ensure that the comment list is both complete and loads smoothly.AnQiCMS provides powerful and flexible template tags, allowing you to easily display and manage user comments on the front-end page and implement pagination functions for the comment list.

The foundation of displaying user comment lists:commentListTag

To display user comments on the AnQi CMS page, we mainly usecommentListThe tag can help you get comments data for specific articles or products. It's like a comment data extractor, which you can configure according to your needs.

When you use it in the templatecommentListWhen labeling, you can first specify a variable name, such ascomments, so that you can refer to this variable later when displaying comments in a loop. A typical usage starts like this:{% commentList comments with archiveId=archive.Id type="list" limit="6" %}.

Here inside thearchiveIdThe parameter is crucial, it tells the system which article or product comments you want to retrieve. Typically, this value is dynamically obtained from the ID of the current document, such asarchive.Id.typeThe parameter defines the display method of the comment list,"list"The mode will return a specified number of comments,"page"and the mode will prepare for pagination.limitThe parameter is used to control how many comments are displayed per page or each time.

Each comment entry contains a series of useful information, such as:

• Id: The unique identifier of the comment.
• UserName: The name of the commentor.
• Content: The specific content of the comment.
• CreatedTime: The time the comment was posted, it is a timestamp, you can combinestampToDatetags to format the display, for example{{stampToDate(item.CreatedTime, "2006-01-02")}}.
• Parent: If this comment is a reply to another comment, thenParentThe field will contain detailed information about the parent comment, which is crucial for building multi-level comment replies.
• Status: The review status of the comment, usually1Indicates that the review has passed, other values may indicate that the review is in progress or not passed, you can decide whether to display the comment content based on this status.
• VoteCountThe number of likes on a comment, which can be used to show the popularity of the comment.

This is an example of a basic comment list display, it retrieves comments from the current document, displays the first 6, and handles the review status and reply relationship:

{# 列表展示评论，默认type="list" #}
<div>
{% 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")}}</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 %}
</div>

CombinepaginationTag implements comment list pagination

When there are a lot of comments, loading all comments at once will affect page performance and user experience.This is when it is necessary to introduce pagination.commentListlabel'stypethe parameter to"page"then cooperate withpaginationTag it and it is.

WhencommentListoftypeis set to"page"After that, it will return an object containing the comment data and pagination information of the current pagepagesThe data structure of the object is. ThispagesThe object is.paginationLabel input.

paginationLabels allow you to flexibly control the display style of pagination links. The most commonly used parameter isshowwhich is used to control how many pagination buttons are displayed on the page, for exampleshow="5"Displays the maximum of 5 page numbers around the current page.

pagesThe object provides the following key information to help you build a complete pagination navigation:

• TotalItems: Total number of comments.
• TotalPages: Total number of pages.
• CurrentPage: The current page number.
• FirstPage/LastPage/PrevPage/NextPage: Represent the links and statuses of home, end, previous, and next pages, which also containLink(link address) andIsCurrent(whether it is the current page) and other fields.
• PagesAn array containing all the middle page numbers, you can iterate through this array to display the number pages.

Below is a complete comment list display code with pagination functionality.

{# 启用分页模式的评论列表 #}
<div>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %} {# type="page" 启用分页 #}
    {% 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")}}</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 %}
</div>

{# 分页导航区域 #}
<div class="pagination-area">
    {% pagination pages with show="5" %} {# show="5" 表示最多显示5个页码按钮 #}
    <ul>
        <li>总数：{{pages.TotalItems}}条，共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
            <li class="page-item">
                <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            </li>
        {% endif %}
        {# 中间数字页码 #}
        {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
        {# 下一页链接 #}
        {% if pages.NextPage %}
            <li class="page-item">
                <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            </li>
        {% endif %}
        {# 末页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    {% endpagination %}
</div>

Comment submission and interaction

In addition to displaying comments, Anqi CMS also supports users submitting comments through a form. The comment form'sactionattribute should point to/comment/publish. When submitting, it needs to includearchive_id(article ID),user_name(Commenter nickname) andcontent(Comment content). If you need to implement a reply feature, you also need to includeparent_ida field, the value of which is the ID of the commented comment. In addition, you canreturnThe specified backend return format ishtmlorjson.

For example, a basic comment submission form might look like this:

<form method="post" action="/comment/publish">
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <input type="hidden" name="return" value="html"> {# 可以设置为json，如果需要JS处理返回 #}
  <div>
    <label for="user_name">您的昵称</label>
    <input type="text" id="user_name" name="user_name" required placeholder="请填写您的昵称">
  </div>
  <div>
    <label for="comment-content">评论内容</label>
    <textarea id="comment-content" name="content" rows="5" required placeholder="请留下您的宝贵评论..."></textarea>
  </div>
  {# 如果是回复评论，这里会动态添加一个hidden input #}
  <input type="hidden" name="parent_id" value=""> 
  <button type="submit">提交评论</button>
</form>

In addition, Anqi CMS also provides a comment like feature, by pointing to/comment/praiseAddress POST CommentidYou can implement likes, which usually requires JavaScript to be completed. To enhance the security of comments, you can also enable comment captcha functionality in the background and add the corresponding captcha display and input box in the front-end template, which will be used.tag-/anqiapi-other/167.htmlDetailed introduction inapi/captchainterface.

With the above tags and features, you can comprehensively build an interactive and user-friendly comment system on the Anqi CMS website.

Frequently Asked Questions (FAQ)

Q1: How to add a captcha to the comment form to prevent spam comments?

A1:The AnQi CMS supports the integration of captcha functionality when comments are submitted.You first need to find the relevant settings in the "Function Management" on the backend, enable comment captcha.tag-/anqiapi-other/167.htmlAdd a guide to the document, onecaptcha_idHidden field, onecaptchaa text input box and a display for the captcha image<img>a label with a JavaScript code snippet to/api/captchafetch and refresh the captcha image from the interface.

Q2: Does Anqigroup CMS support the display of multi-level comment replies?

A2:Yes, Anqigroup CMS natively supports the display of multi-level comment replies. IncommentListeach comment obtained by the tagitemIn the object, if this comment is a reply to another comment, thenitem.Parentthe field will contain the complete information of the parent comment. You can determine by judgingitem.ParentDoes it exist to judge whether the current comment is a reply and pass it through the templateitem.Parent.UserName/item.Parent.Contentto construct the reply reference with these fields, thus achieving the visual presentation of multi-level comments.

**Q3: After commenting submission, how does the front-end know whether the comment needs to be reviewed or has