When using the AnQi CMS to manage website content, the comment feature on the document detail page is an important part of interacting with readers.Effectively display these comments and ensure that the page maintains good loading speed and user experience as the number of comments increases, it is necessary to properly handle the display and pagination of the comment list.The Auto CMS provides very intuitive and powerful template tags, helping us easily achieve this goal.
Understanding the basic display of the comment list
To display comments on the document page, we mainly use the built-in Anqi CMScommentListLabel.This label is specifically designed to retrieve comment data related to a specific document.When you are on the detail page of a document, this tag will intelligently recognize the current document's ID without manual specification, which is very convenient.
For example, in a typical document detail template, you can initially display comments in the following way:
{# 假设我们正在一个文档详情页，archive.Id会自动被标签识别 #}
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
{% for item in comments %}
<div>
{# 评论者的用户名，考虑到评论可能需要审核，这里增加了一个状态判断 #}
<span>
{% if item.Status != 1 %}
审核中：{{item.UserName|truncatechars:6}}
{% else %}
{{item.UserName}}
{% endif %}
</span>
{# 如果是回复，会显示被回复评论者的信息 #}
{% if item.Parent %}
<span>回复</span>
<span>
{% if item.Status != 1 %}
审核中：{{item.Parent.UserName|truncatechars:6}}
{% else %}
{{item.Parent.UserName}}
{% endif %}
</span>
{% endif %}
{# 评论的发布时间，使用stampToDate过滤器进行格式化 #}
<span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</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 %}
该内容正在审核中：{{item.Content|truncatechars:9}}
{% else %}
{{item.Content}}
{% endif %}
</div>
{# 可以添加点赞、回复等交互功能，这里仅作示意 #}
<div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
<a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
<a class="item" data-id=reply>回复</a>
</div>
{% endfor %}
{% endcommentList %}
In the above code,commentList标签将评论数据赋值给了commentsa variable, and throughfor循环遍历每一条评论。我们通过item.UserName获取评论者，item.Content获取评论内容，item.CreatedTime获取发布时间，并利用stampToDateThe filter formats it into a readable date. It is noteworthy that,item.StatusIt can be used to determine if the comment has passed the review,item.ParentIt is used to display the context of the reply, which is crucial for constructing a clear conversation flow.
Implement the pagination feature for the comment list.
When there are many comments, loading all comments at once can cause the page to become too long, affecting user experience and page performance.This is when we need to introduce pagination.commentListTagstypeAdjust the parameters and combinepaginationLabel it.
Firstly, tocommentListTagstypeParameters fromlisttopageAnd setlimitParameters to control the number of comments displayed per page. For example, we set to display 10 comments per page:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 评论列表的渲染方式与上方基本一致 #}
{% for item in comments %}
<div>
{# ... 评论详情展示代码 ... #}
</div>
{% endfor %}
{% endcommentList %}
接下来，在commentListBelow the label, followed by usingpaginationtags to generate pagination navigation.paginationLabels will automatically identify the pagination context of the current page and generate corresponding page number links. You can specify how many page number buttons to display in the pagination bar through parameters.showParameters can be used to specify how many page number buttons to display in the pagination bar.
<div class="pagination">
{% pagination pages with show="5" %}
<ul>
{# 首页链接 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
{# 上一页链接 #}
{% if pages.PrevPage %}
<li class="page-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
{% endif %}
{# 中间页码列表 #}
{% for item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li class="page-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
{% endif %}
{# 尾页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
</ul>
{# 您还可以选择显示总评论数、总页数和当前页码等信息 #}
<p>总数：{{pages.TotalItems}}条评论，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页。</p>
{% endpagination %}
</div>
In this pagination code,pagesthe variable contains all the information related to pagination, such as the current page number (pages.CurrentPage)、total number of pages (pages.TotalPages)、home page link (pages.FirstPage.Link)、previous page/next page (pages.PrevPage.Link,pages.NextPage.Link) and the list of page numbers (pages.Pages). By traversingpages.Pages, we can generate specific page number links, and byitem.IsCurrent determining the current page, the corresponding styles can be added (for exampleactive类）。
Comment form integration
Although this article mainly focuses on the display and pagination of comment lists, the core of the comment function also cannot be separated from comment submission.The CMS also provides a simple comment submission mechanism.
<form method="post" action="/comment/publish">
<input type="hidden" name="return" value="html"> {# 提交后希望返回html内容 #}
<input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}"> {# 隐藏字段，指定评论关联的文档ID #}
<div>
<label>用户名</label>
<div>
<input type="text" name="user_name" required placeholder="请填写您的昵称" autocomplete="off">
</div>
</div>
<div>
<label>评论内容</label>
<div>
<textarea name="content" placeholder="您的评论..." rows="5"></textarea>
</div>
</div>
{# 如果后台开启了验证码，这里还需要添加验证码相关的输入框和图片 #}
<div style="margin-top: 15px;">
<button type="submit">提交评论</button>
<button type="reset">重置</button>
</div>
</form>
Please note,archive_idThis is a mandatory hidden field, it tells the system which document this comment is for.If your website backend has enabled comment captcha, you also need to add captcha-related fields and images in the form, for specific implementation, please refer to the document description of Anqi CMS.
Through these steps, you can elegantly display the document comment list on the website built with Anqi CMS, and combine the pagination feature to provide readers with a smooth reading and interactive experience.
Common Questions (FAQ)
1. Why is my comment list not displaying any comments, even though there are comments in the background?This is usually due to the review status of comments. In AnQi CMS, comments may need to be reviewed by administrators before they can be displayed on the front page. Please check.commentListwithin the tagitem.StatusThe judgment logic ensures that you have demonstratedStatus = 1(Reviewed and approved) comments. If the backend is set to require review for comments by default, then newly submitted comments may not be displayed on the front end immediately.
2. I want to set different pagination styles for the comment lists of different document models. How should I do it?The template system of AnQi CMS supports high customization. You can use document model ID (moduleId) in the template file.ifautoarchive.ModuleIdautopartialautodesign-director.mdauto mentioned that the template supports custom names, for example,comment/list.htmlYou can create specific comment templates for different model comment lists and associate them in the background.
3. How to display a specific document's comment list on a non-document detail page?IncommentListin the tag,archiveIdThe parameter can be specified manually. This means that even if you are not on the document details page, as long as you know the ID of the target document, you can{% commentList comments with archiveId="目标文档ID" type="page" limit="10" %}in order to retrieve and display the comment list and pagination of the document.