jekyll 中使用分页功能

2024-02-21 19:32
文章标签 使用 功能 分页 jekyll

本文主要是介绍jekyll 中使用分页功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

对于大多数网站(尤其是博客),当文章越来越多的时候,就会有分页显示文章列表的需求。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 相同的属性

属性描述

page

当前页码

per_page

每页文章数量

posts

当前页的文章列表

total_posts

总文章数

total_pages

总页数

previous_page

上一页页码 或 nil

previous_page_path

上一页路径 或 nil

next_page

下一页页码 或 nil

next_page_path

下一页路径 或 nil

不支持对“标签”和“类别”分页

分页功能仅仅遍历文章列表并计算出结果,并未读取 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 中使用分页功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/732836

相关文章

C#使用MQTTnet实现服务端与客户端的通讯的示例

《C#使用MQTTnet实现服务端与客户端的通讯的示例》本文主要介绍了C#使用MQTTnet实现服务端与客户端的通讯的示例,包括协议特性、连接管理、QoS机制和安全策略,具有一定的参考价值,感兴趣的可... 目录一、MQTT 协议简介二、MQTT 协议核心特性三、MQTTNET 库的核心功能四、服务端(BR

使用@Cacheable注解Redis时Redis宕机或其他原因连不上继续调用原方法的解决方案

《使用@Cacheable注解Redis时Redis宕机或其他原因连不上继续调用原方法的解决方案》在SpringBoot应用中,我们经常使用​​@Cacheable​​注解来缓存数据,以提高应用的性能... 目录@Cacheable注解Redis时,Redis宕机或其他原因连不上,继续调用原方法的解决方案1

java中XML的使用全过程

《java中XML的使用全过程》:本文主要介绍java中XML的使用全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录什么是XML特点XML作用XML的编写语法基本语法特殊字符编写约束XML的书写格式DTD文档schema文档解析XML的方法​​DOM解析XM

使用Java实现Navicat密码的加密与解密的代码解析

《使用Java实现Navicat密码的加密与解密的代码解析》:本文主要介绍使用Java实现Navicat密码的加密与解密,通过本文,我们了解了如何利用Java语言实现对Navicat保存的数据库密... 目录一、背景介绍二、环境准备三、代码解析四、核心代码展示五、总结在日常开发过程中,我们有时需要处理各种软

使用Nginx配置文件服务器方式

《使用Nginx配置文件服务器方式》:本文主要介绍使用Nginx配置文件服务器方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 为什么选择 Nginx 作为文件服务器?2. 环境准备3. 配置 Nginx 文件服务器4. 将文件放入服务器目录5. 启动 N

使用nohup和--remove-source-files在后台运行rsync并记录日志方式

《使用nohup和--remove-source-files在后台运行rsync并记录日志方式》:本文主要介绍使用nohup和--remove-source-files在后台运行rsync并记录日... 目录一、什么是 --remove-source-files?二、示例命令三、命令详解1. nohup2.

Qt之QMessageBox的具体使用

《Qt之QMessageBox的具体使用》本文介绍Qt中QMessageBox类的使用,用于弹出提示、警告、错误等模态对话框,具有一定的参考价值,感兴趣的可以了解一下... 目录1.引言2.简单介绍3.常见函数4.按钮类型(QMessage::StandardButton)5.分步骤实现弹窗6.总结1.引言

Python使用Reflex构建现代Web应用的完全指南

《Python使用Reflex构建现代Web应用的完全指南》这篇文章为大家深入介绍了Reflex框架的设计理念,技术特性,项目结构,核心API,实际开发流程以及与其他框架的对比和部署建议,感兴趣的小伙... 目录什么是 ReFlex?为什么选择 Reflex?安装与环境配置构建你的第一个应用核心概念解析组件

Qt中Qfile类的使用

《Qt中Qfile类的使用》很多应用程序都具备操作文件的能力,包括对文件进行写入和读取,创建和删除文件,本文主要介绍了Qt中Qfile类的使用,具有一定的参考价值,感兴趣的可以了解一下... 目录1.引言2.QFile文件操作3.演示示例3.1实验一3.2实验二【演示 QFile 读写二进制文件的过程】4.

spring security 超详细使用教程及如何接入springboot、前后端分离

《springsecurity超详细使用教程及如何接入springboot、前后端分离》SpringSecurity是一个强大且可扩展的框架,用于保护Java应用程序,尤其是基于Spring的应用... 目录1、准备工作1.1 引入依赖1.2 用户认证的配置1.3 基本的配置1.4 常用配置2、加密1. 密