How to get and display the comments made by users on the content for the comment list label `commentList`?

In today's digital world, websites are not just platforms for displaying information, but also spaces for user interaction and communication.When users are able to express their opinions and raise questions about the content, the vitality of the website will be greatly enhanced.AnQi CMS understands this point, therefore it provides a powerful and flexible comment management function, including the "comment list tag"commentListIt is the key bridge connecting content and user feedback.

Imagine that you have published an engaging article or an innovative product, and users can't wait to share their thoughts after reading it.As a website operator, you naturally want these valuable comments to be presented clearly and in order below the content.AnQi CMS'scommentListTags were born for this, allowing you to easily obtain and display user comments on your website content, making interaction accessible.

Deep understandingcommentListTag

commentListThe tag is a core feature provided by the Anqi CMS template engine, which mainly serves to retrieve and display all comments related to specific content (such as articles, products).Whether it is necessary to display the latest comments, hot comments, or add a comment section to the content detail page, this tag can meet your needs.

To usecommentListYou usually introduce it in the content detail template (such as the article detail pagearchive/detail.html). Its basic structure is as follows, you will assign the obtained comment data to a variable (such ascommentsThen, by looping through this variable, each comment is displayed one by one:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {# 在这里，您将循环输出每条评论的详细信息 #}
{% endcommentList %}

In this code block,archive.IdIt usually represents the content ID of the current page,type="list"Means to get comments in a list form,limit="6"It limited the display of six comments each time.

Flexible control over the acquisition and display of comments.

commentListTags provide various parameters, allowing you to finely control the way comments are acquired:

• archiveIdThis is the most important parameter, it specifies the content ID of the comments you want to retrieve. For example,archiveId="1"Will retrieve all comments for the content with ID 1. If you do not specify this parameter on the content detail page (such as the article detail page), AnQi CMS will intelligently automatically retrieve the content ID of the current page, which is very convenient.
• typeDetermines the display style of the comment list. When set to"list"When, the tag will return the specified number of comments; whereas set to"page"It will return a comment list containing pagination information, which you can combinepaginationtag to achieve the pagination display of comments.
• limitUsed to control the number of comments obtained each time. For example,limit="10"The latest 10 comments will be displayed. If you need more advanced offset control, you can use"2,10"This format indicates that 10 comments starting from the second one are to be retrieved.
• order: Defines the sorting method of comments. You can choose."id desc"(Sorted by ID in reverse order, usually the latest comments are at the top) or"id asc"(Sorted by ID in ascending order, oldest comments first).
• siteIdIf you have enabled the multi-site management feature of Anqi CMS and want to call comment data from other sites, you can specify the site ID through this parameter.

Detailed fields of comment data

Upon passingcommentListAfter obtaining the comment data, you can access various fields of each comment in the loop to build the comment display area.itemVariable (infor item in commentsdefined) will carry the details of each comment:

• Id: The unique ID of the comment.
• ArchiveId: The ID of the content to which the comment belongs.
• UserName: The name of the user who posted the comment.
• Content: The specific content of the comment.
• ParentId: If this is a reply comment, this field will store the ID of the parent comment.
• ParentThis is a very practical field, it directly contains the complete data object of the superior comment.This allows you to easily build multi-level conversation threads, known as 'building up' comments.
• Status: Review status of the comment.1It usually means the review has been approved and displayed,0It means the review is in progress. When displaying comments, you should decide whether to show the comment content based on this status.
• VoteCountThe number of likes on comments, which can be used to implement the comment liking function.
• CreatedTimeThe posting time of comments (timestamp format). You need to combinestampToDateThe filter formats it into a readable date and time.

For example, display the username, content, and time of the comment:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
      <div>
        <span>{{item.UserName}}</span>
        <span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 评论道：</span>
      </div>
      <div>
        {% if item.Status == 1 %}
          {{item.Content}}
        {% else %}
          该内容正在审核中。
        {% endif %}
      </div>
    </div>
    {% endfor %}
{% endcommentList %}

Build a paged comment list

When your content has a large number of comments, pagination becomes very necessary. It willcommentListoftypethe parameter to"page"Then, combined with Anqi CMS'spaginationtags, you can easily achieve an elegant pagination effect.

First, incommentListRetrieve pagination data:

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论列表内容 #}
{% endcommentList %}

Then, incommentListUse below the tag,paginationRender pagination navigation with the tag:

<div>
    {% pagination pages with show="5" %}
        {# 渲染分页链接，如首页、上一页、数字页码、下一页、尾页等 #}
        <ul>
            <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
            <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
            {# ...其他分页链接... #}
        </ul>
    {% endpagination %}
</div>

In this way, users can easily browse all comments without feeling stuck due to too much content on a single page.

Comment submission and interaction

In addition to displaying comments, Anqi CMS also provides convenient interfaces for handling user submitted comments and likes:

• Submit CommentYou can create an HTML form and submit itactionPoint to/comment/publish. The form must includearchive_idContent ID,user_name(Username),content(Comment content), if you want to implement a reply function, you can also addparent_idField. To prevent spam comments, it is recommended to enable comment captcha in the background and integrate captcha display in the form (refertag-/anqiapi-other/167.htmlto the instructions).
• Comment Liking: Anqi CMS allows you to direct/comment/praiseAddress to send POST requests to implement comment liking. You need to pass the comment'sidAs an argument. Typically, this is done asynchronously using JavaScript to provide a smooth user experience.

Summary

commentListTags are an indispensable part of Anqi CMS content operation, helping you build an active and orderly comment interaction area on your website with its concise syntax and powerful functions.From basic comment display to complex pagination and hierarchical replies, to the submission and liking of comments, Anqi CMS provides a clear implementation path, allowing your content to truly resonate with users.

Frequently Asked Questions (FAQ)

1. How to ensure the quality of comment content and prevent spam?

The AnQi CMS provides a comment review mechanism and captcha feature to help you manage comment quality. You can determine whether a comment has been approved by checking theStatusfield in the comment data (Status = 1indicate pass).In the template,you can use it according toStatusField to decide whether to directly display comments or show the prompt "Content is under review". In addition, enable comment captcha in the background "Function Management" and integrate the captcha code into the comment submission form (refer totag-/anqiapi-other/167.htmlDocuments), it can effectively prevent automated spam comments.

2. Can I display reply comments in the comment list to form a conversation thread?

Of course you can.commentListThe tag returns a comment data that includes oneParentfield. If the current comment is a reply to another comment,ParentThe field will contain the complete data of its parent comment. You can check it in the template loopitem.ParentIf it exists, then it can be nested or referenced as<blockquote>The way to display the information of the superior comment in a list format, thus creating a direct dialogue thread effect. When the comment is submitted, the form containsparent_idfield is the basis for the reply function.

3. How to adjust the display quantity or sorting of the comment list?

You can use it tocommentListlabel'slimitandorderParameters can be used to flexibly adjust the display quantity and sorting method of comments. For example,limit="15"15 comments will be displayed each time, andorder="id desc"Comments will be sorted in reverse order by comment ID, which usually means that the most recently posted comments will be displayed at the top.If you need a more complex sorting, such as sorting by likes, you may need to refer to more documents or carry out secondary development.