As an experienced website operations expert, we know that the activity and content quality of the website's comment section are crucial for user engagement and brand image building.AnQiCMS (AnQiCMS) provides flexible control in the comment management aspect, where the distinction display of comment status is a very practical function in content operation.Today, let's delve into how to make use ofcommentListWhen labeling, refine the distinction and display the comment status of "Approved" and "Pending Review".

Understand the comment status.Statusfield

In AnQi CMS, every user comment has one.StatusField, this field is the unique identifier for its review status. Usually,StatusThe value of the field is:

  • Status = 1: Indicates that this comment has passed the review and can be displayed publicly.
  • Status = 0(or any value other than 1): This comment is pending moderation. According to the operational strategy, pending comments may not be displayed directly on the frontend or may need to be explicitly marked as 'pending moderation'.

For content operators, clearly identifying and controlling these states can not only effectively maintain the quality of website content, prevent the spread of inappropriate information, but also convey the website's responsible attitude towards comments.

commentListLabel basics review

In the AnQi CMS template system,commentListLabels are an important tool for fetching and displaying comment data in a loop. They allow us to specify which documentarchiveId) comments, in a listtype="list") or paginationtype="page"The form of display. When we use{% commentList comments with ... %}this syntax,commentsthe variable will become an array containing multiple comment objects.

While looping through thiscommentsWhen an array, each comment's data will be assigned to aitemvariable (or any other loop variable you define). ThisitemIn the object, in addition to the common information such as comment ID, username, and comment content, it also includes what we are focusing on todayStatusfield.

Implementation of distinguishing the display status of comment review

To distinguish and display comments marked as 'Approved' and 'Pending Review', the core lies in using conditional judgments of template language ({% if %}tags) for detectionitem.Statusthe value.

According to the default logic of Anqi CMS,Status = 1Is approved, while other values (usually0) are pending review. We can determineitem.Status != 1to identify pending reviews and display different content or styles accordingly.

For example, you might want:

  1. Approved comments: Normally display comment content, username, time, etc.
  2. Pending comments: Display a prompt indicating that the comment is being reviewed, or only display partial information such as the username, but not the comment content, or even completely hide the comment.

To balance user experience and management needs, we usually choose to display a clear prompt at the position of comments waiting for review, so that users know that their comments have been received but are still being processed.

Detailed code example and explanation

Let's demonstrate how to implement this feature through a specific template code snippet. Suppose we are displaying a comment list on a document detail page:

{# 假设archive.Id是当前文档的ID，且已通过archiveDetail等标签获取 #}
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
    <div class="comment-item {% if item.Status != 1 %}comment-pending{% else %}comment-approved{% endif %}">
      <div class="comment-header">
        <span class="user-name">
          {% if item.Status != 1 %}
          <!-- 如果是待审核评论，显示“审核中”并截断用户名 -->
          待审核：{{item.UserName|truncatechars:6}}
          {% else %}
          <!-- 审核通过的评论，正常显示用户名 -->
          {{item.UserName}}
          {% endif %}
        </span>

        {% if item.Parent %}
        <!-- 如果是回复评论，显示回复对象 -->
        <span class="reply-indicator">回复</span>
        <span class="parent-user-name">
          {% if item.Parent.Status != 1 %}
          <!-- 如果被回复的评论也待审核，同样提示 -->
          待审核：{{item.Parent.UserName|truncatechars:6}}
          {% else %}
          {{item.Parent.UserName}}
          {% endif %}
        </span>
        {% endif %}
        <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
      </div>

      <div class="comment-content">
        {% if item.Parent %}
        <!-- 如果是回复评论，可以引用上级评论内容 -->
        <blockquote class="parent-comment-quote">
          {% if item.Parent.Status != 1 %}
          <!-- 如果被回复的评论待审核，显示通用提示 -->
          被回复内容：该评论正在审核中...
          {% else %}
          {{item.Parent.Content|truncatechars:100}} <!-- 截断显示上级评论内容 -->
          {% endif %}
        </blockquote>
        {% endif %}

        {% if item.Status != 1 %}
          <!-- 待审核评论的主体内容，显示提示信息 -->
          <p class="pending-message">您的评论已提交，正在等待管理员审核。</p>
        {% else %}
          <!-- 审核通过评论的主体内容，正常显示 -->
          <p>{{item.Content}}</p>
        {% endif %}
      </div>

      <div class="comment-actions">
        {% if item.Status == 1 %}
        <!-- 只有审核通过的评论才显示点赞和回复按钮 -->
        <a class="action-btn" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="action-btn" data-id="reply">回复</a>
        {% endif %}
      </div>
    </div>
    {% empty %}
    <p class="no-comments">还没有评论，快来发表您的看法吧！</p>
    {% endfor %}
{% endcommentList %}

{# 分页标签，如果type="page"模式开启分页，则需要这个 #}
{% pagination pages with show="5" %}
    <div class="pagination-controls">
        <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {% if pages.PrevPage %}<a class="page-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>{% endif %}
        {% for page_item in pages.Pages %}<a class="page-link {% if page_item.IsCurrent %}active{% endif %}" href="{{page_item.Link}}">{{page_item.Name}}</a>{% endfor %}
        {% if pages.NextPage %}<a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>{% endif %}
        <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
    </div>
{% endpagination %}

Code analysis:

  1. Outer layerdivStyle control: Wrapped in commentsdivOn, we addedcomment-itemClass, and based onitem.StatusThe value dynamically addedcomment-pendingorcomment-approvedClass. This provides convenience for you to customize the visual effects of comments in different states through CSS.
  2. Username display logic:
    • {% if item.Status != 1 %}: This conditional judgment is crucial. If the comment status is not1(That is, pending review), then display the prefix "Pending review:", and usetruncatechars:6The filter truncates the username to protect user privacy.
    • {% else %}: If the comment status is1(Reviewed and passed), then the username will be displayed normally.
  3. Reply to the commentParentobject: Anqicms allows comment replies, and they are passed throughitem.ParentYou can access the information of the parent comment. Here we also handleitem.Parent.StatusThe judgment was made to ensure that the status of the referenced parent comment is also properly handled.
  4. Comment content display logic:
    • For comments awaiting review, we no longer display the original comment content but use a friendly prompt: 'Your comment has been submitted and is waiting for administrator review.'This protects the quality of the website content and also provides feedback to the user.
    • We display the comments that have been approved for review directly.item.Content.
  5. Comment operation button：Likes, replies, and other interactive features are usually only open to comments that have been approved, so we use{% if item.Status == 1 %}to wrap these operation buttons.
  6. emptyTag：When there are no comments,{% empty %}It will display the prompt 'No comments yet, come and share your views!'.
  7. stampToDateFilter: It is used to format timestamps into readable date and time.
  8. truncatecharsFilter: Used to truncate long strings when displaying usernames or referencing parent comments to keep the page tidy.

By means of the above method, you can flexibly control the display of comments, ensuring the quality of the website content while also improving user experience and operational efficiency.

Frequently Asked Questions (FAQ)

**1. Q