In website operation, the user comment feature on the article detail page is a key factor in enhancing user interaction and website activity.AutoCMS (AutoCMS) 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 the Anqi CMS, each article can independently enable the comment function.When the user submits a comment on the article detail page, these comments will be associated with the corresponding article.archive/detail.htmlor custom article detail template) for operation.The AnQi CMS adopts GoLang template engine syntax, similar to Django templates, which uses specific tags to call data and implement logic.

The core idea is:

  • Display comment listUsing built-in comment list tagscommentListTo get related comments, pass the current article ID.
  • Submit comment form：Create an HTML form and submit it to the comment release interface provided by the Anqi CMS.
  • Enhance features：According to the needs, captcha and like comments can be integrated.

2. In the article detail page, display the comment list

To display user comments on the article detail page, you need to usecommentListThis label can help you retrieve the comment data related to the current article and supports pagination.

Firstly, please make sure that your article detail template has correctly obtained the information of the current article. Usually, you can directly get the ID of the current article in the article detail template.archive.IdTo get the current article's ID.

Next, insert the following code at the location 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.IdMake sure that the comment list only displays comments from the current article.
  • type="page"Enable pagination function,limit="10"This means 10 comments are displayed per page.
  • order="id desc": Sorted in reverse order by ID, the latest comments are displayed at the top.
  • item.Status != 1: Comment status judgment,1Indicates that the review has been approved. You can manage and review comments on the backend.
  • item.Parent: is used to handle comment replies, if anyitem.Parentmeans that this is a reply to another comment.
  • stampToDate：is the tag provided by AnQi CMS for formatted timestamp.
  • paginationThe tag is responsible for generating pagination links for the comment list.

3. Implement the comment submission form.

The user needs to submit a form to send the data to the comment release interface of Anqi CMS/comment/publish. To support the reply feature, the form also needs an optionalparent_idfield.

The following is an example of a basic comment submission form:

`twig