话不多说,上代码

一、首先在后台添加字段,文章ID 和 文章名称


文章ID用于文章内容页面判断当前文章是否有留言


文章名称可以用于在右侧卡片位置显示*新留言


在form表单中添加下面两个隐藏的字段提交到后台


<input type="hidden" name="article_id" value="{content:id}">

<input type="hidden" name="article_name" value="{content:title}">

二、判断文章页面是否有留言,有则显示 留言列表 四字,无则显示 还没有评论,快来抢沙发吧!


暂未实现

以下实测有BUG

{pboot:message num=1 page=0}

{pboot:if('message:article_id'=='{content:id}')}

<div class="message-title">评论列表</div>

{else}

<div class="empty-prompt">

<span class="prompt-null">还没有评论,快来抢沙发吧!</span>

</div>

{/pboot:if}

{/pboot:message}

三、调用留言列表,通过判断留言里的文章ID 是否等于当前文章ID 来实现文章留言显示


且只显示当前文章的留言

{pboot:message num=50}

{pboot:if('[message:article_id]'=='{content:id}')}

<div class="message-num">

  <div class="ask">

    <p><span><img src="{pboot:sitetplpath}/images/gif/smilemessage:i.gif" alt=""></span><span>[message:contacts]</span> <span>[message:askdate]</span></p>

    <p>[message:content]</p>

  </div>

  {pboot:2if('[message:recontent]'!='')}

  <div class="reply">

    <p><span><img src="{pboot:sitetplpath}/images/gif/smile20.gif" alt=""></span><span>BBQ个人博客</span> <span>[message:replydate]</span></p>

    <p>[message:recontent]</p>

  </div>

  {/pboot:2if}

</div>

{/pboot:if}

{/pboot:message}

四、使用前端分页js文件实现文章的留言分页功能


文件内容见附件,下载后引用到jquery的js文件下方即可


然后通过js和id进行调用,前端分页不需要判断列表是否有留言,循环出留言内容后自动显示分页和数字条。

给ul列表添加对于的id就可以实现前端分页功能

<script src="/blog/blog/js/jPages.js"></script>

<script type="text/javascript">

$(document).ready(function () {

  // 动态分页

  $(function(){

    $(".page-pagination").jPages({

      containerID: "page-num",// (ID要和ul的ID一样)

      previous: "上一页",

      next: "下一页",

      startPage: 1,

      perPage: 4,  //每页显示多少个li

    });

  });

});

</script>