Auto CMS plays a vital role in content operation by promoting user interaction, which is essential for increasing website activity. The comment function, along with its配套的分页显示 and 点赞 function, undoubtedly serves as 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, specifically under 'Function Management' and 'Content Comment Management'.Here, you can turn on or off the comment feature and configure some basic rules, such as whether to require review and whether to enable captcha.tag-/anqiapi-other/167.htmlIt can effectively prevent spam comments and improve the quality of comment content.

By default, newly submitted comments may need to be reviewed before they are displayed on the front end. In the template, we can base the review status of the comments onStatusField (）for judgment and display, for example, give corresponding prompts for comments under review.

2. Build the template structure of the comment list.

To display the comment list on the article detail page (or other content detail page), we need to use the AnQiCMS providedcommentListTemplate tag. This tag can retrieve comment data for the specified article.

Suppose we are on a document detail page, the ID of the current document can be obtained byarchiveDetailTags, for example{% archiveDetail with name="Id" %}。Then, we can pass this ID tocommentListLabel.

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 are getting the comments of the current article.
  • type="page"It is the key to enabling pagination, it willpaginationprovide the necessary data for tags.
  • limit="10"Set the number of comments displayed per page to 10.
  • We go throughitem.Status == 1to judge whether the comment has passed the review.
  • item.ParentThe object is used to handle the display of reply comments. If it exists, it indicates that the comment is a reply to another comment.
  • stampToDateThe tag is used to format the comment time to make it more readable.

3. Implement the pagination display of the comment list

Due tocommentListwe have set in thetype="page"tags, the system will automatically generate the data required for pagination. Next, we can usepaginationLabels to display pagination navigation.

Following the previous one.commentListCode block, in{% endcommentList %}After that, add pagination code:

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

{# 分页代码 #}
<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 tag will create apagesObject that contains the current page number, total number of pages, link to the first page, link to the last page, link to the previous page, link to the next page, and an array containing the middle page numbers. By iterating over thispagesThe object, we can build a complete and interactive pagination navigation.

4. Implement the like function for comments

The like function usually needs to interact with the backend through JavaScript (AJAX) to achieve a refreshless update of the like count.AnQiCMS provides an API interface for liking comments.

In the comment list, each like button can be added adata-idThe property to store the comment ID,vote-countThe class to display the number of likes:

<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('.