How to display the user message or article comment list and handle the review status?

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

Understand comment and message management in Anqi CMS

AnQi CMS provides users with convenient content comment and website message management functions.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 centrally managed.

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 environment for the website.
• Export message data for convenient subsequent processing and analysis.

The design of AnQi CMS considers the security and compliance of website content, therefore, the management backend is the first line of defense in controlling user interactive content.

Display comments or messages list on the front-end page

We need to use the specific tags provided by Anqicms in the template file to display user comments or messages on the website front-end. The core iscommentListLabel; Although the document mainly introduces the construction of the message form for website messages, the display logic of the list is usually similar to that of the comment list, which is usually realized by looping data.

Display article comment list

Suppose we want to display the comment list on the article detail page. First, you need to, for example, in the template file,comment/list.html(This is the AnQi CMS agreed comment list page template), or directly in the article detail page template, introducecommentList.

commentListTags are the key to obtaining comment data. They allow 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 obtaining the current article (byarchive.Ididentifier) comments.type="page"It means you want to display pageslimit="10"Then set 10 comments to be displayed per page.

IncommentListWithin the loop of the tag, you can accessitemVariables to access 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: The time the comment was posted, it needs to usestampToDatetags to format the display, for example{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}.
• item.Status: The review status of the comment, 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.

Processing review status

item.StatusThe value of the field determines how comments are displayed:

• WhenStatus = 1means that the comment has passed the review and can be displayed normally.
• WhenStatus = 0When this occurs, it indicates that the comment is being reviewed. In this case, you can choose not to display this comment, or show a 'Comment is being reviewed' prompt to inform the user.

Combine the above fields and the review status, we can construct the display logic of the 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>

Display comments with pagination

WhencommentListlabel'stypethe parameter to"page"at that time, it will be withpaginationTag collaboration works, providing pagination functionality. You can add pagination navigation below the comment list:

<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 displays a list, the template tags and display logic are similar to the comment list, you may need to define a similar tag or implement it through a custom query.In most cases, website comments are more for collecting information, mainly for backend management viewing, and are not directly displayed in the full list on the front end.If you need to display, you may need to go througharchiveListOr a custom tag to retrieve specific content and manually construct the display logic.

Users submit comments or messages

Users typically submit comments or messages through an HTML form on the front end. 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) and other fields. If replying to a specific comment, you also need toparent_id.
• Message submission:Submit to/guestbook.htmlInterface. The form fields will be determined according to the custom fields you set in the background "Website Messages", usually includinguser_name/contact(Contact information),content(Message content) and so on.
• Like and comment:If you want users to be able to like and comment, you can send a POST request to/comment/praisesubmit comments through theid.

After submission, comments or messages will go into the background to wait for processing, and their review status (Status) Set to 0 (pending review), wait for the administrator to review and approve it in the background, itsStatusthen it will become 1 and finally display on the front page.

Frequently Asked Questions (FAQ)

1. How to set whether comments and messages need to be reviewed?The AnQi CMS allows you to flexibly configure the review strategy for comments and messages.Usually, you can find the related options in the "Function Management" or "Content Settings" module, such as settings like "default comment status" or "whether messages need to be reviewed" and so on.You can choose to display comments/leave messages directly after posting, or you need to be reviewed by a human before they can be displayed.

2. Why didn't my comment appear on the website immediately?This is likely because the website has enabled comment/post review mechanism.Your comment will be submitted first to the background management system and wait for the website administrator to review.Only after the administrator reviews, comments onStatusfield will become 1, thereby displaying on the front page. You can contact the website administrator for the specific review process.

3. How to display multi-level replies in the comment list (i.e., users reply to other users' comments)?IncommentListIn the loop of tags, each comment dataitemincludes oneitem.Parentfield. Ifitem.ParentIf not empty, it indicates that the current comment is directed atitem.Parenta reply to this comment. You can checkitem.Parentits existence and displayitem.Parent.UserNameanditem.Parent.ContentBuild the display structure of multi-level replies, just like shown in the code example above.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.