Comment label list - AnqiCMS(AnqiCMS)

Description: Used to get the document comment list, comment pagination list

Usage:{% commentList 变量名称 with archiveId="1" type="page|list" %}If the variable is defined as comments{% commentList comments with archiveId="1" type="page" %}...{% endcommentList %}

The parameters supported by commentList are:

Review Document IDarchiveId archiveIdFor the specified document ID;
Comment Sortingorder orderYou can specify the display sorting rules, supporting ascending sorting by idorder="id desc"and descending sorting by idorder="id desc";
Show QuantitylimitList of quantities, likelimit="10"Then only 10 items will be displayed,limitSupports pagination mode when it is not a pagination listoffsetThat is to say,,Mode of separation, if you want to start from the 2nd item and get 10 items, you can set it tolimit="2,10";
List typetype typeSupports listing by page or list. The default value is list, iftype="page"Subsequent available pagination tagspaginationTo organize pagination display{% pagination pages with show="5" %}.
Site IDsiteId siteIdGenerally, it is not necessary to fill in. If you have created multiple sites using the multi-site management on the backend and want to call data from other sites, you can do so by specifyingsiteIdTo implement the call to data from a specified site.

comments is an array object, therefore it needs to useforin a loop to output

item is the variable within the for loop, available fields include:

Comment IDId
Type content IDArchiveId
UsernameUserName
User IDUserId
User IPIp
Like countVoteCount
Comment contentContent
Parent Comment IDParentId
Review StatusStatusStatus = 1 indicates review passed, status = 0 when in review, do not display
The object data of the parent commentParentThe parent includes the complete item of the parent comment, with the same fields as the comment item
Add timeCreatedTimeTimestamp, needs to format the timestamp to date format{{stampToDate(item.CreatedTime, "2006-01-02")}}

Routine comment list

{# list 列表展示 #}
<div>
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
      <div>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %}
        <span>回复</span>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.Parent.UserName|truncatechars:6}}
          {% else %}
          {{item.Parent.UserName}}
          {% endif %}
        </span>
        {% endif %}
        <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
      </div>
      <div>
        {% if item.Parent %}
        <blockquote>
          {% if item.Parent.Status != 1 %}
          该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
          {% else %}
          {{item.Parent.Content|truncatechars:100}}
          {% endif %}
        </blockquote>
        {% endif %}
        {% if item.Status != 1 %}
          该内容正在审核中：{{item.Content|truncatechars:9}}
        {% else %}
        {{item.Content}}
        {% endif %}
      </div>
      <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="item" data-id=reply>回复</a>
      </div>
    </div>
    {% endfor %}
{% endcommentList %}
</div>

Page display of comment list

{# page 分页列表展示 #}
<div>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
    <div>
      <div>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %}
        <span>回复</span>
        <span>
          {% if item.Status != 1 %}
          审核中：{{item.Parent.UserName|truncatechars:6}}
          {% else %}
          {{item.Parent.UserName}}
          {% endif %}
        </span>
        {% endif %}
        <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
      </div>
      <div>
        {% if item.Parent %}
        <blockquote>
          {% if item.Parent.Status != 1 %}
          该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
          {% else %}
          {{item.Parent.Content|truncatechars:100}}
          {% endif %}
        </blockquote>
        {% endif %}
        {% if item.Status != 1 %}
          该内容正在审核中：{{item.Content|truncatechars:9}}
        {% else %}
        {{item.Content}}
        {% endif %}
      </div>
      <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="item" data-id=reply>回复</a>
      </div>
    </div>
    {% endfor %}
{% endcommentList %}
</div>

<div>
    {% pagination pages with show="5" %}
    <ul>
        <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
        <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
        {% if pages.PrevPage %}
            <li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
        {% endif %}
        {% for item in pages.Pages %}
            <li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
        {% if pages.NextPage %}
            <li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
        {% endif %}
        <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
    </ul>
    {% endpagination %}
</div>

Comment form submission

Comments are submitted using a form. The backend receiving address is:/comment/publishThe fields to be submitted are:

Field	Is Required	Description
archive_id	Yes	Corresponding Document ID
user_name	Yes	Comment Username
content	Yes	Comment content
parent_id	No	Parent comment ID, it must be included when replying to a specific comment to establish the association
return	No	Specify the format of the backend return after submission, optional values include:`html`/`json`Default is html

Form code example

<form method="post" action="/comment/publish">
  <input type="hidden" name="return" value="html">
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <div>
    <label>用户名</label>
    <div>
      <input type="text" name="user_name" required lay-verify="required" placeholder="请填写您的昵称" autocomplete="off">
    </div>
  </div>
  <div>
    <label>评论内容</label>
    <div>
      <textarea name="content" placeholder="" id="comment-content-field" rows="5"></textarea>
    </div>
  </div>
  <div>
    <div>
      <button type="submit">提交评论</button>
      <button type="reset">重置</button>
    </div>
  </div>
</form>

Like comment content

Can like the content of a comment, likes are submitted using a form, and the backend receiving address is:/comment/praiseThe fields that need to be submitted for liking are:

Field	Is Required	Description
id	Yes	Comment content ID

The comment like only supports returning format data, so it needs to be submitted using js post.

Example Code

<div class="comment-control">
  <a class="item vote-comment" data-id="praise" data-id="{{item.Id}}">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
</div>

$(".vote-comment").click(function (e) {
  let that = $(this);
  let commentId = $(this).data("id");

  //赞
  $.ajax({
    url: "/comment/praise",
    method: "post",
    data: { id: commentId },
    dataType: "json",
    success: function (res) {
      if (res.code === 0) {
        alert(res.msg);
        that.find(".vote-count").text(res.data.vote_count);
      } else {
        alert(res.msg);
      }
    },
    error: function (err) {
      alert(res.msg);
    },
  });
});