如何在模板中安全有效地展示用户评论列表和留言表单？

在现代网站运营中，用户生成内容（UGC）是提升网站活跃度和用户粘性的重要组成部分。用户评论和在线留言功能不仅能促进社区互动，提供宝贵的反馈，还有助于提升内容的丰富性和搜索引擎的活跃度。AnQiCMS作为一个专注于高效、安全、可定制的内容管理系统，为我们在模板中安全有效地展示这些功能提供了强大而灵活的支持。

要确保评论列表和留言表单在美观呈现的同时兼顾安全性和功能性，我们需要深入理解AnQiCMS模板系统的特性并采纳**实践。

一、在模板中呈现用户评论列表

用户评论是文章或产品页面不可或缺的一部分。AnQiCMS提供了专门的标签来管理和展示这些评论。

1. 调用评论列表标签

要在页面上显示评论，我们主要会用到 commentList 标签。这个标签能根据不同的需求（例如指定文章ID、显示类型等）灵活地拉取评论数据。

例如，在一个文章详情页上，要展示当前文章的评论，可以这样使用：

{% 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 %}

这里，archiveId=archive.Id 会自动获取当前页面的文章ID。type="page" 则表示启用分页功能，limit="10" 设定每页显示10条评论。

2. 安全呈现评论内容

用户评论内容（item.Content）是用户生成内容中最需要关注安全性的地方。尽管AnQiCMS后台提供了“内容安全管理”和“敏感词过滤”功能，但作为模板开发者，我们仍需谨慎处理前端展示。

• 审核状态 (item.Status): 始终检查 item.Status。只有当状态为 1（审核通过）时才完整显示评论内容。对于其他状态，可以显示“评论审核中”或不显示。
• HTML内容与XSS防护: 如果用户评论允许输入HTML标签（例如加粗、斜体），并且您信任后台的过滤机制，可以使用 |safe 过滤器让浏览器解析这些HTML。但如果评论内容是纯文本，或者您不希望任何HTML被渲染，强烈建议使用 |striptags 过滤器来剥离所有HTML标签，从而有效防止跨站脚本攻击（XSS）。
• 回复功能: AnQiCMS的评论结构支持多级回复（item.Parent）。在展示回复内容时，同样要注意安全性，并可根据需要嵌套显示。

3. 集成评论分页

如果评论数量较多，分页是提升用户体验的关键。结合 commentList 标签的 type="page" 参数，我们可以利用 pagination 标签来生成分页导航：

{% 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. 评论提交表单

评论提交通常是一个 POST 请求，目标地址为 /comment/publish。表单中需要包含 archive_id (文章ID)、user_name (用户名) 和 content (评论内容)。如果支持回复，还需要 parent_id (上级评论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