使用infinite-scroll实现Ghost博文列表的滚动加载

Ghost博客系统默认提供的博文列表为传统的翻页方式(通过点击上一页、下一页等按钮来切换),随着移动客户端的发展,瀑布流式的滚动加载方式得到广泛应用,有效地提高了用户浏览信息的流畅度。下面详述如何通过Infinite Scroll来改造Ghost博文列表的翻页效果。

Infinite Scroll

Infinite Scroll顾名思义:无限滚动,也称为自动分页、滚动分页和无限分页,是基于jquery的一个插件。可以用来实现滚动页面的时候加载下一页的内容。

infinite-scroll项目地址

实现步骤

  • jquery.infinitescroll.min.js拷贝到你的主题目录下
  • 在循环获取posts列表的页面上引入jquery.infinitescroll.min.js文件

注意:jquery.infinitescroll.min.js必须在jquery引入之后


  • 尝试一下最简配置,若我们的页面结构如下
{{#foreach posts}}
    
{{!有封面的时候展示封面}} {{#if image}} {{/if}}

{{{title}}}

{{excerpt characters="140"}} »

{{#if author.image}}{{author.name}}{{/if}} {{author}} {{tags prefix=" "}}
{{/foreach}}
  • 我们可以通过如下代码将原来点击上一页、下一页的翻页模式变成滚动翻页


使用解析

  • 通过id选择器$('#posts-content')选中post列表的循环展示区域,后续加载的内容会被append到这个节点之下
  • navSelector参数,用来选中翻页模块的html位置,如上配置即选中了nav标签class为pagination的元素,框架会将这部分内容隐藏(隐藏原来的翻页模块)
  • nextSelector参数,标出下一页的请求链接,框架根据此获取下一页的请求以发起ajax请求获取下一页的html内容
  • itemSelector参数,在发起了下一页请求之后,通过这个参数的配置来截取下一页html内容中post部分来填充到navSelector选中位置的最后

进阶配置

在完成了上面操作之后,还可以做一些进阶的配置,比如修改加载中的文字描述,没有内容之后的提示内容等等。

下面是本站使用的配置,供参考。


更多参数配置可参见:infinite-scroll

本博客主题项目地址

你可能感兴趣的:(使用infinite-scroll实现Ghost博文列表的滚动加载)