How to display the user comment list on the article detail page?

User comments are an indispensable part of the website content ecosystem. They not only effectively enhance the interactivity of content, increase user engagement, but also bring a wealth of UGC (User Generated Content) to the website, helping with SEO optimization and fostering a community atmosphere.AnQiCMS as a powerful content management system fully considers this need and provides a flexible and efficient way to integrate the user comment list into your article detail page.

Next, we will explore how to easily display and manage user comment lists on the article detail page in AnQiCMS.

Step 1: Make sure the comment feature is ready and prepare the template file

Before we begin, we need to confirm that the comment feature of the AnQiCMS backend is active.Although AnQiCMS supports the comment feature by default, but for practice, you can visit the "Function Management" menu in the background to find the "Content Comment Management" option.This is the center where you manage all comments uniformly.At the same time, if you want to add a captcha to the comment form to prevent spam comments, you can enable the 'Leave a comment captcha' feature under 'Content Settings' in 'Backend Settings', which will provide support for subsequent form integration.

The template file for the article detail page is usually located in your theme directory, the path is similar totemplate/{您的模板目录}/{模型table}/detail.htmlFor example, if your article belongs to the "article model", then the file may betemplate/default/article/detail.html. Open this file and we will add the code to display the comment list.

Step two: Integrate the comment list on the article detail page

In your article detail page template, we can make use of the AnQiCMS providedcommentListThe tag can be used to retrieve and display comment data. This tag is very flexible and can help us pull comments from specific articles, and supports regular list display or pagination display.

First, you need to know the unique identifier (ID) of the current article. This ID is usually provided througharchiveDetailtags automatically, which can be used directlyarchive.Idto refer to.

The following is usedcommentListTags display the basic structure of the comment list:

"`twig {# Assuming the article ID has been obtained through archive.Id #}

<h2>用户评论</h2>
{% commentList comments with archiveId=archive.Id type="list" limit="10" %}
    {% for item in comments %}
        <div class="comment-item">
            <div class="comment-header">
                <span class="user-name">
                    {% if item.Status != 1 %}
                        {# 评论状态为非1表示审核中，可以显示“审核中”或隐藏部分信息 #}
                        审核中：{{ item.UserName|truncatechars:6 }}
                    {% else %}
                        {{ item.UserName }}
                    {% endif %}
                </span>
                {% if item.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="blockquote-parent">