How to embed a comment list in a page and control its display pagination?

In website operation, user interaction is the key to enhancing site activity and content value.AnQiCMS provides a set of intuitive and powerful features that help us easily embed comment functionality in pages and flexibly control the display of comment lists, especially its pagination management, which is crucial for pages with a large number of user comments.

Enable comment functionality to make the content come alive

Firstly, to allow users to post comments, we need to ensure that the comment feature on the backend is enabled.Once the comment feature is activated, we can integrate the comment list into the page template where we want to display comments.The comment list usually appears at the bottom of content pages such as article details, product details, and other content pages.

In AnQiCMS template system, the display of comment lists mainly depends oncommentListLabel.This tag allows us to flexibly call and display comment data according to different needs.For example, to display comments on a document detail page (such as an article or product), we usually need to know the unique identifier ID of the current document.archiveDetailOnce the tag has obtained document information, the document ID can be obtained througharchive.Idto get.

An example of a basic comment list code structure may look like this:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
        <span>{{item.UserName}}</span>
        <span>{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
        {% if item.Parent %}
            <p>回复 {{item.Parent.UserName}}：</p>
            <blockquote>{{item.Parent.Content}}</blockquote>
        {% endif %}
        <p>{{item.Content}}</p>
        {% if item.Status != 1 %}
            <p style="color: gray;">评论待审核</p>
        {% endif %}
        {# 这里还可以添加点赞、回复等操作按钮 #}
    </div>
    {% else %}
    <p>暂无评论，快来发表您的看法吧！</p>
    {% endfor %}
{% endcommentList %}

In the above code,commentListTagged througharchiveId=archive.IdSpecify which document's comments to retrieve.type="list"Indicates that it is displayed in a list format,limit="6"Then limited the number of comments displayed per page. We traversedcommentsan object, displaying each commenter's username, posting time, and comment content. Specifically, by judgingitem.ParentWhether it exists, we can elegantly handle the display of replies to comments, as well asitem.Statusdetermine whether the comment has passed the review.

Of course, a comment list is essential, and a comment form submitted to the AnQiCMS preset comment release interface is also indispensable./comment/publishThe form must includearchive_id(Document ID),user_name(Commenter nickname) andcontent(Comment content) etc., you can also add according to actual needsparent_idUsed to reply to specific comments.

To implement comment list pagination and optimize user experience

When the number of comments on the page gradually increases, without pagination, the page will become very long, load slowly, and users will also find it difficult to browse historical comments.AnQiCMS provides a simple way to add pagination control to the comment list, thereby significantly improving user experience and page performance.

To enable pagination for the comment list, we need tocommentListput in the tagtypeparameter settings"page", rather than the default"list". For example:

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# ... 评论列表内容，与上方示例类似 ... #}
{% endcommentList %}

Herelimit="10"It is no longer just a matter of limiting the number of displayed items, but specifying the number of comments to be displayed per page.

NextcommentListIntroduce tags, we need topaginationtags to generate pagination navigation.paginationThe label will read the previoustype="page"list label (in this case it iscommentList) and generate pagination data accordingly, and render the page number links.

The following is a complete example that integrates a comment list and pagination navigation.

Get the current document ID to ensure that comments are associated with the correct document

{# 评论分页导航 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %}
        <ul>
            {# 首页链接 #}
            <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>

{# 评论提交表单 #}
<div class="comment-form">
    <h4>发表评论</h4>
    <form method="post" action="/comment/publish">
        <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
        <input type="hidden" name="return" value="html"> {# 可选，指定后端返回HTML或JSON #}
        {# 这里可以添加 CAPTCHA 验证码的隐藏字段和图片刷新JS，参考