对于许多网站尤其是博客而言，把所有内容显示在一个页面内，将严重影响网页显示效果，降低用户的阅读体验，而且还显得不够专业。因此，内容的分页显示非常重要。

Jekyll 内置分页功能，利用 Jekyll 构建静态站点可以很方便完成分页显示。

首先，需要在配置文件 _config.yml 中设置每页显示的博文条目数目:

paginate: 5

根据需要设置分页所在路径：

paginate_path: "blog/page:num"

然后，利用 paginator liquid 对象获取并显示分页相关信息。paginator 具有以下属性：

• page：当前页页码
• per_page：每页的文章数目
• posts：当前页的文章列表
• total_posts：所有文章的数目
• total_pages：分页数目
• previous_page：当前页的前一页页码，如果没有前一页的话为 nil
• previous_page_path：当前页的前一页的路径，如果没有前一页的话为 nil
• next_page：当前页的后一页页码，如果没有后一页的话为 nil
• next_page_path：当前页的后一页的路径，如果没有后一页的话为 nil

最后，分页显示的代码如下：

  

  <div class="pagination">
  

  

  
  </div>

相关的 CSS 样式为：

.pagination {
    overflow:hidden;
    text-align:center;
    font-size:16px; 
    float:left; 
    padding-right:2px;
}
.pagination a, .pagination .current { 
    display:block; 
    width:26px; 
    height:20px; 
    text-align:center; 
    text-decoration:none; 
    float:left;
    padding-bottom:10px; 
    border:none;

}
.pagination .current {
    background:url(/images/icons/bk_pagination.png) 50% 100% no-repeat;
}

显示效果如下图所示：

另一种页面导航代码如下：

  <div class="pagination">
  
    <a href="/">&laquo; 首页</a>
  

  
    <p>&lsaquo; 前一页</p>
  

  
    <p>后一页 &rsaquo;</p>
  

  
    <p>末页 &raquo;</p>
  
  </div>

相关的 CSS 样式为：

.pagination {
    margin:0 auto;
    padding:5px 0;
    width:370px;
    overflow:hidden;
}
.pagination a, .pagination p { 
    display:block; 
    margin:0 5px;
    padding:5px 0;
    width:80px; 
    height:13px;
    font-size:13px;
    line-height:13px;
    font-weight:700;
    color:#222;
    background-color:#aaaaaa;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #222;
    text-align:center; 
    text-decoration:none; 
    float:left;
    border:1px solid #fff;
    text-shadow:1px 1px #fff;
}
.pagination a:hover {background-color:#ccc;}
.pagination p {background-color:#ccc;}

显示效果如下图所示：

参考资料：Jekyll: Pagination

上一篇： Loser 应该知道的 6 个残酷人生事实

下一篇：Jekyll 博客 RSS 订阅