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:
- Comment Document ID
archiveId
archiveId
for the specified document ID; - Comments sort
order
order
You can specify the displayed sorting rules, and support sorting according to id orderorder="id desc"
, sort by id flashbackorder="id desc"
; - Display quantity
limit
List of quantities, e.g.limit="10"
Only 10 items will be displayed.limit
When it is not a paging list, supportoffset
Mode, that is,
Separation mode, if you want to get 10 pieces of data from item 2, you can set it tolimit="2,10"
; - List Type
type
type
Supports listing by page and list. The default value is list, iftype="page"
Available in the future Pagination tagpagination
To organize pagination display{% pagination pages with show="5" %}
. - Site ID
siteId
siteId
Generally, 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 itsiteId
To implement the data calling the specified site.
comments is an array object, so it needs to be usedfor
Loop to output
item is a variable in the for loop body. The available fields are:
- Comment ID
Id
- Type Content ID
ArchiveId
- username
UserName
- User ID
UserId
- User IP
Ip
- Number of likes
VoteCount
- Comment content
Content
- Previous Comment ID
ParentId
- Review status
Status
Status = 1 means the review is passed, status = 0 is under review, do not display it - The object data of the previous comment
Parent
Parent contains the full item of the previous comment, the fields and comment item are the same - Add time
CreatedTime
Time 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 form form, and the address received by the submission background is:/comment/publish
. The fields that need to be submitted are
Fields | Is it required | illustrate |
---|---|---|
archive_id | yes | Corresponding document ID |
user_name | yes | Comment username |
content | yes | Comment content |
parent_id | no | The superior comment ID, when replying to a comment, you must bring it with you to create 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, and like it is submitted using the form form. The background receiving address of the like 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);
}
});
});