How to 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 the website user experience.

Understand the basics of Anqi CMS comment function

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

The AnQi CMS template system uses a syntax similar to the Django template engine, allowing you to call data through tags and perform logical control. As for the template files for displaying comments, according to the system convention, they are usually located in the theme you are currently using.comment/list.htmlprocess similar comment fragments in the file and then throughincludetag it to introduce it to the main template of the document detail page

retrieve and display the comment content

To display user-submitted comments, we mainly use Anqi CMS'scommentListtags. This tag helps us retrieve all comment data related to a specific document.

In the template of the document detail page, 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 documentID, this iscommentListThe key parameters of thearchiveIdsource.
  • commentListlabel'sarchiveIdThe parameter specifies which document's comments to retrieve.type="page"Indicates that we want the comments to be displayed in pages.limit="10"Then set 10 comments to be displayed per page.
  • {% for item in comments %}Loop through each comment retrieved.itemrepresented the current loop comment object, it contains the comments ofUserName(Username),Content(Comment content),CreatedTime(creation time),Status(review status) as well asParentId(if this is a reply comment, it is the parent comment ID) and other information.
  • {% empty %}The block 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 %}

Please note here{{ item.Content|safe }}of|safeFilter. Since the comment content is submitted by users, it may contain HTML tags or malicious scripts, usesafeThe filter tells the template engine that this content is safe and does not need to be escaped, thus allowing normal display of HTML content.But in practice, you must ensure that your backend strictly filters and validates the content submitted by users to prevent cross-site scripting (XSS) attacks.

To add a user avatar to the comment

The AnQi CMS comment list (commentList) will provide the corresponding comments for eachUserId. To display the user's avatar, we need to combineuserDetailtags to obtain the URL of the user's avatar.

IncommentListWithin the loop, we can call the user of each commentuserDetailTags:

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

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

Interactive features for comments (reply and like)

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

  • Reply functionIncommentListofitemIf, in Chinese,item.ParentThere is, which means this is a reply comment, you can display the content of the replied comment. The comment submission form can pass through