In the Auto CMS, add a comment list to the document content and enable reply and pagination functions, which can greatly enhance the website's user interaction.Users can express opinions and engage in discussions about specific documents, which not only enriches the content ecosystem but also brings more vitality to the website.
1. Displaying the comment list: Building the foundation for interaction
To display comments on the document page, it mainly relies on the built-in Anqi CMS.commentListThis tag can help us easily obtain the comment data associated with the current document.
Firstly, we need to find the appropriate position to place the comment area in the document detail page template (usually{模型table}/detail.htmlor a custom document template, such asdownload.html).
commentListThe core parameters of the tag include:
archiveIdThis is the key, it specifies which document's comments to display. Usually, we would get the current document's ID.typeThe type of comment list. Set to"list"auto, would list comments according to the specified quantity; set to"page"auto, indicates that we want to enable pagination for the comment list, which would be compatible withpaginationauto tag to use.limit：Control the number of comments displayed per page or per time.order：Used to specify the sorting rule of comments, such asid desc（comments with the latest first）orid asc（comments with the oldest first）.
The following is a basic comment list code structure, it will loop to display comments and include some basic information:
{# 获取当前文档的ID，以便加载其评论 #}
{% archiveDetail currentArchiveId with name="Id" %}
<div class="comment-section">
<h3>用户评论</h3>
{% commentList comments with archiveId=currentArchiveId type="list" limit="10" order="id desc" %}
{% for item in comments %}
<div class="comment-item">
<div class="comment-header">
<span class="comment-author">{{item.UserName}}</span>
<span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
</div>
<div class="comment-content">
{# 判断评论状态，若在审核中则显示提示 #}
{% if item.Status != 1 %}
<p class="review-status">（评论正在审核中...）</p>
{% else %}
<p>{{item.Content}}</p>
{% endif %}
</div>
</div>
{% empty %}
<p class="no-comments">暂无评论，快来发表你的看法吧！</p>
{% endfor %}
{% endcommentList %}
</div>
In this example, we first go through:archiveDetailtag retrieves the current document'sIdand then pass it tocommentListofarchiveIdParameter.forloop through each commentitem），and display the author, time, and content.item.StatusThe field can be used to determine whether a comment has passed the review, so that different content can be displayed on the front end.
Second, integrate the reply function: make the discussion more in-depth.
Comments section interaction is not just one-way comments, the reply function is the key to enhancing interaction depth. Anqi CMS'scommentListtags naturally support the reply function, throughitem.ParentField can be used to judge and display parent comments.
When a comment is a reply to another comment,item.ParentThis will include the complete data of the parent comment. We can use this feature to build a hierarchical reply display.
{# 假设currentArchiveId已在上方获取 #}
<div class="comment-section">
<h3>用户评论</h3>
{% commentList comments with archiveId=currentArchiveId type="list" limit="10" order="id desc" %}
{% for item in comments %}
<div class="comment-item">
<div class="comment-header">
<span class="comment-author">{{item.UserName}}</span>
<span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
</div>
<div class="comment-body">
{# 如果是回复，显示父级评论内容 #}
{% if item.Parent %}
<blockquote class="reply-to">
回复 @{{item.Parent.UserName}}：
{% if item.Parent.Status != 1 %}
<p>（原评论正在审核中...）</p>
{% else %}
<p>{{item.Parent.Content|truncatechars:100}}</p>
{% endif %}
</blockquote>
{% endif %}
<div class="comment-content">
{% if item.Status != 1 %}
<p class="review-status">（评论正在审核中...）</p>
{% else %}
<p>{{item.Content}}</p>
{% endif %}
</div>
</div>
<div class="comment-actions">
<a href="javascript:;" class="reply-button" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
<a href="javascript:;" class="like-button" data-comment-id="{{item.Id}}">点赞 (<span class="vote-count">{{item.VoteCount}}</span>)</a>
</div>
</div>
{% empty %}
<p class="no-comments">暂无评论，快来发表你的看法吧！</p>
{% endfor %}
{% endcommentList %}
</div>
By adding ablockquoteTo display the reply content of the comment and add a “Reply” button,data-comment-idanddata-user-nameProperties, so that the reply object can be automatically filled in the form when clicking to reply through JavaScript.
III. Smooth Browsing: Comment Pagination Feature
When the number of comments is large, pagination is the key to maintaining page loading speed and user experience. Anqi CMS achieves this throughcommentListoftype="page"parameters withpaginationthe cooperation of tags, which can easily implement comment pagination.
we willcommentListoftypeparameter settings"page"Then use it outsidepaginationtags to generate pagination navigation.
{# 假设currentArchiveId已在上方获取 #}
<div class="comment-section">
<h3>用户评论</h3>
{% commentList comments with archiveId=currentArchiveId type="page" limit="5" order="id desc" %}
{% for item in comments %}
<div class="comment-item">
{# ... 评论内容及回复逻辑（同上） ... #}
<div class="comment-header">
<span class="comment-author">{{item.UserName}}</span>
<span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
</div>
<div class="comment-body">
{% if item.Parent %}
<blockquote class="reply-to">
回复 @{{item.Parent.UserName}}：
{% if item.Parent.Status != 1 %}
<p>（原评论正在审核中...）</p>
{% else %}
<p>{{item.Parent.Content|truncatechars:100}}</p>
{% endif %}
</blockquote>
{% endif %}
<div class="comment-content">
{% if item.Status != 1 %}
<p class="review-status">（评论正在审核中...）</p>
{% else %}
<p>{{item.Content}}</p>
{% endif %}
</div>
</div>
<div class="comment-actions">
<a href="javascript:;" class="reply-button" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
<a href="javascript:;" class="like-button" data-comment-id="{{item.Id}}">点赞 (<span class="vote-count">{{item.VoteCount}}</span>)</a>
</div>
</div>
{% empty %}
<p class="no-comments">暂无评论，快来发表你的看法吧！</p>
{% endfor %}
{% endcommentList %}
{# 评论分页导航 #}
<div class="comment-pagination">
{% pagination pages with show="5" %}
<ul>
{% if pages.FirstPage %}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
{% endif %}
{% if pages.PrevPage %}
<li class="page-item"><a href="{{pages.PrevPage.Link}}">上一页</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}}">下一页</a></li>
{% endif %}
{% if pages.LastPage %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">末页</a></li>
{% endif %}
</ul>
{% endpagination %}
</div>
</div>
paginationTagsshowThe parameter controls the maximum number of page buttons displayed. It generates links such as “Home”, “Previous Page”, “Page Number”, “Next Page”, “Last Page”, etc.LinkProperties can be used directly.
Four, Collect Feedback: Comment Submission Form
With a comment list, of course, there is no shortage of a comment submission form. The comment submission form requires specificactionpaths and fields.
auto