初始加载网页时,文章主题列表是静态的html(可以限制显示数量),由jekyll生成:

<ul class="posts">
{% for post in site.posts limit:page.initItem %}
  <li class="listing-item">
<time datetime="{{ post.date | date:"%Y-%m-%d" }}">{{ post.date | date:"%Y-%m-%d" }}</time>
<a href="{{site.baseurl}}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a>
  </li>{% endfor %}
</ul>

上面的limit:page.initItem限定了列表的项数不超过initItem。当向下拉页面,waypoint会捕捉到页面下拉到底部的事件,并调用getJSON方法来读取json数据,形成文章列表。

{% if site.posts.size > page.initItem %}
<script src="/js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/waypoints.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
// 关于waypoint,请看 http://imakewebthings.com/jquery-waypoints/
var $loading = $("<div class='loading' style='text-align:center'><img src='/images/loading.gif'></div>"),
$footer = $('footer'),
opts = {
  offset: '100%'
};

var count = {{ page.initItem }}; // 初始文章数
var count_sup = 0; // 循环上界,初始为0
$footer.waypoint(function(event, direction) {
  $footer.waypoint('remove');
  $('.posts').append($loading);
  $.getJSON("../post.json", function(data) {
var content = "";
count_sup = count + {{ page.perPageItem }}; // 循环上界每次增加page.perPageItem项
var delta = 0; // 局部计数器
$.each(data, function(i, item) {
  if (i >= count & i < count_sup) {
content += "<li class='listing-item'><time datetime='" + item.date + "'>" + item.date + "</time>";
content += "<a href='" + item.url + "' title='" + item.title + "'>" + item.title + "</a></li>";
delta++;
  }
});
count += delta;
$('div.loading').remove();
$(".posts").append(content);
if (count < data.length) $footer.waypoint(opts);
  });
}, opts);
  });
</script>
{% endif %}

关于这段代码,要注意以下几点: . 上面的代码一开始有个判断语句,当文章数不大于initItem时,后面的js代码不会进入最终生成的html中。 . 充分利用Liquid模板的特性,在js代码中,也引用了Liquid模板数据和 . .getJSON()读取数据形成列表之后,语句:

if (count < data.length) $footer.waypoint(opts);

是要判断已经加载的文章主题数是否到达总数,如果比总数小,就会在新的底部$footer上注册为waypoint,然后再向下拉页面,到达底部还会触发事件,然后接着读取数据,直到数据已经读取完毕。