In AnQi CMS, allowing users to comment on articles and clearly displaying these comments is an important aspect in enhancing the interactivity and user engagement of the website.AnQiCMS powerful template engine and built-in features make this process both flexible and efficient.This article will introduce in detail how to integrate the comment list and its related features on the article detail page.

Understanding the comment mechanism and template structure of AnQi CMS

The AnQi CMS is equipped with a comprehensive comment management feature, which supports users in submitting comments on article pages and in managing them centrally in the backend.To display these comments on the front-end page, it mainly involves editing the website template.

In AnQi CMS, the article detail page usually corresponds to the template directory under{模型table}/detail.html(or in flat mode){模型table}_detail.html) File. All modules related to article content display, as well as related comments, previous and next articles, etc., 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 specified articles from the database and render it on the page.

Second, display the comment list on the article detail page

To display comments on the article detail page, you need to use the AnQiCMS providedcommentListLabel. This label 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 directly accessed througharchive.IdbecausearchiveVariables usually represent the detailed data of the current article.

2. UsecommentListtags to get comment data

We can call it like thiscommentListtags 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: Variable name defined for the comment list.
  • archiveId=archive.Id: Specify to get comments of the current article (ID is)archive.Id).
  • type="list"The colon indicates getting a fixed number of items in a list, rather than a paged list. If you want the comment list to be paged, please settypeset"page".
  • limit="10"Each page (or each display) shows 10 comments.
  • order="id desc"：Comments are sorted in descending order by comment ID, so the latest comments are displayed at the top.
  • {% for item in comments %}：Iterate through the obtained comment data.
  • item.Status：The review status of the comments.1Indicates that the review has passed. Other values may indicate that the review is in progress or not passed. For the sake of user experience, we usually only display reviews that have passed the review or provide a hint for reviews that are in progress.
  • item.ParentIf this comment is a reply to another comment,item.Parentit will include details of the replied comment, which helps to build the style of nested comments.
  • {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}: UsestampToDateThe filter converts timestamps into a readable date and time format.
  • {{item.Content|safe}}: Display comment content.Important reminder:User submitted comments may contain HTML tags.To prevent XSS attacks, AnQiCMS defaults to escaping output.