jekyll,分页功能,附带分类分页!

分页功能

对于大多数网站(尤其是博客),当文章越来越多的时候,就会有分页显示文章列表的需求。
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安装插件,有两种安装插件的方式:

  1. 在网站根下目录建立 _plugins 文件夹,插件放在这里即可。 Jekyll 运行之前,会加载此目录下所有以 *.rb 结尾的文件。

  2. 在 _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而是一个数组!就是我说的,假如我想对多个页面分页呢?

需要注意的点:

  1. index.html一定要放在你的分类名称的文件夹下!切记!

  2. index.html关于分类,我的做法是每个页面配置category,我也是根据category实现分页的

到此已经完成了。可以尽情的使用了!其他功能都跟jekyll的分页类似了。

原文地址:http://bamzc.top/2016/11/03/j...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值