As an experienced website operation expert, I fully understand how to effectively display user comments in content management, especially comments with a reply structure, which is crucial for enhancing user interaction and website activity.AnQiCMS (AnQiCMS) leverages its powerful template engine and flexible data tags to make this requirement accessible.commentListIn the tag, cleverly judge whether the comment has a parent comment, and elegantly present a clear reply structure.

Cleverly utilize the AnQiCMS comment mechanism to build an interactive experience.

AnQiCMS is a modern content management system based on the Go programming language, which not only provides efficient and secure content publishing capabilities but also offers us comprehensive user interaction features, with the comment system being a major highlight.It not only allows users to comment on content, but also supports replies between comments, thus forming a natural conversation chain.commentListThe data structure returned by the label, especially the one inParentfield.

Firstly, we know that AnQiCMS's template system uses a syntax similar to Django's template engine, which means we can use{% ... %}to write logic, with{{ ... }}Output the variable. We usually use it for comment lists.commentListThis powerful tag.

In the document detail page, to get the comments related to the current document,commentListTags are our first choice. It acceptsarchiveId(the current document ID),type(list type, can belistorpage)、limitThe display number and other parameters. For example, on an article detail page, we would usually call the comment list in this way:

{% commentList comments with archiveId=archive.Id type="list" limit="10" %}
    {# 循环遍历每一条评论 #}
    {% for item in comments %}
        {# 在这里处理单条评论的显示逻辑 #}
    {% endfor %}
{% endcommentList %}

here,commentsThe variable will carry all the comment data that meets the conditions, anditemRepresents each independent comment in the loop.

ParentField: reveals the key to the relationship between comment replies

Every time we loop throughcommentsin the list ofitemAt that time, AnQiCMS provided several key fields to judge and display the hierarchical relationship of comments:

  • item.Id: The unique identifier of the current comment.
  • item.UserName: The username of the commentor.
  • item.Content: The specific content of the comment.
  • item.CreatedTime: Comment posting timestamp.
  • item.ParentId: If the current comment is a reply to another comment, this field will store the ID of the parent comment; if it is 0, then it means this is a top-level comment.
  • item.ParentThis is the field we will focus on today! It is a complete parent comment object, containing all the information of the parent comment, such asitem.Parent.UserName/item.Parent.Content/item.Parent.CreatedTimeetc. Ifitem.ParentIf it exists (i.e., it is not empty), then the currentitemmust be a reply comment.

Exactlyitem.ParentThis field provides the most direct and convenient way for us to build the reply structure.

Build the comment reply structure: step by step implementation

Now that we have the theoretical foundation, we can start building an elegant structure for comment replies.The core idea is: when looping through each comment, first determine whether it is a reply comment.If so, the information of the parent comment will be displayed additionally, and it will be visually distinguished by style.

Let's see the specific template code example:

`twig

{# 使用 commentList 标签获取评论数据 #}
{% commentList comments with archiveId=archive.Id type="list" limit="10" %}
    {% for item in comments %}
    {# 为每条评论添加一个基础容器，并根据是否有父级评论添加样式类 #}
    <div class="comment-item {% if item.Parent %}comment-reply{% endif %}">
      <div class="comment-header">
        <span class="comment-username">
          {# 判断评论是否通过审核，如果未通过则显示“审核中” #}
          {% if item.Status != 1 %}
          （审核中）{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>

        {# 如果存在父级评论（即当前评论是回复） #}
        {% if item.Parent %}
        <span class="reply-indicator">回复</span>
        <span class="parent-username">
          {# 显示父级评论的用户名，同样需要判断父级评论是否通过审核 #}
          {% 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 %}
          原评论：<span class="moderating-text">（内容审核中）{{item.Parent.Content|truncatechars:60}}</span>
          {% else %}
          原评论：{{item.Parent.Content|truncatechars:100}}
          {% endif %}
        </blockquote>
        {% endif %}

        {# 显示当前评论的内容，同样判断是否通过审核 #}
        {% if item.Status != 1 %}
          <span class="moderating-text">（评论审核中）{{item.Content|truncatechars:60}}</span>
        {% else %}
        {{item.Content}}
        {% endif %}
      </div>

      {# 评论操作区域，如点赞、回复等 #}
      <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="action-item" data-action="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="action-item" data-action="reply">回复</a>
      </div>
    </div>
    {% end