In website content operation, the comment section is undoubtedly an important manifestation of user interaction and content depth.A well-designed, clear presentation of comments list, which not only significantly improves the browsing experience of users, but also effectively stimulates the activity of the community.AnQiCMS powerful template system provides us with flexible tools, allowing us to easily achieve a structured display of comment content, commenters, reply objects, and publishing time.

Understanding the core elements of the comment list

To build a comment list that is both aesthetically pleasing and practical, we need to ensure that several core pieces of information are conveyed to each visitor in a clear and accurate manner:

  • Comment content:This is the most direct reflection of a user's thoughts and opinions, the core of the comments section.
  • Username:Identify the identity of the commentor, and establish an interactive atmosphere.
  • Reply to:When a comment is a reply to another comment, clearly indicating 'Reply to who' helps users understand the context of the conversation.
  • Post Time:Display the comment posting time, allowing users to understand the timeliness of the information and the sequence of comments.

The template tag system of AnQiCMS, especiallycommentListTags, which can help us accurately obtain and organize these comment data.

UtilizecommentListtags to get comment data

commentListLabels are the core to retrieve comment data.It returns a collection of comment objects, which we can iterate over to display each comment individually.

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论列表的展示逻辑将在这里展开 #}
{% endcommentList %}

In this code,archive.IdUsually used to specify the unique identifier of the current page article, ensuring that the comments obtained are targeted at this article.type="page"Indicate the system to provide us with paginated data, andlimit="10"then set the number of comments displayed per page to 10.commentsis the variable name we define for the array of comments obtained.

An in-depth analysis of the key information of the comment object

IncommentListIn the loop of tags, each iteration of theitemvariable represents an independent comment data. ThisitemThe object carries all the information we need:

  • Comment content (item.Content):This directly corresponds to the user's input text in the review. To ensure the correct rendering and safety of the content, we usually cooperate withsafeFilter orrenderfilters.
  • Username (item.UserName):Display the nickname or identifier of the commentor directly.
  • Publish time (item.CreatedTime):This is a Unix timestamp. To present it in a user-friendly date and time format, we need to utilizestampToDateLabel formatting.
  • a reply object (item.Parent):This is a clever design of the AnQiCMS comment system. If the current comment is a reply to another comment,item.ParentThis will be an object that includes the complete information of the replied comment. By simply checkingitem.ParentWhether it exists, we can judge whether this comment is a reply and further obtain the username of the replied comment (item.Parent.UserName) and content (item.Parent.Content).

Build a clear comment display structure: practical examples

Now, let's combine this information to create a comment display template that is both intuitive and user-friendly. Here is a practical example that considers the different display needs of regular comments and reply comments, and includes review status judgment and content truncation processing.

`twig

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
        <div class="comment-item">
            <div class="comment-meta">
                <span class="user-name">
                    {# 根据评论状态显示用户名,如果未审核则提示 #}
                    {% if item.Status != 1 %}
                        <span class="status-pending">审核中:</span>{{item.UserName|truncatechars:6}}
                    {% else %}
                        {{item.UserName}}
                    {% endif %}
                </span>

                {# 如果是回复评论,