How does Anqi CMS display the website visitor's comment list and its reply relationship?

When building and maintaining an active website, visitor interaction is a crucial element.The comment system not only enhances the discussion热度 of website content, strengthens user stickiness, but also brings new content to the website and has a positive impact on search engine optimization (SEO).AnQiCMS (AnQiCMS) fully understands this, and therefore its built-in comment feature provides strong and flexible support for displaying comment lists, handling reply relationships, and managing comments.

Core Feature Overview: Comment Mechanism of Anqi CMS

The AnQi CMS comment feature is aimed at providing a direct user feedback channel for content.In the background management system, you can find the special 'Content Comment Management' module, which allows you to view, review, and reply to all comments in a unified manner.This ensures the quality and compliance of the comment content, providing great convenience for website operators.

When a visitor submits a comment under your website's article, product, or other content page, these comments will enter the review process according to your settings.Once approved, they can be displayed on the front page, together with other comments, forming an interactive communication space.

Displaying the comment list on the front end:commentListMagic of tags

To display visitor comments on the website front-end page, we mainly rely on the powerful template tag system of Anqi CMS incommentListLabel. This label is the core of the comment list display, allowing us to flexibly obtain and render the comment data of specified articles or content.

UsecommentListThe label is very intuitive.You need to specify the content ID of the comment (usually the article ID) and the display style you wish.

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
        <!-- 这里是单条评论的显示逻辑 -->
    {% endfor %}
{% endcommentList %}

In this code block:

• archiveId=archive.IdSpecified to get the comments of the current article (archive) comments.archive.IdIt is the unique identifier of the current article.
• type="list"Means to get comments in list form, not in paginated form. If pagination is needed, you can usetype="page"and combiningpagination.
• limit="6"It limits the number of latest comments displayed each time, you can adjust this value according to the page layout.

commentsA variable is an array object containing multiple comment information, we useforLoop throughcommentseach one in theitemYou can display the detailed information of each comment one by one. Each commentitemincludeId/UserName/Content/CreatedTimesuch fields are enough for you to build a colorful comment display interface

In-depth analysis of reply relationships: The clever presentation of parent-child comments

One of the great charms of the comment system is that it can form a dialogic response chain, and Anqi CMS handles this kind of response relationship quite skillfully. In each comment'sitemIn the object, there is a special field calledParent. ThisParentThe field itself is also a comment object, which stores the complete information of the parent comment that the current comment is replying to.

Utilizeitem.Parentfield, we can easily implement nested comments in the template, thereby clearly displaying the reply relationship. A common practice is, when detected thatitem.ParentWhen present, the content of the current comment is indented, and part of the parent comment is quoted to form a visual sense of hierarchy, as follows:

    {% for item in comments %}
    <div class="comment-item">
      <div class="comment-header">
        <span>{{item.UserName}}</span>
        {% if item.Parent %}
        <span>回复</span>
        <span class="reply-to-user">{{item.Parent.UserName}}</span>
        {% endif %}
        <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
      </div>
      <div class="comment-content">
        {% if item.Parent %}
        <blockquote class="reply-blockquote">
          {{item.Parent.Content|truncatechars:100}} <!-- 引用父级评论，并截断显示 -->
        </blockquote>
        {% endif %}
        {{item.Content}}
      </div>
      <!-- 评论点赞和回复按钮等互动元素 -->
      <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="item" data-action="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="item" data-action="reply">回复</a>
      </div>
    </div>
    {% endfor %}

Through such a structure, visitors can clearly see who replied to whom, greatly enhancing the reading experience and interactive atmosphere.

Comment status and user experience: considerations of the review mechanism.

To maintain a healthy environment in the comment area, Anqi CMS is built-in with a comment review mechanism. Each commentitemhasStatusField:Status = 1indicating that the comment has passed the review and can be publicly displayed;Status = 0This indicates that the comment is waiting for review.

When displaying on the front end, you can selectively display comments based on this status field.For example, you can display a "Under review" prompt for unreviewed comments, or only fully display their content after they have passed review, to ensure the quality of the website's content.

      <div class="comment-content">
        {% if item.Status != 1 %}
          <p class="pending-review">该评论正在审核中，请耐心等待。</p>
          {% if item.Parent %}<blockquote class="reply-blockquote">{{item.Parent.Content|truncatechars:100}}</blockquote>{% endif %}
          <p>{{item.Content|truncatechars:30}}</p> <!-- 未审核评论可选择部分显示或不显示 -->
        {% else %}
          {% if item.Parent %}<blockquote class="reply-blockquote">{{item.Parent.Content|truncatechars:100}}</blockquote>{% endif %}
          <p>{{item.Content}}</p>
        {% endif %}
      </div>

Build the comment submission form: interaction begins here.

Visitors being able to submit comments is the foundation for the operation of a comment system. Anqi CMS provides a standard comment submission interface/comment/publish. Build a simple HTML form to ensure that the following key fields are included to implement the comment submission feature:

• archive_id: The ID of the content to which the current comment belongs, which is a required field.
• user_name: The nickname of the reviewer, which is also a required item.
• content: The specific content of the comment, which is required.
• parent_id: If this is a reply comment, the ID of the parent comment needs to be included. The default is 0, indicating the main comment.
• returnOptional parameter, used to specify the data format returned by the backend after submission, which can behtmlorjson.

Form example:

<form method="post" action="/comment/publish">
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <input type="hidden" name="parent_id" value="0" id="parent-comment-id"> <!-- 默认0，用于回复时JS修改 -->
  <div>
    <label for="comment-username">您的昵称</label>
    <input type="text" id="comment-username" name="user_name" required placeholder="请输入您的昵称">
  </div>
  <div>
    <label for="comment-content">评论内容</label>
    <textarea id="comment-content" name="content" required rows="5" placeholder="发表您的看法..."></textarea>
  </div>
  <!-- 验证码区域，如果开启了验证码功能 -->
  <div id="captcha-area">
    <!-- 引入 tag-/anqiapi-other/167.html 中提供的验证码代码 -->
  </div>
  <button type="submit">提交评论</button>
</form>

Please note,parent_idThe field is usually modified dynamically on the front-end via JavaScript, when the user clicks the 'reply' button of a comment, the comment ID is filled into this hidden field to reply to a specific comment.

Enhance Interaction: Comment Liking and CAPTCHA

AnQi CMS also provides additional interactive and security mechanisms:

• Comment Liking: Through sending a POST request to/comment/praisethe interface and carrying the commentidYou can like comments. This is usually implemented through JavaScript asynchronous submission,