分页功能
对于大多数网站(尤其是博客),当文章越来越多的时候,就会有分页显示文章列表的需求。
Jekyll 已经自建分页功能,你只需要根据约定放置文件即可。
但是有一些缺陷,就是category,tag的分类分页无法实现,必须通过插件的方式来做。
重点来了!
几番周折,几番折腾,终于实现分类分页,此时我内心控制不住的激动开始井喷般爆发!
先试想一下,假如我实现分类分页了,jekyll-paginate是不是也只能对一个index.html页面生效?如果我想对多个页面分页呢?如何配置?
jekyll-paginate的分页还是蛮坑的!完全没法满足我的需求,满足我内心的饥渴。于是,决定修改它!先付上"原装功能实现"!
在 Jekyll 3 中,需要在 gems 中安装 jekyll-paginate
插件,并添加到你的 Gemfile 和 _config.yml
中。在 Jekyll 2 中,分页是标准功能。
分页功能只支持 HTML 文件
Jekyll 的分页功能不支持 Jekyll site 中的 Markdown 或 Textile 文件。
分页功能从名为 index.html
的 HTML 文件中被调用时,才能工作。
分页功能是可选的,可能通过 paginate_path
配置的值,驻留和生成在子目录中。
开启分页功能
开启分页功能很简单,只需要在 _config.yml
里边加一行,指明每页该展示多少项目:
paginate:5
paginate_path: "page:num"
blog/index.html
将会读取这个设置,把它传给每个分页页面,然后从第 2
页开始输出到 blog/page:num
, :num
是页码。
如果有 12 篇文章并且做如下配置 paginate: 5
, Jekyll 会将前 5 篇文章写入 blog/index.html
,把接下来的 5 篇文章写入blog/page2/index.html
,最后 2 篇写入 blog/page3/index.html
。
不要设置 permalink
在你的博客的头信息中设置 permalink 会造成分页功能的瘫痪。缺省设置 permalink 即可。
由此可见,jekyll的分页真的蛮坑的!
可用的 Liquid 属性
分页功能插件使得 paginator
liquid 对象具有下列属性:
属性 | 描述 |
---|---|
page | 当前页码 |
per_page | 每页文章数量 |
posts | 当前页的文章列表 |
total_posts | 总文章数 |
total_pages | 总页数 |
previous_page | 上一页页码 或 nil (如果上一页不存在) |
previous_page_path | 上一页路径 或 nil (如果上一页不存在) |
next_page | 下一页页码 或 nil (如果下一页不存在) |
next_page_path | 下一页路径 或 nil (如果下一页不存在) |
不支持对“标签”和“类别”分页
分页功能遍历 posts下的所有文章,而忽略定义在文章内的头信息中的变量。
现在不支持对“标签”和“类别”分页。也不支持任何文件集合,因为该功能被限制在 posts 中。
生成带分页功能的文章
接下来你需要做的事情,就是使用你已经掌握的 paginator
变量,列表展示你的文章。下边是一个简单的例子,在 HTML 文件中生成带分页功能的文章(以下使用bootstrap的分页):
遍历分页后的文章
---
layout: default
title: My Blog
---
<!-- 遍历分页后的文章 -->
{% for post in paginator.posts %}
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
<!-- 分页链接 -->
<div class="pagination">
{% if paginator.previous_page %}
<a href="/page{{ paginator.previous_page }}" class="previous">Previous</a>
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
<a href="/page{{ paginator.next_page }}" class="next">Next</a>
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
自定义插件paginate
其实就是修改版的jekyll-paginate,小小的装一下(奸笑)。废话不多说直接上干货!
关于自定义插件,不多说,上传送门——插件
先说一下,jekyll安装插件,有两种安装插件的方式:
在网站根下目录建立 _plugins 文件夹,插件放在这里即可。 Jekyll 运行之前,会加载此目录下所有以 *.rb 结尾的文件。
在 _config.yml 文件中,添加一个以 gems 作为 key 的数组,数组中存放插件的 gem 名称。
例如:gems: [jekyll-test-plugin, jekyll-jsonify, jekyll-assets]
然后,引入两个文件pager.rb和paginate.rb放到_plugins
传送门——click here!
同样开启分页功能
注意,这里跟jekyll—paginate不一样的地方!
paginate:5
paginatepath: ['topics/study/page/:num','topics/life/page/:num']
没错,这里的paginatepath: []
已然不再是paginate_path:"page:num
而是一个数组!就是我说的,假如我想对多个页面分页呢?
需要注意的点:
index.html
一定要放在你的分类名称的文件夹下!切记!index.html
关于分类,我的做法是每个页面配置category,我也是根据category实现分页的
到此已经完成了。可以尽情的使用了!其他功能都跟jekyll的分页类似了。