对于大多数网站(尤其是博客),当文章越来越多的时候,就会有分页显示文章列表的需求。Jekyll 已经自建分页功能,你只需要根据约定放置文件即可。
分页功能只支持 HTML 文件
Jekyll 的分页功能不支持 Markdown 或 Textile 文件,而是只支持 HTML 文件。当然,这不会让你不爽。
开启分页功能
开启分页功能很简单,只需要在 _config.yml
里边加一行,并填写每页需要几行:
paginate: 5
下边是对需要带有分页页面的配置:
paginate_path: "blog/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
。
与 paginator
相同的属性
|
当前页码 |
|
每页文章数量 |
|
当前页的文章列表 |
|
总文章数 |
|
总页数 |
|
上一页页码 或 |
|
上一页路径 或 |
|
下一页页码 或 |
|
下一页路径 或 |
不支持对“标签”和“类别”分页
分页功能仅仅遍历文章列表并计算出结果,并未读取 YAML 头信息,现在不支持对“标签”和“类别”分页。
生成带分页功能的文章
接下来要做的事情就是展现在页面上了,下边是一个简单的例子:
---
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>
注意首尾页
Jekyll 没有生成文件夹 ‘page1’ ,所以上边的代码有 bug ,下边的代码解决了这个问题。
下边的 HTML 片段是第一页,他除自己外,为每个页面生成了链接。
<div id="post-pagination" class="pagination">
{% if paginator.previous_page %}
<p class="previous">
{% if paginator.previous_page == 1 %}
<a href="/">Previous</a>
{% else %}
<a href="{{ paginator.previous_page_path }}">Previous</a>
{% endif %}
</p>
{% else %}
<p class="previous disabled">
<span>Previous</span>
</p>
{% endif %}
<ul class="pages">
<li class="page">
{% if paginator.page == 1 %}
<span class="current-page">1</span>
{% else %}
<a href="/">1</a>
{% endif %}
</li>
{% for count in (2..paginator.total_pages) %}
<li class="page">
{% if count == paginator.page %}
<span class="current-page">{{ count }}</span>
{% else %}
<a href="/page{{ count }}">{{ count }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% if paginator.next_page %}
<p class="next">
<a href="{{ paginator.next_page_path }}">Next</a>
</p>
{% else %}
<p class="next disabled">
<span>Next</span>
</p>
{% endif %}
</div>
相关推荐
Jekyll ::分页 Jekyll的默认分页生成器。 安装 将此行添加到您的应用程序的Gemfile中: gem 'jekyll-paginate' 然后执行: $ bundle 或自己安装为: $ gem install jekyll-paginate 用法 一旦您的系统上安装了gem...
分页宝石是专为Jekyll 3及更高版本制造的,完全向后兼容,并且可以替代以前内置的。 在上查看它。 在部分或通过电子邮件,您也可以与项目的。“彼此优秀” :red_heart:安装gem install jekyll-paginate-v2更新您的...
title : jekyll,分页功能,附带分类分页! tags: ['jekyll','blog'] categories: ['网站','博客'] header: jekyll tagline: jekyll,分页功能,附带分类分页! date: 2016-11-02 19:20: ascription: study group: ...
如果您只想在网站上使用此主题,则只需更改Jekyll项目主题。 如果您需要其他功能, scripts/的脚本可能会为您提供帮助。 该主题可能正是您需要的,也可能是您想避免的。 因此,如果您不想要使用JSON或学习此主题...
Jekyll特有的功能: 分页(默认值:每页5个帖子) 与Jekyll 3.x和GitHub Pages完全兼容 SEO优化 支持 评论支持 使用和带编号的代码行的语法荧光笔 其它功能: 封存页面 关于页面 标签功能和标签页面 链接帖子功能...
强迫症福利,主题内置了包括solarized-light和monokai等共25套代码高亮样式,默认是solarized-light,你可以在配置文件中快速切换,也可以很方便的加入自己想要的高亮样式 rss订阅采用更好的atom格式 使用标准的sitemap...
“非纯池”是博客的一个简单,美丽且功能强大的Jekyll主题。 它基于和构建。 普尔(Boole)解释说,吉基尔已经要求一种特定的化学品已有数天了,但是每次被他拿走时,他都拒绝说它不是纯正的化学品。...
将gem "jekyll-theme-hydeout", "~> 4.1"到您的Gemfile中,然后运行bundle install 。 如果要在Github页面上安装,则可能还必须将remote_theme: fongandrew/hydeout添加到_config.yml 。 Hydeout使用分页,因此,...
这是 Ghost 的默认主题 for Jekyll 的端口,灵感来自 。 此时您可能会问,为什么要制作一个新的 Casper 克隆? 尽管这是受到 Kasper 的启发,但还有一些附加功能使此端口更接近原始主题。 新功能:查看 ,Casper ...
产品特点Twitter Bootstrap 3 选择在帖子中设置特色图片和视频分页支持Disqus评论(如果您选择启用) MailChip集成用于订阅用于, 和Schema.org的标签,以获得更好的社交共享体验支持最近的帖子启用SEO的主题...
布局 标题 发布 读我 樱花吉柯主题 有关此模板的实时演示,请转到。 这个主题的git仓库可以在找到。 我将这个Jekyll模板拼凑在一起,因为我永远找不到一个模板,该模板...HTML5 <picture>和元素,在帖子中使用Liqu
Jekyll特有的功能: 分页(默认值:每页5个帖子) 与Jekyll 3.x和GitHub Pages完全兼容 SEO优化 支持 评论支持 使用和带编号的代码行的语法荧光笔 其他特性: 封存页面 关于页面 标签功能和标签页面 链接帖子功能...
受到dirkfabisch的主题(我以前在自己的博客中使用过)以及启发。 封面图片由Chris M. Morris( )提供。 产品特点 该主题具有许多功能,包括: 易于自定义的字体和颜色 您的首页和博客文章的封面图片 默认情况下...
它模仿 (JPv2)的命名约定和功能,因此,如果使用它,您将处在熟悉的领域。 功能:自动将内容分成几页,单页视图,可配置的永久链接,页面跟踪/分页器,SEO支持,自我调整内部链接,可识别多页的目录。TL; DR手册-...
特征该主题具有许多功能,包括: 易于自定义的字体和颜色您的首页和博客文章的封面图片默认情况下启用分页按类别和标签归档帖子代码段的语法突出显示Disqus集成以发表评论Lightgallery,用于查看全屏照片和相册具有...
Hanuman是您的博客和网站的最小但功能强大的Jekyll主题。 它使用开源,并可根据您的要求进行自定义。 现场演示 产品特点 最小的 React灵敏 代码的语法突出显示 主页和博客文章的封面图片 社交分享 简单导航菜单 ...
博客的构建教程修改自和 更加详细的教程戳这或 本仓库博客实现的附加功能(相对Fork的仓库) Gitalk评论功能略改(启用) ...如果您安装了 ,那你只需要在命令行输入jekyll jekyll serve或jekyll jek
Noir是Jekyll 4的现代,敏感... 分页,相关帖子和按帖子导航至较旧/较新的条目。 HTML / CSS压缩(最小化)。 一个Favicon和有效的Atom联合供稿。 主题的基于变色的强调色可以轻松更改。 全面响应,重点放在移动友好的
数学表达式(可选)新功能! 搜索引擎优化 谷歌分析 元标记 JSON-LD Sitemap.xml 社交媒体准备就绪 快速安装 如果要安装到现有的Jekyll项目,请将此行添加到项目的Gemfile : gem "jekflix" 将此行添加到项目...
v1.1.0 添加home页的分页功能。 v1.1.1 添加tag页为按照标签分类博客。 v1.1.2 添加archive页为按照年月份分类博客,使用jekyll archive。 v1.1.3 添加浏览数量功能,api基于。 待完成 archive的blog总数实现数字...