In Anqi CMS, allowing users to comment on articles and clearly displaying these comments is an important link to enhance the interactivity and user engagement of the website.AnQiCMS has a powerful template engine and built-in features that make this process flexible and efficient.This article will provide a detailed introduction on how to integrate the comment list and its related features on the article detail page.

1. Understand the comment mechanism and template structure of Anqi CMS

The AnQi CMS is built with a comprehensive comment management feature, supporting users to submit comments on article pages and manage them uniformly in the background.These comments need to be displayed on the front-end page, mainly involving the editing of the website template.

In AnQiCMS, the article detail page usually corresponds to the template directory under{模型table}/detail.html(or the flat mode under{模型table}_detail.html）file. All modules related to article content display, as well as comments related to the article, and previous/next articles, will be called and laid out in this template file.

Core ideaIt utilizes the template tags provided by AnQiCMS to dynamically retrieve the comment data of a specified article from the database and render it on the page.

Second, display comments list on the article detail page

To display comments on the article detail page, you need to use the provided by AnQiCMScommentListThe tag is specifically used to retrieve the comment list or comment pagination list of a document.

Firstly, make sure you are editing the template file of the article detail page (for example,template/default/article/detail.html)

1. Get the current article ID

commentListThe tag needs to know which article's comment it is. On the article detail page, the current article's ID can be accessed directly througharchive.IdbecausearchiveVariables usually represent the detailed data of the current article.

2. UsecommentListTag to get comment data

We can call it like thiscommentListTag to get comment data:

{% commentList comments with archiveId=archive.Id type="list" limit="10" order="id desc" %}
    {# 这里的 `comments` 是一个数组，包含了当前文章的评论数据 #}
    {% for item in comments %}
    <div class="comment-item">
        <div class="comment-header">
            <span class="username">
                {% if item.Status != 1 %}
                {# 评论状态为0表示审核中，可以做匿名处理或提示 #}
                审核中：{{item.UserName|truncatechars:6}}
                {% else %}
                {{item.UserName}}
                {% endif %}
            </span>
            {% if item.Parent %}
            {# 如果是回复某条评论，会存在Parent对象 #}
            <span class="reply-to">回复 {{item.Parent.UserName}}</span>
            {% endif %}
            <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
        </div>
        <div class="comment-content">
            {% if item.Parent %}
            <blockquote class="reply-quote">
                {% if item.Parent.Status != 1 %}
                原评论审核中：{{item.Parent.Content|truncatechars:100}}
                {% else %}
                {{item.Parent.Content|truncatechars:100}}
                {% endif %}
            </blockquote>
            {% endif %}

            {% if item.Status != 1 %}
            该内容正在审核中，稍后可见。
            {% else %}
            {{item.Content|safe}} {# 注意这里使用 |safe 过滤器，以防评论内容包含HTML #}
            {% endif %}
        </div>
        <div class="comment-actions">
            <a class="praise-btn" data-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
            <a class="reply-btn" data-id="{{item.Id}}" data-user="{{item.UserName}}">回复</a>
        </div>
    </div>
    {% endfor %}
{% empty %}
    <p>暂无评论，快来发表您的看法吧！</p>
{% endcommentList %}

Code explanation:

  • comments: The variable name we define for the comment list.
  • archiveId=archive.Id: Specify the retrieval of the current article (ID isarchive.Id) comments.
  • type="list": Indicates that a fixed number of items is to be retrieved instead of a paged list. If you wish to have the comment list paged, please settypeis set to"page".
  • limit="10": Display 10 comments per page (or each display).
  • order="id desc": Sort comments by ID in descending order, so the latest comments are displayed at the top.
  • {% for item in comments %}: Traverse the obtained comment data.
  • item.Status: Review status of the comment.1Means approved, other values may indicate in review or not approved. Usually, only approved comments are displayed for user experience, or a hint is given for comments in review.
  • item.ParentIf this comment is a reply to another comment,item.Parentit will include the details of the replied comment, which helps to build the style of nested comments.
  • {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}: Use.stampToDateThe filter converts timestamps into a readable date and time format.
  • {{item.Content|safe}}: Display the comment content.Important reminder:User submitted comment content may contain HTML tags.To prevent XSS attacks, AnQiCMS defaults to escaping the output.If your comment editor allows users to submit rich text (with HTML tags) and you want these HTML tags to be parsed by the browser, then