Comment tag list

Description: Comments list and comment paging list used to obtain documents

How to use:{% commentList 变量名称 with archiveId="1" type="page|list" %}If variables are defined as comments{% commentList comments with archiveId="1" type="page" %}...{% endcommentList %}

The supported parameters of commentList are:

  • Document Review IDarchiveId archiveIdFor the specified document ID;
  • Comments sortorder orderYou can specify the display sorting rule, supporting ascending order sorting based on idorder="id desc", and descending order sorting by idorder="id desc";
  • Display quantitylimitList of quantities, e.g.limit="10"It will only display 10 entries,limitWhen it is not a paging list, supportoffsetMode, that is,Separator mode, if you want to start from the 2nd entry and get 10 entries, you can set it tolimit="2,10";
  • List Typetype typeSupports listing in page or list mode. The default value is list, iftype="page"Available in the future Pagination tagpaginationTo organize pagination display{% pagination pages with show="5" %}.
  • Site IDsiteId siteIdGenerally, there is no need to fill in it. If you use the background multi-site management to create multiple sites and want to call data from other sites, you can specify itsiteIdTo implement the data calling the specified site.

comments is an array object, so 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
  • Number of likesVoteCount
  • Comment contentContent
  • Parent comment IDParentId
  • Review statusStatusStatus = 1 means the review is passed, status = 0 is under review, do not display it
  • The object data of the previous commentParentParent contains the complete item of the superior comment, fields are the same as the comment item
  • Add timeCreatedTimeTime stamp, need to use formatted timestamps as date format{{stampToDate(item.CreatedTime, "2006-01-02")}}

General Comments 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 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 the form, and the receiving address of the background is:./comment/publish. The fields that need to be submitted are

Fields Is it required illustrate
archive_id yes The corresponding document ID
user_name yes Comment username
content yes Comment content
parent_id no Parent comment ID, it needs to be included when replying to a specific comment in order to establish a connection
Return no After submission, specify the format returned by the backend, and the optional values ​​are:html/json, default to 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 the comment content

You can like the content of a comment, liking uses a form submission, and the back-end receiving address for the liking submission is:/comment/praise. The fields that need to be submitted for like are:

Fields Is it required illustrate
id yes Comment Content ID

Comments and likes only support data returning json format, so you need to use js post to submit it.

Sample 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);
    },
  });
});