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

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

Enable the comment feature to make the content come alive

Firstly, to allow users to post comments, we need to ensure that the backend comment function is enabled.Once the comment feature is activated, we can integrate the comment list into the page template where we want to display comments.Generally, comment lists appear at the bottom of content pages such as article detail pages, product detail pages, and so on.

In the AnQiCMS template system, the display of the comment list mainly depends oncommentListThe tag allows us to flexibly call and display comment data according to different needs.For example, to display comments on a document (such as an article or product) detail page, we usually need to know the unique identifier ID of the current document.Assuming our document detail page has passedarchiveDetailthe tag obtained the document information, then the document ID can be accessed througharchive.IdGet it.

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 code above,commentListTag througharchiveId=archive.IdSpecifies which document's comments to retrieve.type="list"Means displayed in list form,limit="6"It limited the number of comments displayed per page. We traversedcommentsobjects, displaying each comment author's username, posting time, and comment content. Particularly, through the judgmentitem.ParentWhether it exists, we can elegantly handle the display of reply comments, as well asitem.Statusdetermine whether the comment has passed the review.

Of course, having a comment list is essential for the form where users post comments. Usually, we create a form that submits to the preset comment release interface of AnQiCMS./comment/publish. The form must includearchive_id(Document ID),user_name(nickname of the commenter) andcontent(comment content) and other fields, according to actual needs, you can also addparent_idused to reply to a specific comment.

To implement pagination of the comment list, optimize the user experience

When the number of comments on the page increases gradually, without pagination functionality, 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 tag.typethe parameter to"page"Instead of the default,"list". For example:

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

Herelimit="10"It is no longer just a simple limit on the number of displayed comments, but specifies the number of comments per page.

ThencommentListtags, we need to introducepaginationtags to generate pagination navigation.paginationThe label will read the previoustype="page"list label (in this case iscommentList) generates pagination data, and according to this renders page number links.

This is a complete example that integrates a comment list and pagination navigation:

”`twig {# Get the current document ID to ensure that comments are associated with the correct document #} {% archiveDetail archiveInfo with name=“Id” %}

{# 评论分页导航 #}
<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，参考