How can I display the user's submitted comment content and avatar in the website comment section?

Displaying user comments on the website is a key factor in enhancing user interaction and content vitality.For websites using AnQiCMS, its powerful template tag system makes this operation intuitive and flexible.This article will introduce in detail how to clearly display user submitted comments in the website's comment section, accompanied by their unique avatars, thereby enriching your website user experience.

Understanding the basic comment function of Anqi CMS

Firstly, we need to understand the basic operation of comment content in the security CMS.Each user comment is associated with a specific document (article, product, etc.).The AutoCMS provides comprehensive backend support for comment management, including review, deletion, and reply.We usually set the comment area at the bottom of the document detail page when displaying on the front end.

The template system of AnQi CMS adopts syntax similar to Django template engine, allowing you to call data through tags and perform logical control. Regarding the template file for comment display, according to system conventions, it is usually located in thecomment/list.htmlor similar comment fragment files for processing, then throughincludetag it to the main template of the document detail page.

retrieve and display the comment content

To display user-submitted comments, we mainly use the Anqi CMS.commentListThis tag can help us obtain all comment data related to a specific document.

In the document detail page template, you can use it like thiscommentListTags:

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

In the above code:

  • {% archiveDetail currentArchive with name="Id" %}used to get the current document'sID, this iscommentListKey parameters of the tagarchiveIdthe source.
  • commentListTagsarchiveIdThe parameter specifies which document's comments to retrieve.type="page"means we want the comments to be displayed in pages,limit="10"It sets 10 comments to be displayed per page.
  • {% for item in comments %}Loop through each comment obtained.itemRepresents the comment object in the current loop, it contains information such as the comment.UserName(Username),Content(The comment content),CreatedTime(Creation Time)、Status(Review status) as well asParentId(If it is a reply to a comment, it is the parent comment ID) and so on.
  • {% empty %}Blocks will display a friendly prompt when there are no comments.
  • {% pagination pages with show="5" %}Tags are used to generate pagination navigation for the comment area.

Inside the loop, we can display the basic information of comments like this:

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

Here are some things to note{{ item.Content|safe }}of|safeFilter. As the comment content is submitted by users, it may contain HTML tags or malicious scripts, usingsafeThe filter informs the template engine that this content is safe and does not need to be escaped, allowing HTML content to be displayed normally.But in practice, please make sure that your backend has strictly filtered and verified the content submitted by users to prevent cross-site scripting (XSS) attacks.

Add a user avatar to the comment

Safe CMS comment list (commentList) Default will provide the corresponding comment for eachUserId. To display the user's avatar, we need to combineuserDetailthe tag to obtain the URL of the user's avatar.

IncommentListWithin the loop, we can call for each comment's user.userDetailTags:

<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>

In this snippet:

  • We first go through{% if item.UserId %}Determine if the comment is associated with a user ID.
  • If it is associated, we use{% userDetail commentUser with name="AvatarURL" id=item.UserId %}Get the URL of the user's avatar.commentUserStore the link of the avatar.
  • {{ commentUser|default:'/static/images/default_avatar.png' }}Ensure that a default avatar is displayed even if the user's avatar cannot be retrieved, to avoid missing images. Please ensure that/static/images/default_avatar.pngReplace it with the actual default avatar path for your website.
  • altThe attribute provides alternative text for images, which helps with SEO and accessibility.

Interactive functionality for comments (reply and like)

To make the comment section more interactive, it usually includes reply and like functions.

  • Reply feature: IncommentListofitemIn, ifitem.Parent存在，说明这是一条回复评论，您可以展示被回复评论的内容。评论提交表单可以通过English