How to implement pagination and like function in AnQiCMS comment list?

The Anqi CMS is an important part in content operation, where user interaction is a key factor in enhancing website activity. The comment function and its配套的分页显示 and like function are undoubtedly the key to achieving this goal.Benefiting from the flexible template engine and rich built-in tags of AnQiCMS, we can relatively easily add these features to the articles or products of the website.

1. Basic enable and configuration of comment function

Firstly, make sure that the website's comment feature is enabled.This is usually set in the AnQiCMS backend management interface, located under 'Function Management' and 'Content Comment Management'.Here, you can turn on or off the comment function and configure some basic rules, such as whether to need review, whether to enable captcha, etc.Enable captcha (referencetag-/anqiapi-other/167.htmlIt can effectively prevent spam comments and improve the quality of comments.

By default, newly submitted comments may require review before they are displayed on the front end. In the template, we can display the status of comments based on their review (StatusField) for judgment and display, for example, give the corresponding prompt for comments under review.

2. Build the template structure of the comment list.

We need to use AnQiCMS provided to display the comment list on the article detail page (or other content detail page)commentListTemplate tag. This tag can retrieve the comment data of a specified article.

Assuming we are on a document detail page, the current document ID can be accessed througharchiveDetailtag, for example{% archiveDetail with name="Id" %}Then, we can pass this ID tocommentList.

Here is a basic template code snippet for a comment list, which will iterate and display comments:

{# 获取当前文章的ID，以便加载其评论 #}
{% archiveDetail archiveId with name="Id" %}

<div class="comment-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=archiveId type="page" limit="10" %}
        {% for item in comments %}
            {% if item.Status == 1 %} {# 仅显示已审核通过的评论 #}
                <div class="comment-item" data-comment-id="{{ item.Id }}">
                    <div class="comment-header">
                        <span class="username">{{ item.UserName }}</span>
                        {% if item.Parent %}
                            <span class="reply-to">回复 <span class="parent-username">{{ item.Parent.UserName }}</span></span>
                        {% endif %}
                        <span class="timestamp">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                    </div>
                    <div class="comment-content">
                        {% if item.Parent %}
                            <blockquote class="reply-quote">
                                {{ item.Parent.Content|truncatechars:100 }}
                            </blockquote>
                        {% endif %}
                        <p>{{ item.Content }}</p>
                    </div>
                    <div class="comment-actions">
                        <a href="javascript:;" class="like-btn" data-id="{{ item.Id }}">
                            赞 (<span class="vote-count">{{ item.VoteCount }}</span>)
                        </a>
                        <a href="javascript:;" class="reply-btn" data-id="{{ item.Id }}" data-user="{{ item.UserName }}">回复</a>
                    </div>
                </div>
            {% else %}
                {# 如果评论正在审核中，可以给出提示 #}
                <div class="comment-item pending-review">
                    <div class="comment-header">
                        <span class="username">{{ item.UserName }}</span>
                        <span class="timestamp">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                    </div>
                    <div class="comment-content">
                        <p>您的评论正在审核中，审核通过后将显示。</p>
                    </div>
                </div>
            {% endif %}
        {% empty %}
            <p class="no-comments">暂无评论，快来发表你的看法吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

In the above code:

• archiveIdThe parameter ensures that we get the comments of the current article.
• type="page"It is the key to enabling pagination, it will providepaginationthe necessary data for the tag.
• limit="10"Set to display 10 comments per page.
• We passitem.Status == 1To determine whether the comment has passed the review.
• item.ParentThe object is used to handle the display of reply comments, and if it exists, it indicates that the comment is a reply to another comment.
• stampToDateTags are used to format the comment time to make it more readable.

3. Implement pagination display of the comment list

Due to the fact that incommentListwe set in the tag.type="page"The system will automatically generate the data required for pagination. Next, we can usepaginationtags to display the pagination navigation.

Following thecommentListcode block, in{% endcommentList %}add the pagination code after:

{# ... 前面是评论列表显示代码 ... #}

{# 分页代码 #}
<div class="pagination-container">
    {% pagination pages with show="5" %} {# show="5" 表示最多显示5个页码按钮 #}
        <ul>
            {% if pages.FirstPage.Link %} {# 首页 #}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
                </li>
            {% endif %}

            {% if pages.PrevPage %} {# 上一页 #}
                <li class="page-item">
                    <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
                </li>
            {% endif %}

            {% for pageItem in pages.Pages %} {# 中间页码 #}
                <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                    <a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
                </li>
            {% endfor %}

            {% if pages.NextPage %} {# 下一页 #}
                <li class="page-item">
                    <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
                </li>
            {% endif %}

            {% if pages.LastPage.Link %} {# 尾页 #}
                <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                    <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
                </li>
            {% endif %}
        </ul>
    {% endpagination %}
</div>

paginationThe label will create onepagesAn object that contains the current page number, total number of pages, home link, end link, previous page link, next page link, and an array containing the middle page numbers. By traversing thispagesWe can build a complete and interactive pagination navigation.

4. Implement the comment like function

The like function usually requires interaction with the backend through JavaScript (AJAX) to achieve an unrefreshed update of the like count.AnQiCMS provides a comment liking API interface.

Each like button can be added in the comment list.data-idProperties to store the comment ID,vote-countClass to display the like count:

<a href="javascript:;" class="like-btn" data-id="{{ item.Id }}">
    赞 (<span class="vote-count">{{ item.VoteCount }}</span>)
</a>

Then, you can write JavaScript code to handle click events and API requests. Here is an example using jQuery:

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

// 处理点赞按钮点击事件
$('.comment-actions .like-btn').on('click', function(e) {
    e.preventDefault();
    const $this = $(this);
    const commentId = $this.data('id');
    const $voteCountSpan = $this.find('.