In AnQiCMS, the comment feature is an important part of enhancing website interactivity.How to clearly and beautifully display the valuable comments left by users on the website is the focus of website operators.AnQiCMS provides flexible template tags, allowing us to easily customize the display of comment lists, including user nicknames, comment content, and publishing time, etc.
To implement the display of comment lists, we mainly use the template tag system of AnQiCMS. This usually involves editing specific parts of the website template files.
1. Determine the template file for the comment list
Firstly, we need to find the template file responsible for rendering the comment list. According to the template conventions of AnQiCMS, the comment list page is usually locatedcomment/list.html.Of course, if your website uses a custom template structure, you may need to find or create the corresponding display position in the template file referenced by your current article detail page or specific block according to the actual situation.
2. IntroductioncommentListtags to get comment data
AnQiCMS providescommentListTags, specifically used to retrieve comment data for specified articles. When using this tag, we need to clearly define the following key parameters:
archiveIdThis is the most important item, specifying which document (article, product, etc.)'s comments to retrieve. Usually, on the article detail page, we can go througharchive.IdGet the current article ID and pass it tocommentListLabel.type: Determines the display method of the comment list. Set to"page"可以实现分页功能，而设置为"list"It will only display the specified number of comments without pagination.limit: Controls the number of comments displayed per page or per time. For example,limit="10"means 10 comments are displayed per page.
Below iscommentListThe basic structure of the label usage:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 在这里循环显示每条评论 #}
{% endcommentList %}
Here,commentsIt is a custom variable name, which will contain the set of comment data obtained, and we will traverse it in the subsequent loop.
3. English loop through comments and display the required information
After getting the comment data set, we can useforEnglish loop through tags to display the detailed information of each comment in the loop.item（or your custom loop variable name）will represent the current comment object, and we can access various properties of the comment through it.
Display user nickname (UserName)
Each comment's user nickname can be viewed.item.UserNameSince comments may be in review status, we can add a simple judgment to prompt the user:
<span>
{% if item.Status != 1 %}
审核中：{{item.UserName|truncatechars:6}} {# 审核中的用户昵称可能截断显示 #}
{% else %}
{{item.UserName}}
{% endif %}
</span>
Display the comment content (Content)
The specific content of the commentitem.ContentGet. It should be noted that the content of comments published by users may contain HTML tags. In order to ensure that these contents can be parsed correctly rather than displayed as source code directly, we need to use|safeFilter. If the comment content is too long, you can also use it in conjunction.|truncatecharsFilter to truncate the display to keep the page tidy.
{% if item.Status != 1 %}
该内容正在审核中：{{item.Content|truncatechars:9|safe}} {# 审核中的评论内容可能截断显示并加提示 #}
{% else %}
{{item.Content|safe}}
{% endif %}
Display the publish time (CreatedTime)
Comment publish time (item.CreatedTime) is a timestamp, we need to use the AnQiCMS providedstampToDatetag to format it, so that it can be presented to the user in a more readable way.stampToDateThe second parameter of the label is the Go language time formatting string, you can adjust it as needed. For example,"2006-01-02 15:04"It will be displayed as “Year-Month-Day Hour:Minute”.
<span>{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
Display reply comment (Parent)
AnQiCMS's comment system also supports multi-level replies. If the current comment is a reply to another comment, you canitem.ParentThe object retrieves the parent comment information to build a comment list with more levels.
{% if item.Parent %}
<blockquote>
{# 显示父级评论的用户名和内容 #}
<span>回复 {{item.Parent.UserName}}：</span>
{% if item.Parent.Status != 1 %}
该内容正在审核中：{{item.Parent.Content|truncatechars:100|safe}}
{% else %}
{{item.Parent.Content|truncatechars:100|safe}}
{% endif %}
</blockquote>
{% endif %}
4. Add pagination feature
If there are many comments, the pagination feature will greatly enhance the user experience.commentListsetting in the labeltype="page"After that, we can cooperate withpaginationtags to display pagination links.
{# 假设上面的 commentList 标签已设置为 type="page" #}
<div>
{% pagination pages with show="5" %}
{# 首页 #}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
{# 上一页 #}
{% if pages.PrevPage %}
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</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}}">{{pages.NextPage.Name}}</a>
{% endif %}
{# 尾页 #}
<a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
{% endpagination %}
</div>
5. Complete code example
The English translation of 'auto' is 'English'.
English