How can you clearly display the user's comment content, username, reply object, and posting time in the comment list?
In website content operation, the comment section is undoubtedly an important manifestation of user interaction and content depth.A well-designed, clear information presentation comment list that can not only significantly improve the user's browsing experience, but also effectively stimulate the vitality of the community.AnQiCMS's powerful template system provides us with flexible tools, allowing us to easily achieve the organization of comment content, commenters, reply objects, and posting time.
Understanding the core elements of the comment list
To build a visually appealing and practical comment list, we need to ensure that the following core information can be conveyed to each visitor in a straightforward and accurate manner:
- Comment content:This is the most direct reflection of a user's thoughts and opinions, which is the core of the comment section.
- Username:Identify the identity of the commenter, build an interactive atmosphere.
- Reply to object:When a comment is a response to another comment, clearly indicating 'who the reply is to' helps users understand the context of the conversation.
- Published time:Display the time when comments were posted, 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.
UtilizecommentListTag to get comment data
commentListThe tag is the core to get comment data. It returns a collection of comment objects, which we can iterate over to display each comment one by one.For example, to get all comments of the current article and perform pagination, you can use it like this:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 评论列表的展示逻辑将在这里展开 #}
{% endcommentList %}
In this code block,archive.Id Usually used to specify the unique identifier of the current page article, ensuring that the comments obtained are targeted at this article.type="page"Direct the system to provide pagination data for us, andlimit="10"then sets the display of 10 comments per page.commentsis the variable name we define for the obtained comment array.
Analyze the key information of the comment object
IncommentListIn the loop of tags, each iteration containsitemEach variable 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. To ensure the correct rendering and safety of the content, if the comment content may contain HTML tags or Markdown format, we usually cooperate withsafeOr filter.renderfilter usage. - Username (
item.UserName):Directly display the nickname or identifier of the commenter. - Publish time (
item.CreatedTime):This is a Unix timestamp. To present the date and time in a user-friendly format, we need to usestampToDateFormat labels. - Reply object (
item.Parent):This is a clever design of the AnQiCMS comment system. If the current comment is a reply to another comment, thenitem.ParentIt will be an object that contains 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 example
Now, let's combine this information to create a comment display template that is both intuitive and has a good user experience. Here is a practical example that considers the different display needs of ordinary comments and reply comments, and includes review status judgment and content truncation processing:
`twig