The comment feature is an indispensable part of the website's content and user interaction, it can not only enliven the atmosphere of the website, but also provide valuable user feedback for operators.Anqi CMS understands its importance and provides a flexible and feature-rich comment system, allowing website administrators to easily display and manage user comments, while supporting hierarchical replies and review status differentiation to ensure the interactivity and quality of website content.

AnQi CMS comment feature overview

In Anqi CMS, to display the comment list of website content, it mainly relies on its powerful template tag system. The core highlight of the comment feature is:

  1. Flexible comment list display: Comments can be retrieved and displayed using the ID of the article or product.
  2. Supports multi-level replies: Users can reply to other comments, forming a clear conversation chain to enhance community interaction.
  3. Distinguish review status: The comment content can be set to require review, and after the administrator approves it from the background, it will be displayed on the front end, effectively ensuring the quality of the content.
  4. Comment paginationWhen the number of comments is high, the system supports automatic pagination to improve page loading speed and user experience.

Next, we will discuss step by step how to implement these features in the template.

Core Implementation: Template invocation for comment list

To display the comment list on the front-end page, we mainly usecommentListTemplate tag. This tag allows us to retrieve comment data based on a specific content ID.

1. Get the current content ID.

Generally, the comment list is displayed on the article or product detail page. First, we need to obtain the article or product ID corresponding to the current page. This can be done byarchiveDetailLabel implementation is easy, it can obtain detailed information about the current document, including its ID:

{% archiveDetail archiveInfo with name="Id" %}
{# 此时 archiveInfo 变量中存储了当前内容的ID #}

2. Call the comment list and enable pagination

After obtaining the content ID, we can usecommentListTag to get comment data. To better manage and display comments, we can choose to enable pagination: 

{% commentList comments with archiveId=archiveInfo type="page" limit="10" %}
    {# 评论列表的循环展示内容将在这里 #}
{% endcommentList %}

Here:

  • commentsIt is the variable name we define for comment data, which will be used in the loop.
  • archiveId=archiveInfoPass the current article ID to the comment tag to tell the system which content's comments to retrieve.
  • type="page"Tell the system what pagination list we need for comments.
  • limit="10"Then set 10 comments to be displayed per page.

3. Loop to display the comment content.

commentsA variable is an array containing comment objects. We can usefora loop to iterate and display the details of each comment.itemRepresents the current comment object being cycled through, which includes fields such as comment ID, username, content, creation time, review status, and a series of other fields.

"twig {% for item in comments %}"

<div class="comment-item">
    {# 显示评论者的用户名 #}
    <span class="comment-author">{{item.UserName}}</span>