In website operation, user messages and article comments are an important part of promoting interaction and enhancing content value.For users of the Aanqi CMS, it is crucial to display these user-generated contents reasonably and manage their review status effectively to ensure the quality of the website content and user experience.We will discuss in detail how to achieve this goal in the security CMS.

Understand the comment and message management in Anqi CMS

AutoCMS provides users with convenient content comment and website message management features.In the background management interface, you can find the 'Content Comments' and 'Website Messages' modules through the 'Function Management' menu.This is the place where all user submitted comments and messages are managed centrally.

As a website administrator, you can:

  • View all comments and messages submitted by users.
  • Review comments and messages to decide whether they should be displayed on the front page.
  • Delete inappropriate content to maintain a healthy website environment.
  • Export message data for easy subsequent processing and analysis.

The design of Anqi CMS takes into account the security and compliance of website content, therefore, the management backend is the first line of defense for you to control user interactive content.

Display comments or messages list on the front-end page

To display user comments or messages on the website front-end, we need to use the specific tags provided by Anqi CMS in the template files. For article comments, the core iscommentListLabel; For website comments, although the document mainly introduces the construction of the comment form, the display logic of the list is usually similar to the comment list, both of which are implemented through loops.

Show article comment list

Suppose we want to display the comment list on the article detail page. First, you need to add it to the template file, for examplecomment/list.htmlThis is the comment list page template agreed upon by Anqi CMS, or you can directly introduce it in the article detail page templatecommentListLabel.

commentListTags are the key to obtaining comment data. It allows you to filter and sort comments as needed, with basic usage as follows:

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论循环体 #}
{% endcommentList %}

HerearchiveId=archive.Idrepresents getting the comments of the current articlearchive.Idmarked by the identifier).type="page"It means that you want to display the list in pages.limit="10"It sets 10 comments to be displayed per page.

IncommentListInside the loop of tags, you can useitemAccess the details of each comment. Some common fields include:

  • item.Id: The unique identifier of the comment.
  • item.UserName: The nickname of the comment user.
  • item.Content: The specific content of the comment.
  • item.CreatedTime: Comment posting time, needs to be usedstampToDateTag formatting display, for example{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}.
  • item.Status: Comment review status, this is the core field for handling review status.
  • item.Parent: If this is a reply comment,Parentthe field will contain the complete data of the replied comment, you can use it to build the nested reply structure of the comment.

handle review status

item.StatusThe value of the field determines the display method of the comments:

  • WhenStatus = 1means that the comments have passed the review and can be displayed normally.
  • WhenStatus = 0When it is [auto], it means the comment is under review. In this case, you can choose not to display this comment, or display a 'Comment is under review' notice to inform the user.

Combining the above fields and review status, we can build the display logic for a comment list:

<div class="comment-section">
    {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
        {% for item in comments %}
            <div>
                <div>
                    {# 显示评论用户名，如果未审核则显示“审核中”提示 #}
                    <span>
                        {% if item.Status != 1 %}
                            审核中：{{item.UserName|truncatechars:6}}
                        {% else %}
                            {{item.UserName}}
                        {% endif %}
                    </span>

                    {# 处理回复关系 #}
                    {% if item.Parent %}
                        <span>回复</span>
                        <span>
                            {% if item.Parent.Status != 1 %}
                                审核中：{{item.Parent.UserName|truncatechars:6}}
                            {% else %}
                                {{item.Parent.UserName}}
                            {% endif %}
                        </span>
                    {% endif %}

                    {# 显示评论时间 #}
                    <span>{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
                </div>

                <div>
                    {# 显示被回复评论的内容 #}
                    {% if item.Parent %}
                        <blockquote>
                            {% if item.Parent.Status != 1 %}
                                该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
                            {% else %}
                                {{item.Parent.Content|truncatechars:100}}
                            {% endif %}
                        </blockquote>
                    {% endif %}

                    {# 显示当前评论的内容，如果未审核则显示提示 #}
                    {% if item.Status != 1 %}
                        该评论正在审核中，请耐心等待。
                    {% else %}
                        {{item.Content}}
                    {% endif %}
                </div>

                {# 评论点赞和回复按钮 (如果需要) #}
                <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
                    <a href="javascript:;" class="praise-btn">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
                    <a href="javascript:;" class="reply-btn">回复</a>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <p>暂无评论，快来发表您的看法吧！</p>
    {% endcommentList %}
</div>

Paginated display of comments

WhencommentListTagstypeparameter settings"page"it will be withpaginationLabel collaboration, providing pagination functionality. Below the comment list, you can add pagination navigation:

<div class="pagination-section">
    {% pagination pages with show="5" %}
        <a href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        <a href="{{pages.LastPage.Link}}">尾页</a>
    {% endpagination %}
</div>

Display the website message list

For website messages, if the background configuration shows a list, the template tag and display logic are similar to the comment list. You may need to define a similar tag or implement it through a custom query.But in most cases, website comments are more used for collecting information, mainly for backend management to view, and the front-end does not directly display the complete list.archiveListOr customize a label to get specific message content and manually build the display logic.

Users submit comments or messages

Users typically complete comments or messages on the front end through an HTML form. The Anqi CMS provides the corresponding backend interface to receive this data.

  • Comment submission:Submit to/comment/publishInterface. The form must includearchive_id(Article ID),user_name(User nickname),content(Comment content) fields, etc. If replying to a specific comment, you also need toparent_id.
  • submit a message:Submit to/guestbook.htmlInterface. The form fields will be determined by the custom fields you set in the "Website Message" on the backend, usually includinguser_name/contact(Contact Information),content(message content) and so on.
  • Like comments:If you want users to be able to like and comment, you can send a POST request to/comment/praisesubmit comments via the interfaceid.

After submission, comments or messages will enter the background for processing, and their review status (Status）Default is 0 (under review), waiting for the administrator to approve it in the background.StatusThen it will become 1 and finally be displayed on the front page.

Common Questions (FAQ)

  1. How to set whether comments and messages need to be reviewed?The AutoCMS allows you to flexibly configure the review strategy for comments and messages.通常，You can usually find related options in the "Feature Management" or "Content SettingsYou can choose to display comments/leave messages immediately after posting, or you need to have them reviewed by人工 before they can be displayed.

  2. Why is my comment not immediately displayed on the website?This is likely because the website has enabled comment/leave message review mechanism.Your comment will be submitted and then it will be sent to the backend management system for review by the website administrator.StatusThe field will become 1, thus being displayed on the front page. You can contact the website administrator to learn about the specific review process.

  3. How to display multi-level replies (i.e., users reply to other users' comments) in the comment list?IncommentListIn the loop of tags, each comment dataitemincludes oneitem.Parentfields. Ifitem.ParentNot empty indicates that the current comment is directed atitem.ParentThis comment's reply. You can check theitem.Parentpresence and displayitem.Parent.UserNameanditem.Parent.ContentBuild the display structure of multi-level replies, as shown in the above code example.If you need a more complex tree-like reply structure, you may need to use JavaScript on the front end to further process the comment data.