让Typecho无限滚动加载 - 修改本主题

samuel 2019-10-12 AM 62℃ 0条

据统计,据媒体报道,据各种经验之谈:用户不喜欢点击,更爱滚动!所以,之前挺流行的文章分页没有了,沿用了几百年的“下一页”也被无限load取代。瀑布流和Twitter更是推动了无限load的普及。

配合typecho 添加侧边栏滑动,效果更好。

这里介绍一个jQuery插件:Infinite AJAX Scroll,通过这个插件能快速实现无限滚动翻页。因为是jQuery所以到处都能用,这里我们以Typecho作为例子。

第一步:

下载Infinite AJAX Scroll,放到根目录js文件夹中。因为是jQuery插件,我们还要先连上jQuery。打开header.php页面,插入如下代码:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="你的网站/js/jquery-ias.min.js"></script>

第二步

更改分页代码

<?php $this->pageNav('«', '»', 1, '...', array('wrapTag' => 'div', 'wrapClass' => 'layui-laypage layui-laypage-molv', 'itemTag' => '', 'currentClass' => 'current', )); ?>

改为

<?php $this->pageLink('下一页','next'); ?>

第三步

把下面这段代码插在步骤一代码的后面即可

<script type="text/javascript">
var ias = jQuery.ias({
container:  '.layui-col-md9',    //大容器
item:       '.title-article',    //循环容器
pagination: '.page-navigator',    //分页容器
next:       '.next'    //下一页的class
});
 ias.extension(new IASTriggerExtension({
        text: '加载更多', //此选项为需要点击时的文字
        offset: 50, //load多少页后显示加载更多按钮
    }));
ias.extension(new IASSpinnerExtension());    //加载时的图片
ias.extension(new IASNoneLeftExtension({text: "已经没有文章了"}));    //到底后显示的文字
</script>
标签: 无限滚动加载

评论啦~