How to display the user comment list on the article detail page and support

In website operation, the user comment feature on the article detail page is a key to enhancing user interaction and website activity.AnQiCMS (AnQiCMS) provides powerful and flexible comment management capabilities, allowing you to easily display comment lists on article detail pages and support user comment submissions, even further enhancing comment functions.

1. Preparation: Understand the comment mechanism and template structure

In AnQi CMS, each article can independently enable the comment function.When a user submits a comment on the article detail page, these comments will be associated with the corresponding article.To implement the display and submission of comments, we mainly do it in the article detail page template (usually archive/detail.htmlOr perform operations in a custom article detail template) . Anqi CMS uses GoLang template engine syntax, similar to Django templates, to call data and implement logic through specific tags.

The core idea is:

• Display comment list: Use the built-in comment list tagcommentListTo get related comments, pass the ID of the current article.
• Submit comment form：Create an HTML form and submit it to the comment release interface provided by AnQi CMS.
• Enhance functionality：According to requirements, you can integrate captcha, like comments, and more.

2. Display the comment list on the article detail page

To display user comments on the article detail page, you need to usecommentListLabel. This label can help you get the comment data associated with the current article and supports pagination display.

First, make sure that your article detail template has correctly obtained the information of the current article. In the article detail template, you can usually directlyarchive.Idretrieve the ID of the current article.

Next, insert the following code at the position where you want to display the comment list:

{# 确保您已经获取了当前文章的ID，例如这里假设当前文章对象为 archive #}
<div class="comments-section">
    <h3>用户评论 ({{ archive.CommentCount }}条)</h3>
    {% commentList comments with archiveId=archive.Id type="page" limit="10" order="id desc" %}
        {% for item in comments %}
        <div class="comment-item">
            <div class="comment-meta">
                <span class="comment-author">
                    {% if item.Status != 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="reply-quote">
                    {% if item.Parent.Status != 1 %}
                    该评论内容正在审核中...
                    {% else %}
                    {{ item.Parent.Content|truncatechars:100 }}
                    {% endif %}
                </blockquote>
                {% endif %}
                {% if item.Status != 1 %}
                <p>该评论内容正在审核中，请耐心等待。</p>
                {% else %}
                <p>{{ item.Content }}</p>
                {% endif %}
            </div>
            <div class="comment-actions">
                <a class="item vote-comment" data-id="{{ item.Id }}">
                    赞 (<span class="vote-count">{{ item.VoteCount }}</span>)
                </a>
                <a class="item reply-comment" data-id="{{ item.Id }}" data-user="{{ item.UserName }}">回复</a>
            </div>
        </div>
        {% empty %}
        <p class="no-comments">还没有评论，快来发表您的看法吧！</p>
        {% endfor %}
    {% endcommentList %}

    {# 评论分页显示 #}
    {% pagination pages with show="5" %}
    <div class="comment-pagination">
        {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}" class="prev-page">上一页</a>{% endif %}
        {% for page_item in pages.Pages %}
            <a href="{{ page_item.Link }}" class="page-number {% if page_item.IsCurrent %}current{% endif %}">{{ page_item.Name }}</a>
        {% endfor %}
        {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}" class="next-page">下一页</a>{% endif %}
    </div>
    {% endpagination %}
</div>

In this code:

• archiveId=archive.Id: Make sure that the comment list only displays the comments of the current article.
• type="page": Enable pagination,limit="10"It means 10 comments are displayed per page.
• order="id desc": Sorted in descending order by ID, the latest comments are displayed at the top.
• item.Status != 1: Comment status judgment,1Means the review has been approved. You can manage and review comments in the background.
• item.Parent: is used to handle comment replies if anyitem.Parentmeans it is a reply to another comment.
• stampToDateThe colon is a label provided by AnqCMS for formatting timestamp.
• paginationThe label is responsible for generating pagination links for the comment list.

3. Implement the comment submission form.

A form is needed for users to submit comments and send the data to the Anqi CMS comment publishing interface/comment/publish. To support the reply function, an optionalparent_idfield.

This is an example of a basic comment submission form:

`twig <div class="comment-form"