In AnQiCMS, the comment feature is an important part to enhance the interactivity of the website.How to clearly and beautifully display the valuable comments left by users on the website, which is the focus of website operators.AnQiCMS provides flexible template tags, allowing us to easily customize the display of the comment list, including user names, comment content, and posting time, etc., core information.
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 located atcomment/list.htmlOf course, if your website uses a custom template structure, you may need to find or create the corresponding display location according to the actual situation in the current article detail page or the specific block referenced by the template file.
2. IntroductioncommentListTag to get comment data
AnQiCMS providedcommentListThe tag is specifically used to obtain the comments of a specified article. When using this tag, we need to clarify the following key parameters:
archiveIdThis is the most important item, it specifies which document (article, product, etc.)'s comments to retrieve. Usually, on the article detail page, we canarchive.IdGet the ID of the current article and pass it tocommentList.type: Determines the display style of the comment list. Set to"page"It can achieve pagination, while set to"list"It will only display a specified number of comments without pagination.limit: Controls the number of comments displayed per page or each time. For example,limit="10"It means 10 comments are displayed per page.
Next iscommentListThe basic usage structure of tags:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 在这里循环显示每条评论 #}
{% endcommentList %}
Here, commentsIt is a custom variable name that will contain the collection of comments data obtained, and we will traverse it in the subsequent loop.
3. Traverse comments and display the required information
After obtaining the collection of comment data, we can useforTraverse the tags one by one to display the detailed information of each comment. Inside the loop,itemThe or you can define your own loop variable name will represent the current comment object, and we can access all properties of the comment through it.
Display the user nickname (UserName)
Each comment's user nickname can be obtained throughitem.UserName. Considering that 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 comment passesitem.ContentRetrieve. It should be noted that the comments posted by users may contain HTML tags. In order to ensure that these contents are correctly parsed and not displayed as source code, we need to use|safeFilter. If the comment content is too long, you can also use it in conjunction with|truncatecharsFilter to truncate the display and keep the page neat.
{% if item.Status != 1 %}
该内容正在审核中：{{item.Content|truncatechars:9|safe}} {# 审核中的评论内容可能截断显示并加提示 #}
{% else %}
{{item.Content|safe}}
{% endif %}
Display 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 users in a more readable way.stampToDateThe second parameter is the Go language's 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 can useitem.ParentThe object retrieves information about the parent comment, thus constructing a comment list with more hierarchy.
{% 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 the number of comments is large, the pagination feature will greatly enhance the user experience. IncommentListSet in the labeltype="page"after that, we can cooperatepaginationtags to display the 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
Integrate the above snippet, the following is a basic comment list display code that includes user nickname, comment content, publish time, and pagination features:
"twig {# Assume archive.Id is the ID of the current article, replace it as needed #}