As a senior website operations expert, we understand that the activity of the website comment section and the quality of the content are crucial for user engagement and brand image building.AnQiCMS provides flexible control in the aspect of comment management, among which the distinction display of comment status is a very practical feature in content operation.commentListLabeling comments, finely distinguishing and displaying the comment status of “Passed Review” and “Pending Review”.

Understanding the comment status.StatusField

In Anqi CMS, each user comment is accompanied by aStatusField, this field is the unique identifier of its review status. Usually,StatusThe value of this field is:

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

For content operations personnel, clearly identifying and controlling these states not only effectively maintains the quality of website content, prevents the spread of inappropriate information, but also communicates the website's responsible attitude towards comments.

commentListLabel basic review

In the template system of AnQi CMS,commentListLabels are important tools for retrieving and displaying comment data in a loop. They allow us to specify which document (archiveId) comments to retrieve, in a list (type="list") or paginated (type="page"）的形式展示。当我们使用 English 的语法时，{% commentList comments with ... %}这样的语法时，comments变量就会成为一个包含了多条评论对象的数组。

在循环遍历这个commentsWhen an array, each comment's data will be assigned to aitemvariable (or any custom loop variable you define). ThisitemThe object includes, in addition to common information such as comment ID, username, and comment content, what we are focusing on todayStatusfield.

Implementation of distinguishing the display of comment review status

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

According to the default logic of AnQi CMS,Status = 1It is approved, while other values (usually0) are pending approval. We can identify the pending comments by judgmentitem.Status != 1and display different content or styles accordingly.

For example, you may want:

  1. Comments approved for review: Display the comment content, username, time, etc. normally.
  2. Comments pending review：Display a "This comment is under review" prompt, or only display part of the information, such as the username, but not the comment content, or even completely hide the comment.

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

Detailed code example and analysis

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 layerdivThe style control: In the comment wrapperdivwe addedcomment-itemthe class, 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 condition judgment is crucial. If the comment status is not1English translation: （i.e., pending review），then display the prefix 'Pending Review: '" and usetruncatechars:6The filter truncates usernames to protect user privacy.
    • {% else %}: If the comment status is1（Approved），then the username will be displayed normally.
  3. Reply to comments.ParentObject: Anqi CMS allows comment replies, throughitem.Parentyou can access the information of the parent comments. Here we also haveitem.Parent.StatusJudgment was made to ensure that the status of the referenced parent comment is also properly handled.
  4. Logic of displaying comment content:
    • For comments awaiting review, we no longer display the original content of the comment, but instead 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 users.
    • For comments that have passed the review, we display them directly.item.Content.
  5. Comment operation button：Likes, replies, and other interactive features are usually only open to reviewed comments, therefore we use{% if item.Status == 1 %}to wrap these operation buttons.
  6. emptytags：When there are no comments,{% empty %}It will display the prompt 'No comments yet, come and share your thoughts!'.
  7. stampToDateFilter: used to format timestamps into readable dates and times.
  8. truncatecharsFilterUsed to truncate long strings when displaying usernames or referencing parent comment content to keep the page neat.

Through the above method, you can flexibly control the display of comments, ensuring the quality of the website content while enhancing user experience and operational efficiency.

Common Questions (FAQ)

**1. Q