In Anqi CMS, add a comment list to the document content, and enable reply and pagination features, which can greatly enhance the user interaction of the website.Users can express their opinions and engage in discussions about specific documents, which not only enriches the content ecosystem but also brings more vitality to the website.
One, display the comment list: the foundation of interaction
To display comments on the document page, it mainly depends on the built-in Anqi CMS.commentListLabel. This label helps us easily access the comment data associated with the current document.
First, we need to be in the document detail page template, usually{模型table}/detail.htmlOr a custom document template likedownload.htmlFind the appropriate location to place the comment area in the.
commentListThe core parameters of the tag include:
archiveIdThis is crucial, it specifies which document's comments to display. Usually, we would get the current document's ID.typeThe type of the comment list is set to"list"When set, it will list comments in the specified quantity; set to"page"When set, it indicates that we want to enable pagination for the comment list, which willpaginationtag usagelimit: Controls the number of comments displayed per page or each time.orderUsed to specify the sorting rule of comments, such as byid desc(Most recent comments first) orid asc(Oldest comments first).
This is a basic comment list code structure, which 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 firstarchiveDetailThe tag obtained the current document'sIdand then passed it tocommentListofarchiveIdParameter.forLoop through each comment (item) and display the author, time, and content.item.Statusfield can be used to determine whether the comment has passed the review, so that different content can be displayed on the front end.
Second, integrate the reply function: make the discussion deeper
The interaction in the comment area is not just one-way comments; the reply function is the key to enhancing interaction depth. AnQi CMS'scommentListTags naturally support reply functions, throughitem.Parentfields can 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 display of replies.
{# 假设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 ablockquoteElement to display the replied comment content and add the 'Reply' buttondata-comment-idanddata-user-nameProperties, so that subsequent through JavaScript to implement the click reply, automatically fill in the form reply object.
3. Smooth Browsing: Comment Pagination Functionality
When the number of comments is large, pagination is the key to maintaining page loading speed and user experience. Anqi CMS can do this throughcommentListoftype="page"Parameters andpaginationcooperation with tags, it can easily achieve comment pagination.
We willcommentListoftypethe parameter to"page"then use it externallypaginationtags 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>
paginationlabel'sshowThe parameter controls the maximum number of page buttons displayed. It generates links such as “Home”, “Previous page”, “Numeric page numbers”, “Next page”, “End page”, and so on, the links of whichLinkProperties can be used directly.
4. Collect feedback: Comment submission form
With the comment list, it naturally needs a comment submission form. The comment submission form requires specificactionpaths and fields.
`twig {# Assuming currentArchiveId has been retrieved above #}