In modern website operations, user-generated content (UGC) is an important component for enhancing website activity and user stickiness.The user comment and online message feature not only promotes community interaction and provides valuable feedback, but also helps to enhance the richness of the content and the activity of the search engine.AnQiCMS as a content management system focusing on efficiency, security, and customization, provides powerful and flexible support for us to safely and effectively showcase 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** methods.

An, in the template, display the user comment list

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, you can display comments for the current article 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 obtain the article ID of the current page.type="page"Means to enable pagination feature,limit="10"Set the display of 10 comments per page.

2. Safely present comment content

User comment content (item.Content[en] It is the most critical place for user-generated content to pay attention to security.Although AnQiCMS backend provides "Content Security Management" and "Sensitive Word Filtering" features, as a template developer, we still need to handle the front-end display with caution.

  • Review status (item.Status)item.StatusOnly when the status is1(Reviewed Passed) will the comment content be displayed completely. For other statuses, 'Comment under review' can be displayed or it can be hidden.
  • HTML content and XSS protectionIf the user comment allows HTML tags (such as bold, italic) and you trust the backend filtering mechanism, you can use|safeThe filter allows the browser to parse these HTML. But if the comment content is plain text, or if you do not want any HTML to be rendered, it is strongly recommended to use|striptagsFilter to strip all HTML tags, effectively preventing cross-site scripting attacks (XSS).
  • Reply feature: AnQiCMS comment structure supports multi-level replies (item.Parent）。In displaying the reply content, attention should also be paid to security, and nested display can be used as needed.

3. Integrated comment pagination

If there are many comments, pagination is the key to improving user experience. CombinedcommentListTagstype="page"parameters, we can make use ofpaginationtags to generate page 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/publishThe form must includearchive_id(Article ID),user_name(Username) andcontent(Comment content). If replies are supported, you also needparent_id(Parent comment ID).

`twig

<input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
<input type="hidden" name="parent_id" value="" id="comment-parent-id"> {# 用于回复特定评论 #}
<input type="hidden" name="return" value="html"> {# 可选：指定返回格式 #}

<div>
    <label for="user_name">您的昵称:</label>
    <input type="text" id="user_name" name="user_name" required placeholder="请填写您的昵称">
</div>
<div>
    <label for="comment_content">评论内容:</label>
    <textarea id="comment_content" name="content" rows="5" required placeholder="留下您的真知灼见..."></textarea>
</div>

{# 验证码增强安全性 #}
<div style