How to display comment content and user status in the AnQiCMS comment list tag `commentList`?

Building an interactive website in AnQiCMS, the comment function is undoubtedly the key to increasing user participation.commentListTags are a powerful tool provided by AnQiCMS, which can help website developers and operators flexibly display comment content and clearly present the status of commenters, allowing visitors to grasp the dynamics of the comment section at a glance.

Core Function Overview:commentListBasic Usage of Tags

commentListTags are mainly used to obtain the comment list of a specified document and support pagination display. Its basic structure is usually like this:

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

Here,commentsThis is the variable name defined for the comment list data we have obtained, you can name it as needed.archiveId=archive.IdSpecifies which article (or product) comments to retrieve, here is thearchive.IdIt is usually automatically obtained the ID of the current article on the article detail page.type="page"Indicates that we want to display comments in a paginated form, if pagination is not needed,type="list".limit="10"Then it controls the number of comments displayed per page.

With such settings, we can retrieve comment data from the database and prepare for subsequent display.

Comprehensive display of comment content:itemVariable Explanation

commentListthe tags you getcommentsA variable is an array object, with each array element representing a comment. We usually iterate over these comments in a{% for item in comments %}loop.itemObjects all contain rich comment information, such as:

• Id: The unique identifier ID of the comment.
• UserName: The nickname of the commentor.
• Content: The actual text content of the comment.
• CreatedTimeComment timestamp, usually needs to be converted{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}to a readable date and time using such formatting functions.
• StatusComment review status. This is a very important field, usually1Means the review has been approved and displayed.0Means pending review.
• ParentIdandParentObject: If the current comment is a reply to another comment,ParentIdit will record the ID of the parent comment andParentThe object will include the complete information of the parent comment, which is convenient for displaying multi-level comment replies.
• VoteCount: The number of likes received by the comment.

Master these fields, and we can build flexible and diverse comment display effects in the template.

Distinguish comment status: Make it clear to users at a glance

In the comment display, it is very important to clearly inform users whether a comment has been approved, which is crucial for the operation of the website and the user experience. Utilizeitem.StatusWe can easily achieve this.

For example, a reminder 'Under review' can be displayed next to the name of the reviewer, or only part of the comment or a placeholder can be shown when the comment content does not pass the review.

<div>
    <span>
        {% if item.Status != 1 %}
            <span style="color: gray;">[审核中]</span> {{item.UserName|truncatechars:6}}
        {% else %}
            {{item.UserName}}
        {% endif %}
    </span>
    <span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 说：</span>
    <div>
        {% if item.Status != 1 %}
            <p style="color: gray;">您的评论正在审核中，请耐心等待。</p>
        {% else %}
            <p>{{item.Content}}</p>
        {% endif %}
    </div>
</div>

By making such a condition judgment, it respects the privacy of the commenters while clearly informing other visitors of the status of the current comment, enhancing the transparency and interactivity of the page.

Implement comment reply and like interaction

Display of comment replies

AnQiCMScommentListTagged throughitem.ParentThe object perfectly supports comment reply functionality. Whenitem.ParentWhen present, it means that the current comment is a reply to another comment.We can display the content of the parent comment in a nested or referenced manner, thus constructing a clear conversation structure.

<div>
    {# 当前评论者的信息 #}
    <span>{{item.UserName}}</span>
    <span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 说：</span>

    {# 如果是回复，显示父评论内容 #}
    {% if item.Parent %}
        <blockquote style="background-color: #f0f0f0; padding: 10px; margin-left: 20px; border-left: 3px solid #ccc;">
            <p>回复 @{{ item.Parent.UserName }}：</p>
            {% if item.Parent.Status != 1 %}
                <p style="color: gray;">[原评论正在审核中]</p>
            {% else %}
                <p>{{ item.Parent.Content|truncatechars:100 }}</p> {# 截取父评论内容避免过长 #}
            {% endif %}
        </blockquote>
    {% endif %}

    {# 当前评论内容 #}
    <p>{{item.Content}}</p>
</div>

Implementation of comment like feature

item.VoteCountThe field directly displays the number of likes for the comment. To implement the like function itself, it usually requires JavaScript on the frontend to interact with the AnQiCMS provided/comment/praiseInteract with the API. When the user clicks the like button, JS sends a POST request to the API with the comment'sidAfter the API is processed successfully, the frontend updatesVoteCountDisplay.

<div class="comment-actions">
    <a href="javascript:;" class="like-button" data-comment-id="{{item.Id}}">
        赞 (<span class="vote-count">{{item.VoteCount}}</span>)
    </a>
    <a href="javascript:;" class="reply-button" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
</div>

(Front-end JavaScript code will listen).like-buttonfor the click event, sendPOSTrequests to/comment/praise, and update according to the returned resultsvote-countElement.)

Pagination control for comment lists.

For articles with a large number of comments, pagination display is essential. WhencommentListTagstypeparameter settingspageit coordinates withpaginationtags to provide complete pagination functionality.

{# 评论列表循环... #}

{# 分页部分 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
        <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}">上一页</a>
        {% endif %}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}">下一页</a>
        {% endif %}
        <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
    {% endpagination %}
</div>

So, users can conveniently navigate between different comment pages and browse all comments.

Integration and submission of the comment form

Finally, in order for users to be able to post comments, an comment form needs to be integrated. This form is usually submitted to the AnQiCMS provided/comment/publishInterface. The form needs to include some hidden fields and user input fields:

`twig

<input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}"> {# 当前文章ID #}
<input type="hidden" name="parent_id" id="parent-comment-id" value=""> {# 如果是回复，这里会填入父评论ID #}
<input type="hidden" name="return" value="html"> {# 期望后端返回html，也可选json #}

<div class