Displaying user comments on the website and supporting pagination is an important element in enhancing content interactivity and user experience.AnQiCMS provides flexible template tags and data management features, allowing us to easily achieve this requirement.Below, let's see step by step how to operate.
Comment feature: make the content more vibrant
We all know that user comments are a reflection of the vitality of website content.They not only bring real user feedback to the website, but also effectively increase the freshness of the page and the attention of search engines.In AnQiCMS, displaying these comments and providing a good browsing experience (such as pagination) is a very direct and practical operation.
In general, we would display comments related to the content at the bottom of an article or product details page.The template system of AnQiCMS is very flexible, and we can easily render comment data to the page by using the specific tags it provides.
Core tags for displaying the comment list:commentList
To display comments on the page, we need to use AnQiCMS'scommentListtag. This tag is specifically designed to retrieve and present comment data.
Firstly, you need to determine where the comment should be displayed below an article or content. In the document detail page, we usually can identify this byarchiveDetailLabel gets the current document's ID. This ID will be the key parameter for fetching comments.
commentListThe basic usage of the label is roughly like this:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 评论列表将在这里循环显示 #}
{% endcommentList %}
There are several important parameters in this:
commentsThis is the variable name you define for the comment list data, you can name it as needed.{% endcommentList %}We will traverse each comment between tags.commentsWe will use this variable to traverse each comment.archiveId=archive.IdThis is to inform the system which document's comments to retrieve.archive.IdIt is through other tags (such asarchiveDetailThe document ID has already been retrieved. If you want to specify comments for a different document, you can also enter the specific ID, for example,archiveId="1".type="page"This parameter is very critical. It indicates that we want to display comments in a paginated format, rather than simply listing all comments. This lays the foundation for adding pagination navigation later.limit="10"This defines how many comments are displayed per page. You can adjust this number based on the design of the website and the habits of the users, for examplelimit="5"orlimit="20".
In{% commentList %}and{% endcommentList %}We can use it betweenforin a loop to iterate overcommentsEach comment in the variable says:)
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{% for item in comments %}
<div class="comment-item">
<div class="comment-meta">
{# 判断评论状态：AnQiCMS 提供了评论审核功能，status=1 表示审核通过 #}
{% if item.Status != 1 %}
<span>审核中：{{ item.UserName|truncatechars:6 }}</span>
{% else %}
<span>{{ item.UserName }}</span>
{% endif %}
{# 如果是回复评论，可以显示被回复的用户名 #}
{% if item.Parent %}
<span>回复</span>
<span>
{% if item.Parent.Status != 1 %}
审核中：{{ item.Parent.UserName|truncatechars:6 }}
{% else %}
{{ item.Parent.UserName }}
{% endif %}
</span>
{% endif %}
<span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
</div>
<div class="comment-content">
{% if item.Parent %}
<blockquote class="reply-quote">
{% if item.Parent.Status != 1 %}
该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
{% else %}
{{item.Parent.Content|truncatechars:100}}
{% endif %}
</blockquote>
{% endif %}
{% if item.Status != 1 %}
<p class="pending-review">该内容正在审核中：{{ item.Content|truncatechars:9 }}</p>
{% else %}
<p>{{ item.Content }}</p>
{% endif %}
</div>
<div class="comment-actions">
<a href="javascript:;" class="like-btn" data-comment-id="{{ item.Id }}">赞({{ item.VoteCount }})</a>
<a href="javascript:;" class="reply-btn" data-comment-id="{{ item.Id }}" data-user-name="{{ item.UserName }}">回复</a>
</div>
</div>
{% empty %}
<p>目前还没有评论，快来发表你的看法吧！</p>
{% endfor %}
{% endcommentList %}
In the above code, we utilized:itemSeveral commonly used fields of the variable:
item.UserName: The nickname of the comment user.item.Content: The specific content of the comment. Here we use:|safeFilter to ensure that HTML tags in the comment content can be parsed correctly (if your comment editor supports rich text).item.CreatedTimeThe timestamp of the comment's publication, throughstampToDateLabel it as a readable date and time.item.Status: Review status of the comment, usually1Means the review has passed. We can provide a hint when displaying it based on this status.item.VoteCountLikes count of the comment.item.ParentIf this comment is a reply to another comment,item.Parentit will include the object data of the parent comment, which is very useful for implementing nested replies in comment layers.
Add pagination navigation:paginationtags
SincecommentListSettype="page", then we can add the pagination navigation. AnQiCMS providespaginationtags to help us generate standard pagination links.
paginationTags usually follow:commentListAfter the tag:
<div class="pagination-nav">
{% pagination pages with show="5" %}
<ul>
{# 显示首页链接 #}
<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
</li>
{# 显示上一页链接 #}
{% if pages.PrevPage %}
<li><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>
{% endif %}
{# 循环显示中间的页码链接 #}
{% for pageItem in pages.Pages %}
<li class="{% if pageItem.IsCurrent %}active{% endif %}">
<a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
</li>
{% endfor %}
{# 显示下一页链接 #}
{% if pages.NextPage %}
<li><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>
{% endif %}
{# 显示末页链接 #}
<li class="{% 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>
HerepagesThe variable contains all the information related to pagination:
pages.TotalItems: Total number of comments.pages.TotalPages: Total number of pages.pages.CurrentPage：Current page number.pages.FirstPage.Linkandpages.FirstPage.Name: Link and display name of the homepage.pages.PrevPage.Linkandpages.PrevPage.Name：The link and display name of the previous page.pages.NextPage.Linkandpages.NextPage.Name：The link and display name of the next page.pages.LastPage.Linkandpages.LastPage.Name：The link and display name of the last page.pages.PagesAn array containing all the intermediate page numbers, which we can iterate over.forLoop through it.pageItem.IsCurrent: Used to determine if the current page number is in an active state, making it convenient to add CSS styles.
show="5"The parameter controls the maximum number of page number buttons displayed in pagination navigation, which can avoid too many page numbers