As an experienced website operations expert, I fully understand the importance of the comment system for user interaction and content ecology on the website.In a powerful content management system like AnQiCMS, flexibly controlling the display of comments, especially differentiating based on the review status, is a key link to improve user experience and maintain the quality of website content.commentListTag to judge the comment'sStatusfield, and implement intelligent distinction display.

Review status: Core mechanism of AnQiCMS

In AnQiCMS, every user submitted comment has oneStatus(Status) field, it is like a traffic light, indicating whether this comment has passed the administrator's review.This mechanism is crucial for the security and compliance of website content, as it effectively prevents the direct posting of spam, sensitive words, or inappropriate remarks.

Specifically, incommentListEach item returned by theitem),StatusThe value of the field usually has two types:

  • Status = 1: Indicates that this comment has passed the review and can be displayed normally on the website front page.
  • Status = 0This comment is pending review or has been rejected by the administrator.For the sake of website content quality, such comments should not be fully public or may need to be prompted to users in a special way.

UnderstoodStatusThe meaning of the field, we can provide users with a more refined and friendly comment display experience at the template level.

Skillfully using conditional judgment to achieve differentiated display.

AnQiCMS's template system, similar to the Django template engine syntax, provides powerful conditional judgment capabilities. This means we can easilycommentListiterate over, based onitem.StatusThe value determines how each comment is rendered.

Suppose we are editing the comment list page (usuallycomment/list.htmlFile, as mentioned in the AnQiCMS template directory agreement, the following is a classiccommentListTag usage scenarios, we will add the logic ofStatusjudgment:

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
    <div class="comment-item {% if item.Status != 1 %}comment-pending{% endif %}">
      <div class="comment-meta">
        <span class="user-name">
          {% if item.Status != 1 %}
          <!-- 未审核的评论，可以显示部分信息或提示，同时可以截断用户名称以保护隐私 -->
          待审核用户：{{item.UserName|truncatechars:4}}...
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %}
        <!-- 如果是回复评论，也需要检查父级评论的审核状态 -->
        <span>回复</span>
        <span class="parent-user-name">
          {% if item.Parent.Status != 1 %}
          待审核用户：{{item.Parent.UserName|truncatechars:4}}...
          {% 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 %}
          <p class="pending-message">原评论正在审核中，仅展示部分：{{item.Parent.Content|truncatechars:15}}...</p>
          {% else %}
          {{item.Parent.Content|safe}}
          {% endif %}
        </blockquote>
        {% endif %}
        {% if item.Status != 1 %}
          <p class="pending-message">您的评论正在审核中，请耐心等待。</p>
          <p class="pending-content">（内容部分隐藏或截断：{{item.Content|truncatechars:20}}...）</p>
        {% else %}
          {{item.Content|safe}}
        {% endif %}
      </div>
      <div class="comment-actions">
        <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="item" data-id=reply>回复</a>
      </div>
    </div>
    {% endfor %}
{% empty %}
    <p>暂无评论。</p>
{% endcommentList %}

In the above code example, we adopted the following strategies to achieve distinct display:

  1. Add a special CSS class for unreviewed commentsIndivBy the tag, we use{% if item.Status != 1 %}comment-pending{% endif %}If the comment does not pass the reviewStatusand is not equal to 1, it is set to 0), addcomment-pendingThis CSS class.This way, we can define special styles for such comments in CSS, such as grayscale display, semi-transparent, or add a border hint to distinguish them visually from reviewed comments.
  2. Modify the name of the reviewer: For unreviewed comments, we will prefix the commenter's name with "Pending Review User" and use|truncatechars:4Filter (from AnQiCMS with more filter features) truncates usernames to protect user privacy and implies their status.
  3. Display review prompt informationIn the comment content area, if the comment does not pass the review, we will no longer display the full content directly, but instead replace it with 'Your comment is being reviewed, please wait patiently.'Such a friendly reminder, and it can also truncate the display of original comments to avoid information leakage.
  4. Handle the review status of the parent comment (reply to the comment): Considering that the comment may have a reply relationship,item.Parentthe object also includesStatusfield. In order to maintain the completeness and accuracy of the comment chain, we also judge the parent comment'sStatusto ensure the reply