How to use the AnQiCMS `commentList` tag to display comments on the frontend page?

As an experienced website operations expert, I know that an active website cannot do without user interaction, and the comment function is an important manifestation of user participation.In AnQiCMS (AnQiCMS), integrating and displaying comments is not a difficult thing.commentListTag, elegantly present comments on your website's front-end page, thereby enhancing user engagement and content vitality.

Handle it easily: using AnQiCMS'scommentListTag display comments on the front end

On a vibrant website, the voice of the user is a valuable asset.Regardless of whether it is an opinion on an article or a sharing of experience with a product, comments can greatly enrich the dimension of content and promote communication and interaction among users.commentListTag makes it easy to display front-end comments.

UnderstandingcommentListThe core role of tags

commentListTags are a core component of the AnQiCMS template engine, responsible for retrieving specific article or product comment data from the database and passing it in a structured manner to the front-end page.This means you don't need to write complex backend code, just call this tag in the template file to easily get and render the comment content.

When you want to display comments related to the current content in places like article detail pages or product detail pages,commentListTags have become your powerful assistant. It can filter, sort, and paginate comments based on your specified parameters, ensuring the accuracy and loading efficiency of the page content.

commentListBasic usage and key parameters of the tag

To usecommentListThe tag is usually called on the details page of the document (article or product), as it needs a clear document ID to know which comments it should retrieve. The following is its basic structure:

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论内容将在这里循环展示 #}
{% endcommentList %}

In this code block:

• commentsThis is the variable name we specify for the comment dataset, you can name it according to your habit.
• archiveId=archive.IdIndicates the document ID associated with the comment. Usually, on articles or product detail pages,archive.IdIt automatically retrieves the document ID of the current page, allowing the tags to automatically associate with the correct content. If you want to retrieve comments for a specific ID, you can also directly pass in such a fixed value.archiveId="1"such a fixed value.
• type="page"Indicate that we want to display comments in a paginated form. AnQiCMS will combine this setting withlimitparameters to automatically handle pagination logic. If the number of comments is not many, you can also usetype="list"List all comments (or a limited number) at once.
• limit="10"Then, the number of comments displayed per page is set, here it is 10 comments per page.

In addition to these basic parameters,commentListIt also supports:

• order: Control the sorting method of comments. For example,order="id desc"Indicates sorting comments by ID in descending order (newest comments first).
• siteId: If you have enabled the AnQiCMS multi-site management feature and want to call comment data from other sites, you can specify this parameter.But for most single-site scenarios, it is usually not necessary to set.

Detailed comments: available data fields

BycommentListTags retrieved from comments.commentsA collection, in the loop, eachitem(Single comment) contains rich field information, for you to flexibly display on the front end:

• Id: The unique identifier ID of the comment.
• ArchiveId: The ID of the document the comment belongs to.
• UserName: The username of the commentor.
• UserId: The user ID of the commentor (if the commentor is a registered user).
• Ip: The IP address of the commentor (usually not displayed on the front end for privacy and security reasons).
• VoteCount: The number of likes on the comment.
• Content: The actual text content of the comment.
• ParentId: If this is a reply, it points to the ID of the parent comment.
• Status: The review status of the comment.1Means it has passed the review,0Under review. This is a very important field, often used to control the visibility of comments.
• Parent: If presentParentIdThis field will contain the complete data object of the parent comment, which is convenient for displaying the reply relationship.
• CreatedTime: The creation timestamp of the comment. Usually it needs to be combined with AnQiCMS'sstampToDateLabel formatting to display as a readable date and time.

Handle nested comments (replies) and pagination display.

In modern websites, comment sections often support reply functions, forming nested structures. AnQiCMS cleverly supports this feature. When a comment is a reply,commentListTag throughParentthe field supports this point.item.ParentIt will include all the information of the replied comment. We can utilize{% if item.Parent %}such conditional judgments to render the reply content.

In addition, to avoid too many comments causing the page to be long and load slowly, pagination is indispensable. WhencommentListoftypeis set to"page"you also need to cooperate with AnQiCMS'spaginationtags to generate pagination navigation:

{% pagination pages with show="5" %}
    {# 分页链接的渲染逻辑 #}
{% endpagination %}

paginationTags will providepages.TotalItems(Total number of comments),pages.TotalPages(Total number of pages),pages.CurrentPage(Current page number) as well aspages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPage/pages.Pages(Middle page number list) and other objects, allowing you to easily build a complete pagination navigation.

A complete comment display example

Let us integrate the above concepts and see an actual code snippet of a comment display that covers comment list, replies, review status judgment, and pagination logic:

`twig

<h3>用户评论 ({{pages.TotalItems}} 条)</h3> {# 显示总评论数 #}

{% commentList comments with archiveId=archive.Id type="page" limit="5" order="id desc" %}
    {% for item in comments %}
        <div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
            <div class="comment-header">
                <span class="user-name">
                    {% if item.Status != 1 %}
                        {# 如果评论正在审核中，可以显示匿名或部分用户名 #}
                        审核中：{{item.UserName|truncatechars:6}}...
                    {% else %}
                        {{item.UserName}}
                    {% endif %}
                </span>
                {% if item.Parent %}
                    <span class="reply-indicator">回复</span>
                    <span class="replied-to-user">
                        {% if item.Parent.Status != 1 %}
                            审核中：{{item.Parent.UserName|truncatechars:6}}...
                        {% else %}
                            {{item.Parent.UserName}}
                        {% endif %}
                    </span>
                {% endif %}
                <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
            </div>
            <div class="comment-content">
                {% if item.Parent and item.Parent.Status != 1 %}
                    <blockquote class="reply-blockquote">
                        <p>被回复内容审核中，暂不显示。</p>
                    </blockquote>
                {% elif item.Parent %}
                    <blockquote class="reply-blockquote">
                        <p>{{item.Parent.Content|truncatechars:100}}</p>
                    </blockquote>
                {% endif %}

                {% if item.Status != 1 %}
                    <p class="moderation-notice">您的评论正在审核中，通过后将显示。</p>
                {% else %}
                    <p>{{item.Content}}</p>
                {% endif %}
            </div>
            <div class="comment-actions">
                <a href="javascript:;" class="like-button" data-comment-id="{{item.Id}}">赞 ({{item.VoteCount}})</a>
                <a href="javascript:;" class="reply-button" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
            </div>
        </div>
    {% empty %}
        <p>暂无评论，快来发表您的看法吧！</p>
    {% endfor %}
{% endcommentList %}

{# 分页导航区域 #}