PBOOCMS如何制作文章评论。
时间:2019-08-23 来源:本站
手先声明一下,今天是2019年8月23日,PB目前暂时无会员,所以就没有文章评论功能。
但是官方已经确认下个月发布会员功能,到时候应该有文章评论功能了。
请看本博客下面的留言功能。由于开启了缓存机制,所以留言后,大概15分钟才会更新出来。
另外需要注意的是,如果不是默认的确表单,就使用:form标签,而不是:message标签了。这个很重要。
本文只是介绍在目前状态下,使用留言功能制作评论功能。不喜匆喷。
弟一步:后台给留言表单添加一个自定义字段,比如说:contentid
第二步:前端样式我就不说了。就拿官方模板作演示。直接复制官方留言文件中的代码。然后作如下的修改。
{pboot:if({page:rows}>0)}
<h5 class="border-bottom border-info pb-2"><i class="fa fa-sliders" aria-hidden="true"></i> 留言记录</h5>
{/pboot:if}
<!-- 留言记录 -->
{pboot:message num=2}
{pboot:if('[message:contentid]'=='{content:id}')}<!-- 增加 -->
<div class="media border-bottom pb-3 pt-3">
<img class="mr-3" src="{pboot:sitetplpath}/images/user.png" height="25">
<div class="media-body">
<h5 class="mt-0">[message:contacts]:</h5>
<p>[message:content]</p>
<p>
<span class="badge badge-light text-secondary font-weight-normal">[message:mobile substr=1,3]****[message:mobile substr=8]</span>
<span class="badge badge-light text-secondary font-weight-normal">[message:os]</span>
<span class="badge badge-light text-secondary font-weight-normal">[message:bs]</span>
<span class="badge badge-light text-secondary font-weight-normal">[message:askdate]</span>
</p>
<div class="media mt-3 border-top-dashed pt-3">
<img class="mr-3" src="{pboot:sitetplpath}/images/user.png" height="25">
<div class="media-body">
<h5 class="mt-0">管理员回复:</h5>
<p>[message:recontent]</p>
<p><span class="badge badge-light text-secondary font-weight-normal">[message:replydate]</span></p>
</div>
</div>
</div>
</div>
{/pboot:if}<!-- 增加 -->
{/pboot:message}
<!-- 分页 -->
{pboot:if({page:rows}>0)}
<nav aria-label="page navigation" class="my-4">
<div class="pagination justify-content-center">
<a class="page-item page-link" href="{page:index}">手页</a>
<a class="page-item page-link" href="{page:pre}">上一页</a>
{page:numbar}<!-- 数字条,小屏幕时自动隐藏-->
<a class="page-item page-link" href="{page:next}">下一页</a>
<a class="page-item page-link" href="{page:last}">尾页</a>
</div>
</nav>
{/pboot:if}
<!-- 留言表单 -->
<div class="row">
<div class="col-lg-3"></div>
<div class="col-12 col-lg-6">
<form class="my-4" onsubmit="return submsg(this);">
<div class="form-group">
<label for="contacts">联系人</label>
<div>
<input type="text" name="contacts" required id="contacts" class="form-control" placeholder="请输入联系人">
</div>
</div>
<div class="form-group">
<label for="mobile">手 机</label>
<div>
<input type="text" name="mobile" required id="mobile" class="form-control" placeholder="请输入联系人手机">
</div>
</div>
<div class="form-group">
<label for="content" >内 容</label>
<div>
<textarea name="content" id="content" class="form-control" placeholder="请输入留言内容"></textarea>
</div>
</div>
<!-----------新增------------->
<div class="form-group">
<div>
<input type="hidden" name="contentid" required id="contentid" class="form-control" placeholder="{content:id}" value="{content:id}">
</div>
</div>
{if([$config.message_check_code])}
<div class="form-group">
<label for="checkcode">验证码</label>
<div class="row">
<div class="col-6">
<input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码">
</div>
<div class="col-6">
<img title="点击刷新" style="height:33px;" src="{pboot:checkcode}" onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);" />
</div>
</div>
</div>
{/if}
<div class="form-group">
<button type="submit" class="btn btn-info mb-2">提交留言</button>
</div>
</form>
</div>
<div class="col-lg-3"></div>
</div>
</div>
<script>
//ajax提交留言
function submsg(obj){
var url='{pboot:msgaction}';
var contacts=$(obj).find("#contacts").val();
var mobile=$(obj).find("#mobile").val();
var content=$(obj).find("#content").val();
var checkcode=$(obj).find("#checkcode").val();
var contentid=$(obj).find("#contentid").val(); //新增
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: {
contacts: contacts,
mobile: mobile,
content: content,
checkcode: checkcode,
contentid: contentid //新增
},
success: function (response, status) {
if(response.code){
alert("谢谢您的反馈,我们会尽快联系您!");
$(obj)[0].reset();
}else{
alert(response.data);
}
},
error:function(xhr,status,error){
alert('返回数据异常!');
}
});
return false;
}
</script>