Effectively integrate and display the comment list in the AnQi CMS, which is crucial for enhancing website user interaction, activating community atmosphere, and obtaining valuable user feedback.As an experienced CMS website operation personnel in the security industry, I know that high-quality content cannot be separated from active user participation.The AnQi CMS provides powerful and flexible template tags, allowing us to easily implement this feature on the website front-end.
Overview of comment function and template file organization
The security CMS is built with a comment management feature, allowing website administrators to review, reply to, and manage user comments.To integrate the comment list on the website frontend, we first need to understand its recommended position in the template structure.comment/list.htmlSuch path. Of course, you can also directly introduce the comment list code snippet in other template files such as the article detail page according to your actual needs.
Display the comment list:commentListUse of tags
Secure CMS throughcommentListThe template tag is used to render comment content. This tag has great flexibility and can obtain and display comments based on different parameters.
to usecommentListtag, you need to be in a{% commentList comments with ... %}Define a variable in a code block (for examplecomments), then throughforLoop through this variable to display the details of each comment.
commentListThe tag supports the following key parameters:
archiveIdThis is the ID of the document to which the comment belongs. Usually, we dynamically obtain the current article ID on the article detail page and use it asarchiveIdthe value.order: Used to specify the sorting method of comments, for exampleid desc(Sorted by ID in descending order, i.e., the latest comments first) orid asc(Sorted by ID in ascending order).limit: 控制显示评论的数量。如果您只想显示最新N条评论，可以使用 Englishlimit="N". It also supportsoffsetpattern, such aslimit="2,10"表示从第2条开始获取10条评论。type: 定义评论列表的类型。当 Englishtype="list"It will directly display the specified number of comments. Whentype="page"it indicates that you want the comment list to have pagination functionality, at this time it needs to be coordinated withpaginationtags to be used.siteId: When your security CMS has deployed multiple sites, you can use this parameter to specify the site ID to retrieve comments.In general, there is no need to manually set, the system will automatically identify the current site.
Inforin the loop, each comment data is displayed withitemPresented in the form of a variable, including such asId(Comment ID),UserName(Commenter name),Content(The comment content),CreatedTime(comment time),Status(review status),ParentEnglish|safeEnglish
Below is a basic comment list code example, which is usually placed at the bottom of the article detail page:
<div class="comments-section">
<h3>用户评论</h3>
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
{% for item in comments %}
<div class="comment-item">
<div class="comment-meta">
<span class="username">
{% if item.Status != 1 %}
（审核中）{{item.UserName|truncatechars:6}}
{% else %}
{{item.UserName}}
{% endif %}
</span>
{% if item.Parent %}
<span class="reply-to">回复
{% if item.Parent.Status != 1 %}
（审核中）{{item.Parent.UserName|truncatechars:6}}
{% else %}
{{item.Parent.UserName}}
{% endif %}
</span>
{% endif %}
<span class="time">{{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|safe}}
{% else %}
{{item.Parent.Content|truncatechars:100|safe}}
{% endif %}
</blockquote>
{% endif %}
{% if item.Status != 1 %}
该内容正在审核中：{{item.Content|truncatechars:9|safe}}
{% else %}
{{item.Content|safe}}
{% endif %}
</div>
<div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
<a class="action-btn vote-comment" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
<a class="action-btn reply-comment" data-id="reply">回复</a>
</div>
</div>
{% endfor %}
{% empty %}
<p class="no-comments">目前还没有评论，快来发表您的看法吧！</p>
{% endcommentList %}
</div>
If you have a large number of comments and want to implement pagination, you cantypeparameter settingspage, and cooperate withpaginationLabel to generate pagination links:
<div class="comments-section">
<h3>用户评论</h3>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 评论列表内容与上方示例类似 #}
{% for item in comments %}
{# ... 显示评论内容 ... #}
{% endfor %}
{% endcommentList %}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination-list">
<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>
{% endpagination %}
</div>
</div>
Comment submission form: Implement user comment function
Users typically post comments through an HTML form. This form must submit data to the Anqi CMS.comment/publishinterface. The form must includearchive_id/user_nameandcontentfields, whereparent_idUsed to reply to specific comments.
<div class="comment-form-section">
<h3>发表评论</h3>
<form method="post" action="/comment/publish" class="comment-submit-form">
<input type="hidden" name="return" value="html"> {# 可选，指定后端返回HTML或JSON #}
<input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}"> {# 假设在文章详情页，archive.Id 可用 #}
<input type="hidden" name="parent_id" id="parent_comment_id" value=""> {# 回复时动态填充 #}
<div class="form-group">
<label for="comment-username">您的昵称：</label>
<input type="text" id="comment-username" name="user_name" required placeholder="请输入您的昵称" autocomplete="off">
</div>
<div class="form-group">
<label for="comment-content">评论内容：</label>
<textarea id="comment-content" name="content" required rows="5" placeholder="请在此处输入您的评论"></textarea>
</div>
{# 验证码集成（如果启用） #}
<div class="form-group captcha-group" style="display: flex; align-items: center;">
<input type="hidden" name="captcha_id" id="captcha_id">
<input type="text" name="captcha" required placeholder="请填写验证码" class="captcha-input">
<img src="" id="get-captcha" class="captcha-image" title="点击刷新验证码">
</div>
<div class="form-actions">
<button type="submit" class="submit-btn">提交评论</button>
<button type="reset" class="reset-btn">重置</button>
</div>
</form>
</div>
<script>
// JavaScript 刷新验证码
document.getElementById('get-captcha').addEventListener("click", function () {
fetch('/api/captcha')
.then(response => response.json())
.then(res => {
document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
}).catch(err => console.error('Error fetching captcha:', err));
});
document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
// JavaScript 处理回复功能
document.querySelectorAll('.reply-comment').forEach(button => {
button.addEventListener('click', function() {
const commentId = this.closest('.comment-actions').dataset.id;
const userName = this.closest('.comment-actions').dataset.user;
document.getElementById('parent_comment_id').value = commentId;
document.getElementById('comment-content').value = `回复 @${userName}: `;
document.getElementById('comment-content').focus();
});
});
</script>
Comment like feature: Enhance interactivity
To further enhance user interaction, you can add a like function to comments. This is usually done through JavaScript./comment/praiseAn interface sends a POST request to implement it, the request body needs to include the comment'sid.
// 假设您已经使用了jQuery，或自行实现Ajax请求
$(document).on('click', '.vote-comment', function() {
const $this = $(this);
const commentId = $this.closest('.comment-actions').data("id");
$.ajax({
url: "/comment/praise",
method: "POST",
data: { id: commentId },
dataType: "json",
success: function(res) {
if (res.code === 0) {
$this.find(".vote-count").text(res.data.vote_count);
alert(res.msg || "点赞成功！");
} else {
alert(res.msg || "点赞失败，请稍后再试。");
}
},
error: function(xhr, status, error) {
alert("网络错误，请检查您的连接。");
console.error("点赞请求失败:", status, error);
}
});
});
Integration of captcha: prevent spam comments
To effectively prevent spam comments and malicious screen scraping, Anqi CMS supports the integration of captcha functionality. First, you need to go to the Anqi CMS backend's全局设置 -> 内容设置中启用Markdown编辑器（文档中提到Captcha与Markdown编辑器相关，实际上Captcha是独立的评论功能辅助）。实际操作中，验证码功能通常在English功能管理 -> 网站留言/内容评论auto configuration settings enable.
Once the background is enabled, you can add HTML and JavaScript code for the captcha in the comment submission form, as shown in the example of submitting the form before. This includes a hiddencaptcha_idField, a text box for input validation code and a button to display the captcha image and refresh it<img>Label. JavaScript will be responsible for fetching and displaying the captcha image, and refreshing the captcha when the user clicks on the image.
Build a functional and interactive comment system for your security CMS website through the above steps, thus better attracting and retaining users.
Common Questions and Answers (FAQ)
1. Why can't my comment list be displayed or why doesn't the comment appear after submission?
There are usually several reasons. First, please make sure that your template code has been used correctly.