How to safely and effectively display user comment lists and message forms in a template?
In modern website operations, user-generated content (UGC) is an important component for enhancing website activity and user stickiness.User comments and online message functions not only promote community interaction, provide valuable feedback, but also help enhance the richness of content and the activity of search engines.AnQiCMS as a content management system focusing on efficiency, security, and customization, provides strong and flexible support for us to safely and effectively display these features in templates.
Ensure that the comment list and message form are presented beautifully while also considering safety and functionality, we need to deeply understand the characteristics of the AnQiCMS template system and adopt **practical** practices.
First, display the user comment list in the template
User comments are an indispensable part of articles or product pages. AnQiCMS provides special tags for managing and displaying these comments.
1. Call the comment list tag
To display comments on the page, we mainly usecommentListtags. This tag can flexibly pull comment data according to different requirements (such as specifying article ID, display type, etc).
For example, on an article detail page, to display the comments of the current article, you can use it like this:
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{% for item in comments %}
<div>
{# 评论用户和时间 #}
<span>{{item.UserName}}</span>
<span>{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
{# 评论内容及其安全处理 #}
<div>
{# 检查评论审核状态，仅显示已审核内容，或给出审核中提示 #}
{% if item.Status == 1 %}
{# 对于用户提交的评论内容，出于安全考虑，如果希望保留HTML格式，需要慎用`|safe`。
AnQiCMS在后台有敏感词过滤和内容安全管理，但模板层面仍建议根据内容信任度进行处理。
如果评论内容允许简单的HTML（如加粗），且后台已充分过滤，可以使用`|safe`；
如果只希望显示纯文本，则应使用`|striptags`过滤器。 #}
{{item.Content|safe}}
{% else %}
<p>您的评论正在审核中...</p>
{% endif %}
</div>
{# 回复功能 #}
{% if item.Parent %}
<blockquote>
<p>回复 {{item.Parent.UserName}}:</p>
<p>{{item.Parent.Content|striptags}}</p>
</blockquote>
{% endif %}
{# 点赞按钮（通常需要JS配合实现交互） #}
<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>
</div>
{% endfor %}
{% endcommentList %}
here,archiveId=archive.IdIt will automatically retrieve the article ID of the current page.type="page"This means enabling pagination feature,limit="10"Set the display of 10 comments per page.
2. Safely present comment content
User comment content (item.Content) is the place in user-generated content that needs to be most concerned with security.Although the AnQiCMS backend provides 'Content Security Management' and 'Sensitive Word Filtering' features, as a template developer, we still need to be cautious in handling the front-end display.
- Review status (
item.Status): Always checkitem.Status. Only when the status is1(Approved) will the full comment content be displayed. For other statuses, 'Comment under review' can be displayed or not displayed. - HTML content and XSS protection: If user comments are allowed to input HTML tags (such as bold, italic), and you trust the background filtering mechanism, you can use
|safeThe filter allows the browser to parse this HTML. However, if the comment content is plain text, or you do not want any HTML to be rendered, it is strongly recommended to use|striptagsA filter to strip all HTML tags, thus effectively preventing cross-site scripting attacks (XSS). - Reply function: The comment structure of AnQiCMS supports multi-level replies (
item.Parent)。In displaying the reply content, attention should also be paid to security, and it can be nested as needed.
3. Integrated comment pagination
If the number of comments is large, pagination is the key to improving user experience. CombinedcommentListlabel'stype="page"Parameters, we can make use ofpaginationtags to generate pagination navigation:
{% pagination pages with show="5" %}
<ul class="pagination">
{# 首页链接 #}
<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
{# 上一页链接 #}
{% if pages.PrevPage %}
<li><a href="{{pages.PrevPage.Link}}">上一页</a></li>
{% endif %}
{# 中间页码 #}
{% for item in pages.Pages %}
<li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li><a href="{{pages.NextPage.Link}}">下一页</a></li>
{% endif %}
{# 末页链接 #}
<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">末页</a></li>
</ul>
{% endpagination %}
4. Comment submission form
Comment submission is usually aPOSTrequest, the target address is/comment/publish. The form must includearchive_id(article ID),user_name(Username) andcontent(Comment content). If replies are supported, you also needparent_id(Parent comment ID).
`twig