EMLOG文章分页Ajax无限加载

·
2017-9-7

看到很多其他的博客程序都有分页加载功能,我一直想给自己的博客加上这个功能,但是一直没有找到em的先例。前几天在舍力博客中看到这么篇文章《EMlog实现分页Ajax无限加载功能:jquery.ias.js》,但是文章有一些条例不太清楚,我就以官网默认模板给各位疏通一下思路吧。

首先要用到jquery.ias.min.js、jquery.js(下载地址:https://pan.baidu.com/s/1jImlHL8

<script src="目录地址/jquery.js" type="text/javascript"></script>
<script src="目录地址/jquery.ias.min.js" type="text/javascript"></script>

我们要在模板的module.php文件加上自定义分页函数

<?php 
//blog:自定义分页函数 
function my_page($count, $perlogs, $page, $url, $anchor = '') { 
  $pnums = @ceil($count / $perlogs); 
  $re = ''; 
  $urlHome = preg_replace("|[?&/][^./?&=]*page[=/-]|", "", $url); 
  if($page > 1) { 
    $i = $page - 1; 
    $re = " <a href='".$url.$i."'>上页</a> " . $re; 
  } 
  if($page < $pnums) { 
    $i = $page + 1; 
    $re .= " <a id='fynext' href='".$url.$i."'>下页</a> "; 
  } 
  return $re; 
} 
?>

默认模板在log_list.php需要改2个地方

找到代码

<?php 
  if (!empty($logs)):
  foreach($logs as $value): 
?>

后面加入

<div class="nrform">

然后在代码

<?php 
 endforeach;
 else:
?>

前面加入代码

</div>

log_list.php中的<?php echo $page_url;?>改成

<?php  
 $page_loglist = my_page($lognum, $index_lognum, $page, $pageurl); 
 echo $page_loglist; 
?>

改完在footer.php或者其他的文件的</body>前加上以下代码

<script>
 var ias = $.ias({
 container: "#contentleft", //包含所有文章的元素
 item: ".nrform", //文章元素
 pagination: "#pagenavi", //分页元素
 next: "#pagenavi a#fynext", //下一页元素
});
ias.extension(new IASTriggerExtension({
 text: '<div class="gengduo">点击查看更多内容</div>', //此选项为需要点击时的文字
 offset: 2, //设置此项后,到 offset+1 页之后需要手动点击才能加载,取消此项则一直为无限加载
}));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({
 text: '<div class="gengduo">已经是全部内容了</div>', // 加载完成时的提示
}));
</script>

就是上述操作了,我只是加一点小方法解决一下舍力方法中的一些小瑕疵,原文地址在上面有提到,就这样吧,我忙了!

author
已有 0 条评论