如何在网站评论区显示用户提交的评论内容和头像？

在网站上展示用户评论是提升用户互动和内容活力的关键一环。对于使用安企CMS（AnQiCMS）的网站来说，其强大的模板标签系统让这一操作变得直观且灵活。本文将详细介绍如何在网站的评论区清晰地展示用户提交的评论内容，并配以他们独特的头像，从而丰富您的网站用户体验。

理解安企CMS评论功能的基础

首先，我们需要了解评论内容在安企CMS中的基本运作方式。每一条用户评论都与特定的文档（文章、产品等）相关联。安企CMS为评论管理提供了完善的后台支持，包括评论的审核、删除和回复等。在前台展示时，我们通常会在文档详情页的底部设置评论区域。

安企CMS的模板系统采用类似Django模板引擎的语法，允许您通过标签调用数据并进行逻辑控制。关于评论展示的模板文件，根据系统约定，通常会在您当前使用模板主题的 comment/list.html 或类似的评论片段文件中进行处理，然后通过 include 标签将其引入到文档详情页的主模板中。

获取并展示评论内容

要显示用户提交的评论，我们主要会用到安企CMS的 commentList 标签。这个标签能够帮助我们获取与某个文档相关的所有评论数据。

在文档详情页的模板中，您可以这样使用 commentList 标签：

{% archiveDetail currentArchive with name="Id" %} {# 首先获取当前文档的ID #}

{% commentList comments with archiveId=currentArchive type="page" limit="10" %}
    <div class="comment-section">
        {% for item in comments %}
            <div class="comment-item">
                {# 这里是评论内容和头像的展示区域，稍后详细介绍 #}
            </div>
        {% empty %}
            <p>目前还没有评论，快来发表您的看法吧！</p>
        {% endfor %}
    </div>

    {# 如果启用了分页，可以在这里显示分页导航 #}
    {% pagination pages with show="5" %}
        <div class="comment-pagination">
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for pageItem in pages.Pages %}
                <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        </div>
    {% endpagination %}
{% endcommentList %}

在上述代码中：

  • {% archiveDetail currentArchive with name="Id" %} 用于获取当前文档的 ID，这是 commentList 标签的关键参数 archiveId 的来源。
  • commentList 标签的 archiveId 参数指定了要获取哪个文档的评论。type="page" 表示我们希望评论能够分页显示，limit="10" 则设定了每页显示10条评论。
  • {% for item in comments %} 循环遍历获取到的每一条评论。item 代表了当前循环中的评论对象，它包含了评论的 UserName（用户名）、Content（评论内容）、CreatedTime（创建时间）、Status（审核状态）以及 ParentId（如果这是回复评论，则为上级评论ID）等信息。
  • {% empty %} 块会在没有评论时显示一个友好的提示。
  • {% pagination pages with show="5" %} 标签用于生成评论区的分页导航。

在循环体内，我们可以这样展示评论的基本信息：

<div class="comment-header">
    <span class="comment-username">{{ item.UserName }}</span>
    <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
</div>
{% if item.Status == 1 %} {# 仅在评论审核通过时显示内容 #}
    <div class="comment-content">{{ item.Content|safe }}</div>
{% else %}
    <div class="comment-content comment-moderating">该评论正在审核中...</div>
{% endif %}

这里需要注意 {{ item.Content|safe }} 中的 |safe 过滤器。由于评论内容是用户提交的，可能包含HTML标签或恶意脚本，使用 safe 过滤器能够告诉模板引擎，这段内容是安全的，不需要进行转义，从而允许HTML内容正常显示。但在实际操作中，请务必确保您的后台对用户提交的内容进行了严格的过滤和验证，以防止跨站脚本（XSS）攻击。

为评论添加用户头像

安企CMS的评论列表 (commentList) 默认会提供每条评论对应的 UserId。要显示用户头像，我们需要结合 userDetail 标签来获取用户头像的URL。

在 commentList 的循环内部，我们可以为每条评论的用户调用 userDetail 标签：

<div class="comment-item">
    {% if item.UserId %}
        {% userDetail commentUser with name="AvatarURL" id=item.UserId %}
        <img src="{{ commentUser|default:'/static/images/default_avatar.png' }}" alt="{{ item.UserName }}的头像" class="comment-avatar">
    {% else %}
        {# 如果没有关联用户ID，或者用户ID为0，则显示默认头像 #}
        <img src="/static/images/default_avatar.png" alt="匿名用户头像" class="comment-avatar">
    {% endif %}

    <div class="comment-body">
        <div class="comment-header">
            <span class="comment-username">{{ item.UserName }}</span>
            <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
        </div>
        {% if item.Status == 1 %}
            <div class="comment-content">{{ item.Content|safe }}</div>
        {% else %}
            <div class="comment-content comment-moderating">该评论正在审核中...</div>
        {% endif %}
        {# 回复、点赞等交互功能 #}
        {% if item.Parent %}
            <blockquote class="comment-reply-quote">
                回复 {{ item.Parent.UserName }}: {{ item.Parent.Content|truncatechars:100|safe }}
            </blockquote>
        {% endif %}
        <div class="comment-actions">
            <a href="javascript:;" class="comment-reply-btn" data-comment-id="{{ item.Id }}" data-user-name="{{ item.UserName }}">回复</a>
            <a href="javascript:;" class="comment-like-btn" data-comment-id="{{ item.Id }}">赞 (<span class="vote-count">{{ item.VoteCount }}</span>)</a>
        </div>
    </div>
</div>

在这个片段中：

  • 我们首先通过 {% if item.UserId %} 判断评论是否关联了用户ID。
  • 如果关联了，我们使用 {% userDetail commentUser with name="AvatarURL" id=item.UserId %} 来获取该用户的头像URL。commentUser 将存储头像的链接。
  • {{ commentUser|default:'/static/images/default_avatar.png' }} 确保即使获取不到用户头像，也会显示一个预设的默认头像，避免图片缺失。请将 /static/images/default_avatar.png 替换为您网站实际的默认头像路径。
  • alt 属性为图片提供了替代文本，有助于SEO和无障碍访问。

评论的交互功能（回复与点赞）

为了让评论区更具互动性，通常会包含回复和点赞功能。

  • 回复功能：在 commentList 的 item 中，如果 item.Parent 存在，说明这是一条回复评论，您可以展示被回复评论的内容。评论提交表单可以通过