How to display comments of the `commentList` tag

In website operation, article comments are an indispensable part to enhance user interaction and activate the community atmosphere. AnQiCMS (AnQiCMS) provides us with a powerful and flexible comment management function, by cleverly usingcommentListTags, we can easily display article comments on the front end of the website.

This article will delve deeper intocommentListVarious features of the tag and their actual application in the template, helping you create a highly interactive and user-friendly comment section.

Core tags:commentListOverview

In AnQi CMS,commentListTags are the core tools used to retrieve and display the comment list of specific articles.It allows us to flexibly control the source, sorting, number, and even whether to display pagination of comments.No matter if you want to display comments at the bottom of the article detail page, or build an independent comments page,commentListAll of them can meet your needs.

commentListThe basic usage form of the tag is as follows:

{% commentList comments with archiveId="文章ID" type="page|list" %}
    {# 循环输出评论内容 #}
{% endcommentList %}

Here, commentsIs the variable name you specified for the comment list you obtained, you can loop through this variable within the tag to access the specific information of each comment.

Parameter Details: Fine Control of Comment Display

To better control the display of comments,commentListThe tag provides several important parameters:

1. archiveId: Specify the article to which the comment belongsThis parameter is crucial, it tells the system which article's comments you want to retrieve. In most cases, on the article detail page, you canarchive.IdDynamically obtain the current article ID. For example:archiveId=archive.IdIf you do not specifyarchiveIdThe system will try to obtain the document ID of the current page by default.

2. type: Select list display mode

   • type="list": When you want to display all comments (or a specified number of comments) without pagination, choose this mode.
   • type="page": If you need to paginate comments, such as showing 10 per page, then select this mode. It works with Anqicms pagination tags.pagination, you can build a complete pagination navigation.

3. order: Define the comment sorting methodYou can control the display order of comments through this parameter:

   • order="id desc": Default value, sorts comments in descending order by comment ID, usually meaning the latest comments are at the top.
   • order="id asc": Comments are sorted in ascending order by comment ID, which usually means the oldest comments are at the top.

4. limit: Limits the number of comments displayed.This parameter is used to set the number of comments you want to display.

   • If you want to display a specified number of comments, for examplelimit="10".
   • It also supportsoffset,limitpatterns, such aslimit="2,10"It means starting from the 3rd comment and displaying 10 comments.

5. siteId: Comment call in a multi-site environmentFor users of the AnQi CMS deployed on multiple sites, if you need to call the comment data of other sites, you cansiteIdThe parameter specifies the ID of the target site. This parameter is usually not set in a single-site environment.

Comment data field: learn about the available information.

commentListTags retrieved from comments.commentsA variable is an array object, eachitemrepresents a comment, and includes the following important field information:

• Id: The unique ID of the comment.
• ArchiveId: The ID of the article the comment belongs to.
• UserName: The nickname or name of the comment user.
• UserId: The ID of the comment user (if the user is logged in).
• Ip: The IP address of the comment user.
• VoteCount: The number of likes the comment has received.
• Content: The specific content of the comment.Please note that when displaying HTML content submitted by users, to prevent HTML escaping from causing tags to be displayed as plain text, it may be necessary to use|safeFilter, for example{{item.Content|safe}}. But also be alert to potential security risks and ensure that the content has been strictly filtered.
• ParentId: If this is a reply, it points to the ID of the parent comment.
• Status: Review status of the comment.Status = 1Indicates that the comment has been reviewed and displayed.Status = 0Indicates that the comment is being reviewed and should not usually be displayed on the front end.
• Parent: If there is a parent comment, this field will contain the complete data object of the parent comment, with the same structure as the current comment.itemfor easy display of the reply relationship.
• CreatedTime: The timestamp of the comment, you can usestampToDatetags to format it, for example{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}.

Two common ways to display comments:

After understanding the label parameters and comment data structure, let's take a look at how to display comments in the front-end template.

1. Display of conventional comment list

When you want to list all comments (or a specified number) on a single page without pagination, you can usetype="list":

{# 假设我们正在文章详情页，archive.Id 可用 #}
<div class="comments-section">
    <h3>读者评论</h3>
    {% commentList comments with archiveId=archive.Id type="list" limit="5" %}
        {% for item in comments %}
            {# 仅显示已审核通过的评论，或根据业务需求显示审核中的占位符 #}
            {% if item.Status == 1 %}
                <div class="comment-item">
                    <div class="comment-meta">
                        <strong>{{item.UserName}}</strong>
                        于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}
                        {% if item.Parent %}
                            回复 <strong>{{item.Parent.UserName}}</strong>
                        {% endif %}
                    </div>
                    <div class="comment-content">
                        {{item.Content|safe}} {# 使用|safe避免HTML转义，请确保内容已通过后端安全过滤 #}
                    </div>
                    <div class="comment-actions">
                        <a href="#" class="praise-btn" data-id="{{item.Id}}">赞 ({{item.VoteCount}})</a>
                        <a href="#" class="reply-btn" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
                    </div>
                </div>
            {% elif item.Status == 0 %}
                 <div class="comment-item comment-pending">
                     <p>您的评论正在审核中，审核通过后将显示。</p>
                 </div>
            {% endif %}
        {% empty %}
            <p class="no-comments">暂无评论，快来发表您的看法吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

2. Paginated comment list display

For articles with a large number of comments, pagination can greatly improve page loading speed and user experience. At this time, it is necessary totype="page"and combinepaginationTags:

`twig {# Assuming we are on the article detail page, archive.Id is available #}

<h3>读者评论</h3>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
        {% if item.Status == 1 %}
            <div class="comment-item">
                <div class="comment-meta">
                    <strong>{{item.UserName}}</strong>
                    于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}
                    {% if item.Parent %}
                        回复 <strong>{{item.Parent.UserName}}</strong>
                    {% endif %}
                </div>
                <div class="comment-content">
                    {{item.Content|safe}}
                </div>
                <div class="comment-actions">
                    <a href="#" class="praise-btn" data-id="{{item.Id}}">赞 ({{item.VoteCount}})</a>
                    <a href="#" class="reply-btn" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
                </div>
            </div>
        {% endif %}
    {% empty %}
        <p class="no-comments">暂无评论，快来发表您的看法吧！</p>
    {% endfor %}
{% endcommentList %}

{# 分页导航 #}