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

据统计，据媒体报道，据各种经验之谈：用户不喜欢点击，更爱滚动！所以，之前挺流行的文章分页没有了，沿用了几百年的“下一页”也被无限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>