Comment List Label

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:

  • Document Review IDarchiveId archiveIdFor the specified document ID;
  • Comment sortingorder orderCan specify the display sorting rule, supports sorting based on id in ascending orderorder="id desc"Sort by id in descending orderorder="id desc";
  • Show quantitylimitA list of quantities, such aslimit="10"Then only 10 items will be displayed,limitSupport when it is not a paginated listoffsetmode, which is,delimiter mode, if you want to start from the second item and get 10 items, you can set it tolimit="2,10";
  • List typetype typeSupports listing by page, list. The default value is list, iftype="page"Pagination tags can be used laterpaginationTo organize the pagination display{% pagination pages with show="5" %}.
  • Site IDsiteId siteIdGenerally, it is not necessary to fill in, if you use the multi-site management on the backend to create multiple sites and want to call data from other sites, you can specifysiteIdTo call the data of the specified site.

comments is an array object, therefore it needs to be usedforloop to output

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

  • Comment IDId
  • type content IDArchiveId
  • UsernameUserName
  • user IDUserId
  • user IPIp
  • like countVoteCount
  • Comment contentContent
  • parent comment IDParentId
  • review statusStatusStatus = 1 means approved, status = 0 when in review, do not display
  • Data of the object commented by the superiorParentParent contains the complete item of the upper-level comment, the fields are the same as the comment item
  • Add timeCreatedTimeTimestamp, needs to be formatted as a date{{stampToDate(item.CreatedTime, "2006-01-02")}}

Regular 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>

Paginated 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

The comment is submitted using a form, the receiving address of the background is:/comment/publishThe fields to be submitted include:

field Mandatory? Description
archive_id Is The document ID corresponding to
user_name Is The username of the commentor
content Is Comment content
parent_id No Parent comment ID, it needs to be included when replying to a specific comment to establish association
return No After submission, specify the format returned by the backend, the optional values are:html/jsonDefault 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

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

field Mandatory? Description
id Is Comment content ID

Liking comments only supports returning JSON formatted 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);
    },
  });
});