codezhong

Jekyll Pagination and Navigation Guide - Enhancing User Experience

2025/11/01 jekyll web-development blogging 共 33103 字，约 95 分钟

Jekyll Pagination and Navigation Guide: Enhancing User Experience

Creating an intuitive navigation system is crucial for improving user experience on any website. In Jekyll blogs, implementing proper pagination and “previous-next” navigation can significantly enhance content discoverability and keep visitors engaged. This article provides a comprehensive guide on configuring both features effectively.

I. Understanding Jekyll Pagination

1.1 What is Pagination?

Pagination is a technique that divides blog content into multiple pages, displaying a limited number of posts per page. This approach offers several benefits:

  • Improves page load times by reducing the initial content volume
  • Makes navigation more manageable for users
  • Creates a more organized reading experience
  • Helps with SEO by creating distinct pages for content discovery

1.2 Pagination Requirements in Jekyll

Before implementing pagination, it’s important to understand these key requirements:

  • Pagination only works with the index.html (or index.md) file
  • It requires specific configuration in _config.yml
  • Posts are sorted by date in descending order by default (newest first)
  • Pagination paths follow a specific format (e.g., /page2/, /page3/)

II. Configuring Pagination in Jekyll

2.1 Setting Up Pagination in _config.yml

The first step is to enable pagination by adding configuration settings to your _config.yml file. These settings control how many posts appear per page and the URL structure for paginated pages:

# Pagination Configuration
paginate: 6          # Number of posts to display per page
paginate_path: "/page:num/"  # URL format for paginated pages

Configuration Explanation:

  • paginate: Specifies the number of posts to display on each page
  • paginate_path: Defines the URL structure, where :num is replaced with the page number

2.2 Modifying the Home Page for Pagination

Once pagination is enabled in the configuration, you need to update your index.html file to use the paginator variable instead of directly looping through all posts:

Before (without pagination):


  <article>
    <h2><a href="/2025/12/20/ssh-works-but-scp-fails/">SSH连接正常但SCP传输失败的原因分析与解决方案</a></h2>
    <p>20 Dec 2025 - <h1 id="ssh连接正常但scp传输失败的原因分析与解决方案">SSH连接正常但SCP传输失败的原因分析与解决方案</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/12/13/dns-master-slave-configuration-troubleshooting/">DNS主从配置故障排除指南</a></h2>
    <p>13 Dec 2025 - <h1 id="dns主从配置故障排除指南">DNS主从配置故障排除指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/12/02/middleware-thread-concurrency-sre-perspective/">从SRE角度看中间件线程与并发配置：生产环境案例分析</a></h2>
    <p>02 Dec 2025 - <h1 id="从sre角度看中间件线程与并发配置生产环境案例分析">从SRE角度看中间件线程与并发配置：生产环境案例分析</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/12/01/yum-dnf-repository-issues-analysis-and-solutions/">YUM/DNF仓库问题分析与解决方案 - SRE视角</a></h2>
    <p>01 Dec 2025 - <h1 id="yumdnf仓库问题分析与解决方案---sre视角">YUM/DNF仓库问题分析与解决方案 - SRE视角</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/12/01/tcp-three-way-handshake-four-way-wave/">TCP三次握手与四次挥手深度解析 - SRE视角</a></h2>
    <p>01 Dec 2025 - <h1 id="tcp三次握手与四次挥手深度解析---sre视角">TCP三次握手与四次挥手深度解析 - SRE视角</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/12/01/linux-system-administration/">Linux系统管理核心技能总结</a></h2>
    <p>01 Dec 2025 - <h1 id="linux系统管理核心技能总结">Linux系统管理核心技能总结</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/12/01/az104-microsoft-cloud-certification-practice-questions/">Az104 Microsoft Cloud Certification Practice Questions</a></h2>
    <p>01 Dec 2025 - <h1 id="az104-微软云认证备考题库">AZ104 微软云认证备考题库</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/29/nmcli-change-connection-name/">使用 nmcli 命令修改 Linux 网络连接名称</a></h2>
    <p>29 Nov 2025 - <h2 id="问题背景">问题背景</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/28/remove-duplicate-ip-address/">Linux 网卡出现两个 IP 地址的原因及解决方法</a></h2>
    <p>28 Nov 2025 - <h2 id="问题现象">问题现象</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/28/ubuntu24-netplan-multinic/">Ubuntu 24.04 多网卡配置最佳实践：告别 NetworkManager 的混乱</a></h2>
    <p>28 Nov 2025 - <p>在 Ubuntu 24.04 (Noble Numbat) 中配置多张网卡时，很多用户会遇到一个令人头疼的问题：<strong>配置不生效</strong>或者<strong>配置被莫名其妙地覆盖</strong>。</p>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/28/netplan-yaml-fix/">Ubuntu Netplan 配置文件 YAML 语法错误修复指南</a></h2>
    <p>28 Nov 2025 - <h2 id="问题描述">问题描述</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/28/vmware-multi-segment-networking/">VMware Workstation 多网段网络配置实践：实现跨网段虚拟机通信</a></h2>
    <p>28 Nov 2025 - <h2 id="一环境规划">一、环境规划</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/28/sre-perspective-soft-router/">从 SRE 角度看软路由：网络可靠性与性能优化的实践指南</a></h2>
    <p>28 Nov 2025 - <h2 id="前言">前言</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/27/nmcli-manual-ip-error/">解决 nmcli 静态 IP 配置错误：method 'manual' requires at least an address or a route</a></h2>
    <p>27 Nov 2025 - <h2 id="问题现象">问题现象</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/27/openkylin-ostree-pkgs-guard-fix/">OpenKylin无法安装软件问题解决：ostree-pkgs-guard报错分析与修复</a></h2>
    <p>27 Nov 2025 - <h2 id="情境situation">情境(Situation)</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/27/tcp-three-way-handshake-four-way-wave/">TCP三次握手与四次挥手实战解析：基于Wireshark捕获的真实流量</a></h2>
    <p>27 Nov 2025 - <h2 id="情境与实验环境">情境与实验环境</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/27/ubuntu-multiple-nics-config/">Ubuntu 24 多张网卡配置失败问题分析与解决方案</a></h2>
    <p>27 Nov 2025 - <h2 id="问题描述">问题描述</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/24/xshell-cr-crlf-paste-issue/">Xshell 中 CR/CRLF 设置与粘贴 Windows 文本格式化问题解析</a></h2>
    <p>24 Nov 2025 - <h2 id="一cr-和-crlf-的含义">一、CR 和 CRLF 的含义</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/24/vim-color-scheme-xshell8/">Vim 插件颜色主题在 Xshell 8 中不显示的原因与解决方案</a></h2>
    <p>24 Nov 2025 - <p>在使用 Vim 编辑器时，颜色主题可以提高代码可读性和编辑体验。然而，有时在 Xshell 8 终端中，Vim 的插件颜色主题可能无法正常显示。本文将详细分析可能的原因，并提供相应的解决方案。</p>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/24/linux-storage-management-and-scripting/">Linux Disk Storage Management & Shell Scripting Essentials</a></h2>
    <p>24 Nov 2025 - <p>As an SRE or System Administrator, managing storage and writing automation scripts are two of the most fundamental skills. Whether you are expanding a server’s capacity or writing a monitoring script, understanding the underlying principles is crucial.</p>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/23/linux-system-and-dns-deep-dive/">Linux系统深度解析与DNS服务配置实战</a></h2>
    <p>23 Nov 2025 - <h1 id="linux系统深度解析与dns服务配置实战">Linux系统深度解析与DNS服务配置实战</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/23/production-ready-shell-scripting-sre/">Production-Ready Shell Scripting for SREs</a></h2>
    <p>23 Nov 2025 - <p>作为一名 SRE 或 AIOps 工程师，Shell 脚本是我们日常工作中不可或缺的工具。然而，很多时候我们接手的脚本往往是”一次性”代码——缺乏错误处理、日志混乱、难以维护。</p>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/23/network-protocols-communication-sre/">Network Protocols and Communication: An SRE Perspective</a></h2>
    <p>23 Nov 2025 - <p>作为一名 SRE，网络是我们最常打交道但也最容易”背锅”的基础设施。当服务不可用时，”网络抖动”往往成为最万能的借口。但作为专业的可靠性工程师，我们需要深入理解网络协议的底层机制，才能在复杂的分布式系统中快速定位并解决问题。</p>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/19/linux-network-shell-practice/">Linux网络配置与Shell编程实践指南</a></h2>
    <p>19 Nov 2025 - <h1 id="linux网络配置与shell编程实践指南">Linux网络配置与Shell编程实践指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/17/rocky-linux-nginx-compile-pcre-issue/">Rocky Linux 9.6与Ubuntu 24手动编译安装Nginx详细指南</a></h2>
    <p>17 Nov 2025 - <h1 id="rocky-linux-96与ubuntu-24手动编译安装nginx详细指南">Rocky Linux 9.6与Ubuntu 24手动编译安装Nginx详细指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/17/rocky-linux-space-cleanup/">Rocky Linux系统空间清理指南 - 解决根分区满导致的安装失败</a></h2>
    <p>17 Nov 2025 - <h1 id="rocky-linux系统空间清理指南---解决根分区满导致的安装失败">Rocky Linux系统空间清理指南 - 解决根分区满导致的安装失败</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/17/linux-software-source-config-script/">Linux系统软件源一键配置脚本：从基础到优化</a></h2>
    <p>17 Nov 2025 - <h1 id="linux系统软件源一键配置脚本从基础到优化">Linux系统软件源一键配置脚本：从基础到优化</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/17/linux-parted-unknown-disk-label/">解决Linux parted命令"无法辨识的磁盘卷标"错误</a></h2>
    <p>17 Nov 2025 - <h2 id="情境situation">情境(Situation)</h2>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/15/linux-package-management-apt/">Linux包管理：APT详解与常见问题解决方案</a></h2>
    <p>15 Nov 2025 - <h1 id="linux包管理apt详解与常见问题解决方案">Linux包管理：APT详解与常见问题解决方案</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/13/linux-package-management-yum-dnf/">Linux包管理完全指南：从yum到dnf的演进与应用</a></h2>
    <p>13 Nov 2025 - <h1 id="linux包管理完全指南从yum到dnf的演进与应用">Linux包管理完全指南：从yum到dnf的演进与应用</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/11/linux-regular-expressions-guide/">Linux正则表达式完全指南：从基础到高级应用</a></h2>
    <p>11 Nov 2025 - <h1 id="linux正则表达式完全指南从基础到高级应用">Linux正则表达式完全指南：从基础到高级应用</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/10/linux-disk-storage-guide/">Linux磁盘存储完全指南：从MBR到LVM的全面总结</a></h2>
    <p>10 Nov 2025 - <h1 id="linux磁盘存储完全指南从mbr到lvm的全面总结">Linux磁盘存储完全指南：从MBR到LVM的全面总结</h1>

</p>
  </article>

  <article>
    <h2><a href="/archivers/linux-essential-commands-guide">Linux基础命令全面总结</a></h2>
    <p>07 Nov 2025 - <h1 id="linux基础命令全面总结">Linux基础命令全面总结</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/03/vim-plugins-guide/">Vim插件完全指南：提升你的编辑效率</a></h2>
    <p>03 Nov 2025 - <h1 id="vim插件完全指南提升你的编辑效率">Vim插件完全指南：提升你的编辑效率</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/03/vim-plugins-guide-en/">Complete Guide to Vim Plugins - Boost Your Editing Efficiency</a></h2>
    <p>03 Nov 2025 - <h1 id="complete-guide-to-vim-plugins-boost-your-editing-efficiency">Complete Guide to Vim Plugins: Boost Your Editing Efficiency</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/03/vim-ai-integration-guide/">Vim中的AI工具集成 - 如何在Vim中使用Copilot和CodeBuddy</a></h2>
    <p>03 Nov 2025 - <h1 id="vim中的ai工具集成指南copilot与codebuddy实践">Vim中的AI工具集成指南：Copilot与CodeBuddy实践</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/02/batch-create-users-fix/">Batch Create Users Fix</a></h2>
    <p>02 Nov 2025 - <h1 id="批量用户创建脚本问题修复指南">批量用户创建脚本问题修复指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/01/vimrc-configuration-guide/">Vim配置指南：打造你的高效编辑器</a></h2>
    <p>01 Nov 2025 - <h1 id="vim配置指南打造你的高效编辑器">Vim配置指南：打造你的高效编辑器</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/01/vimrc-configuration-guide-en/">Vim Configuration Guide-Building an Efficient Text Editing Environment</a></h2>
    <p>01 Nov 2025 - <h1 id="vim-configuration-guide-building-an-efficient-text-editing-environment">Vim Configuration Guide: Building an Efficient Text Editing Environment</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/01/jekyll-pagination-navigation-guide-zh/">Jekyll 分页和导航指南 - 提升用户体验</a></h2>
    <p>01 Nov 2025 - <h1 id="jekyll-分页和导航指南提升用户体验">Jekyll 分页和导航指南：提升用户体验</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/01/jekyll-pagination-navigation-guide-en/">Jekyll Pagination and Navigation Guide - Enhancing User Experience</a></h2>
    <p>01 Nov 2025 - <h1 id="jekyll-pagination-and-navigation-guide-enhancing-user-experience">Jekyll Pagination and Navigation Guide: Enhancing User Experience</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/01/batch-create-users/">Linux系统中批量创建用户并设置密码的完整指南</a></h2>
    <p>01 Nov 2025 - <h1 id="linux系统中批量创建用户并设置密码的完整指南">Linux系统中批量创建用户并设置密码的完整指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/11/01/batch-create-users-en/">A Complete Guide to Batch Creating Users and Setting Passwords in Linux</a></h2>
    <p>01 Nov 2025 - <h1 id="a-complete-guide-to-batch-creating-users-and-setting-passwords-in-linux">A Complete Guide to Batch Creating Users and Setting Passwords in Linux</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/31/login.defs-explanation-en/">Detailed Analysis of /etc/login.defs in Linux Systems: Functions, Configuration and Distribution Differences</a></h2>
    <p>31 Oct 2025 - <h1 id="detailed-analysis-of-etclogindefs-in-linux-systems-functions-configuration-and-distribution-differences">Detailed Analysis of /etc/login.defs in Linux Systems: Functions, Configuration and Distribution Differences</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/31/login.defs-explaination/">Linux系统中/etc/login.defs文件详细解析：功能、配置与发行版差异</a></h2>
    <p>31 Oct 2025 - <h1 id="linux系统中etclogindefs文件详细解析功能配置与发行版差异">Linux系统中/etc/login.defs文件详细解析：功能、配置与发行版差异</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/31/suid-sticky-bit-sgid/">关于特殊权限位suid,sgid,sticky bit的详细介绍</a></h2>
    <p>31 Oct 2025 - <h1 id="关于特殊权限位suidsgidsticky-bit的详细介绍">关于特殊权限位suid,sgid,sticky bit的详细介绍</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/31/bash-shortcut/">Bash 命令行快捷键详解与使用指南</a></h2>
    <p>31 Oct 2025 - <h1 id="bash-命令行快捷键详解与使用指南">Bash 命令行快捷键详解与使用指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/31/bash-shortcut-en/">Bash Command Line Shortcuts Guide</a></h2>
    <p>31 Oct 2025 - <h1 id="bash-command-line-shortcuts-guide">Bash Command Line Shortcuts Guide</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/28/vmware-installation-guide/">VMware 17.x pro虚拟机安装Rocky9&&Ubuntu24保姆级教程</a></h2>
    <p>28 Oct 2025 - <h1 id="vmware-17x-pro虚拟机安装rocky9ubuntu24保姆级教程">VMware 17.x pro虚拟机安装Rocky9&amp;&amp;Ubuntu24保姆级教程</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/27/hexo-deployment-guide/">Hexo博客部署完全指南</a></h2>
    <p>27 Oct 2025 - <h1 id="hexo博客部署完全指南">Hexo博客部署完全指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/26/http-protocol-guide/">Http Protocol Guide</a></h2>
    <p>26 Oct 2025 - <h1 id="http协议详解状态码与请求流程">HTTP协议详解：状态码与请求流程</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/25/ip-subnetting-guide/">Ip Subnetting Guide</a></h2>
    <p>25 Oct 2025 - <h1 id="ip子网划分详解将100008划分为32个子网">IP子网划分详解：将10.0.0.0/8划分为32个子网</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/24/linux-commands-guide/">Linux Commands Guide</a></h2>
    <p>24 Oct 2025 - <h1 id="linux-常用命令与帮助文档使用指南">Linux 常用命令与帮助文档使用指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/23/linux-filesystem-guide/">Linux Filesystem Guide</a></h2>
    <p>23 Oct 2025 - <h1 id="linux-文件系统目录结构详解">Linux 文件系统目录结构详解</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/23/linux-file-metadata-guide/">Linux File Metadata Guide</a></h2>
    <p>23 Oct 2025 - <h1 id="linux-文件元数据与链接深度解析">Linux 文件元数据与链接深度解析</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/22/nodejs-hexo-nginx-deployment-guide/">Nodejs Hexo Nginx Deployment Guide</a></h2>
    <p>22 Oct 2025 - <h1 id="nodejshexo和nginx安装与博客部署完整指南">Node.js、Hexo和Nginx安装与博客部署完整指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/22/linux-file-operations-guide/">Linux File Operations Guide</a></h2>
    <p>22 Oct 2025 - <h1 id="linux-文件和目录操作命令详解">Linux 文件和目录操作命令详解</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/21/osi-model-guide/">Osi Model Guide</a></h2>
    <p>21 Oct 2025 - <h1 id="开放系统互联osi模型详解">开放系统互联（OSI）模型详解</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/20/shell-concepts-guide/">Shell Concepts Guide</a></h2>
    <p>20 Oct 2025 - <h1 id="shell-概念与分类详解">Shell 概念与分类详解</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/19/shell-guide/">Shell Guide</a></h2>
    <p>19 Oct 2025 - <h1 id="shell详解概念类型与特性">Shell详解：概念、类型与特性</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/10/18/subnetting-guide/">子网划分完全指南：从基础到实战</a></h2>
    <p>18 Oct 2025 - <h1 id="子网划分完全指南从基础到实战">子网划分完全指南：从基础到实战</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/04/17/linux-cleanup-rc-packages/">Linux系统清理命令详解：apt-get purge $(dpkg -l | grep '^rc' | awk '{print $2}')</a></h2>
    <p>17 Apr 2025 - <h1 id="linux系统清理命令详解apt-get-purge-dpkg--l--grep-rc--awk-print-2">Linux系统清理命令详解：apt-get purge $(dpkg -l | grep ‘^rc’ | awk ‘{print $2}’)</h1>

</p>
  </article>

  <article>
    <h2><a href="/2025/04/17/snap-vs-apt-difference/">Snap与APT包管理器深度对比：区别、原理与适用场景</a></h2>
    <p>17 Apr 2025 - <h1 id="snap与apt包管理器深度对比区别原理与适用场景">Snap与APT包管理器深度对比：区别、原理与适用场景</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/11/18/linux-mount-problem-solution/">Linux挂载问题分析与解决方案</a></h2>
    <p>18 Nov 2024 - <h1 id="linux挂载问题分析与解决方案">Linux挂载问题分析与解决方案</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/11/15/mastering-nerdtree-vim-file-explorer-zh/">精通NERDTree - Vim文件浏览器完全指南</a></h2>
    <p>15 Nov 2024 - <h1 id="精通nerdtreevim文件浏览器完全指南">精通NERDTree：Vim文件浏览器完全指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/11/15/mastering-nerdtree-vim-file-explorer-en/">Mastering NERDTree - A Comprehensive Guide to Vim's File Explorer</a></h2>
    <p>15 Nov 2024 - <h1 id="mastering-nerdtree-a-comprehensive-guide-to-vims-file-explorer">Mastering NERDTree: A Comprehensive Guide to Vim’s File Explorer</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/11/10/comprehensive-vim-tutorial/">全面的Vim教程：从入门到精通</a></h2>
    <p>10 Nov 2024 - <h1 id="全面的vim教程从入门到精通">全面的Vim教程：从入门到精通</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/07/20/openeuler24-configure-epel-repo/">Openeuler24 Configure Epel Repo</a></h2>
    <p>20 Jul 2024 - <h1 id="openeuler-2403-lts-sp2-配置-epel-源完全指南">openEuler 24.03 LTS SP2 配置 EPEL 源完全指南</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/07/13/linux-archive-compression-guide/">Linux打包压缩完全指南：从基础到高级应用</a></h2>
    <p>13 Jul 2024 - <h1 id="linux打包压缩完全指南从基础到高级应用">Linux打包压缩完全指南：从基础到高级应用</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/07/10/shell-string-manipulation-best-practices/">Shell字符串操作：SRE工程师的高效工具</a></h2>
    <p>10 Jul 2024 - <h1 id="shell字符串操作sre工程师的高效工具">Shell字符串操作：SRE工程师的高效工具</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/06/23/shell-expr-match-command-explained/">Shell命令解析：为什么expr match命令返回0？</a></h2>
    <p>23 Jun 2024 - <h2 id="问题-situation">问题 (Situation)</h2>

</p>
  </article>

  <article>
    <h2><a href="/2024/06/23/sre-blog-writing-guide/">Sre Blog Writing Guide</a></h2>
    <p>23 Jun 2024 - <h1 id="博客生成指南如何构建高质量的sre技术知识库">博客生成指南：如何构建高质量的SRE技术知识库</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/05/16/linux-wildcards-vs-regex/">Linux中通配符与正则表达式的区别与应用详解</a></h2>
    <p>16 May 2024 - <h1 id="linux中通配符与正则表达式的区别与应用详解">Linux中通配符与正则表达式的区别与应用详解</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/02/03/linux-find-command-guide/">Linux find命令详解：从基础到高级应用</a></h2>
    <p>03 Feb 2024 - <h2 id="1-引言">1. 引言</h2>

</p>
  </article>

  <article>
    <h2><a href="/archivers/linux-awk-command-guide">Linux awk命令全面详解</a></h2>
    <p>02 Feb 2024 - <h1 id="linux-awk命令全面详解">Linux awk命令全面详解</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/02/01/linux-sed-command-guide/">Linux sed命令完全指南：流式文本编辑的艺术</a></h2>
    <p>01 Feb 2024 - <h1 id="linux-sed命令完全指南流式文本编辑的艺术">Linux sed命令完全指南：流式文本编辑的艺术</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/30/linux-grep-command-guide/">Linux grep命令完全指南：文本搜索与模式匹配的利器</a></h2>
    <p>30 Jan 2024 - <h1 id="linux-grep命令完全指南文本搜索与模式匹配的利器">Linux grep命令完全指南：文本搜索与模式匹配的利器</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/28/linux-uniq-command-guide/">Linux uniq命令完全指南：文本去重与重复行处理</a></h2>
    <p>28 Jan 2024 - <h1 id="linux-uniq命令完全指南文本去重与重复行处理">Linux uniq命令完全指南：文本去重与重复行处理</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/27/linux-tail-command-guide/">Linux tail命令完全指南：文件尾部内容监控与分析</a></h2>
    <p>27 Jan 2024 - <h1 id="linux-tail命令完全指南文件尾部内容监控与分析">Linux tail命令完全指南：文件尾部内容监控与分析</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/26/linux-head-command-guide/">Linux head命令完全指南：文件头部内容快速预览</a></h2>
    <p>26 Jan 2024 - <h1 id="linux-head命令完全指南文件头部内容快速预览">Linux head命令完全指南：文件头部内容快速预览</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/25/linux-paste-command-guide/">Linux paste命令完全指南：文件内容整合的艺术</a></h2>
    <p>25 Jan 2024 - <h1 id="linux-paste命令完全指南文件内容整合的艺术">Linux paste命令完全指南：文件内容整合的艺术</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/24/linux-xargs-command-guide/">Linux xargs命令完全指南：命令行参数处理的艺术</a></h2>
    <p>24 Jan 2024 - <h1 id="linux-xargs命令完全指南命令行参数处理的艺术">Linux xargs命令完全指南：命令行参数处理的艺术</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/23/linux-sort-command-guide/">Linux sort命令完全指南：灵活排序与数据处理的艺术</a></h2>
    <p>23 Jan 2024 - <h1 id="linux-sort命令完全指南灵活排序与数据处理的艺术">Linux sort命令完全指南：灵活排序与数据处理的艺术</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/22/linux-cut-command-guide/">Linux cut命令完全指南：精确字段提取的艺术</a></h2>
    <p>22 Jan 2024 - <h1 id="linux-cut命令完全指南精确字段提取的艺术">Linux cut命令完全指南：精确字段提取的艺术</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/21/linux-tr-command-guide/">Linux tr命令完全指南：字符转换、压缩与删除的艺术</a></h2>
    <p>21 Jan 2024 - <h1 id="linux-tr命令完全指南字符转换压缩与删除的艺术">Linux tr命令完全指南：字符转换、压缩与删除的艺术</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/20/linux-text-processing-tools/">Linux文本处理工具精通指南：cut, tr, sort, head, tail, paste, xargs</a></h2>
    <p>20 Jan 2024 - <h1 id="linux文本处理工具精通指南cut-tr-sort-head-tail-paste-xargs">Linux文本处理工具精通指南：cut, tr, sort, head, tail, paste, xargs</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/15/linux-special-permissions-suid-sgid-sticky-bit/">Linux特殊权限位详解：SUID、SGID和Sticky Bit</a></h2>
    <p>15 Jan 2024 - <h1 id="linux特殊权限位详解suidsgid和sticky-bit">Linux特殊权限位详解：SUID、SGID和Sticky Bit</h1>

</p>
  </article>

  <article>
    <h2><a href="/2024/01/15/linux-special-permissions-suid-sgid-sticky-bit-en/">A Detailed Guide to Linux Special Permissions: SUID, SGID, and Sticky Bit</a></h2>
    <p>15 Jan 2024 - <h1 id="a-detailed-guide-to-linux-special-permissions-suid-sgid-and-sticky-bit">A Detailed Guide to Linux Special Permissions: SUID, SGID, and Sticky Bit</h1>

</p>
  </article>

  <article>
    <h2><a href="/2023/11/18/linux-etc-shadow-modification-guide/">Linux系统中如何安全修改/etc/shadow文件</a></h2>
    <p>18 Nov 2023 - <h1 id="linux系统中如何安全修改etcshadow文件">Linux系统中如何安全修改/etc/shadow文件</h1>

</p>
  </article>

  <article>
    <h2><a href="/2022/11/19/linux-chattr-lsattr-guide/">Linux文件属性管理 - chattr与lsattr命令详解</a></h2>
    <p>19 Nov 2022 - <h1 id="linux文件属性管理chattr与lsattr命令详解">Linux文件属性管理：chattr与lsattr命令详解</h1>

</p>
  </article>

After (with pagination):

2.3 Adding Pagination Navigation Controls

To allow users to navigate between pages, you need to add pagination controls to the bottom of your index.html file. These controls typically include links to the previous page, next page, and page numbers:

<div class="pagination">
  
    <span class="previous">Previous</span>
  
  
  <span class="page_number">Page  of </span>
  
  
    <span class="next">Next</span>
  
</div>

Key Features:

  • Displays “Previous” link when on pages beyond the first
  • Shows the current page number and total number of pages
  • Displays “Next” link when more pages exist
  • Uses non-clickable spans for disabled links, maintaining consistent styling

III. Implementing Previous-Next Post Navigation

3.1 Understanding Previous-Next Navigation

While pagination helps navigate between lists of posts, “previous-next” navigation allows users to move directly between individual posts. This creates a continuous reading experience that encourages visitors to consume more content.

3.2 Creating the Navigation Template

The best approach is to create a reusable template in the _includes directory. This allows you to maintain the navigation code in one place and include it wherever needed:

  1. Create a new file _includes/prev_next.html with the following content:
<div class="previous-next">
  <div class="previous-section">
    
      <a class="previous" href="/2025/11/01/batch-create-users/">&laquo; Linux系统中批量创建用户并设置密码的完整指南</a>
    
  </div>
  
  <div class="next-section">
    
      <a class="next" href="/2025/11/01/jekyll-pagination-navigation-guide-zh/">Jekyll 分页和导航指南 - 提升用户体验 &raquo;</a>
    
  </div>
</div>

Implementation Notes:

  • The template checks for the existence of previous and next posts before displaying links
  • Each link includes the post title and directional arrows for clarity
  • The links are wrapped in separate div containers for flexible styling

3.3 Integrating Navigation into Post Layouts

Once your navigation template is created, you need to include it in your post layout file. This ensures that the navigation appears at the end of every blog post:

  1. Open your post layout file (typically _layouts/post.html)
  2. Add the include tag at an appropriate location after the post content:
<!-- Post content would be here -->
<article>
  <!-- Post content -->
</article>

<!-- Add previous-next navigation after the post content -->
<div class="previous-next">

  <div class="next-section">
    
      <a class="next" href="/2025/11/01/jekyll-pagination-navigation-guide-zh/"> &laquo;Jekyll 分页和导航指南 - 提升用户体验</a>
    
  </div>
  <div></div>
    <div class="previous-section">
    
      <a class="previous" href="/2025/11/01/batch-create-users/"> Linux系统中批量创建用户并设置密码的完整指南&raquo;</a>
    
  </div>
  
</div>

IV. Styling the Navigation Elements

4.1 CSS for Pagination Controls

To make your pagination controls visually appealing and functional, add the following CSS to your assets/css/main.scss file:

.pagination {
  margin: 30px 0;
  padding: 20px 0;
  text-align: center;
  overflow: hidden;
  
  .previous,
  .next,
  .page_number {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 10px;
    color: #495057;
    text-decoration: none;
  }
  
  .previous,
  .next {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  
  .previous:hover,
  .next:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
    transform: translateY(-1px);
  }
  
  .previous:empty,
  .next:empty,
  .previous:not([href]),
  .next:not([href]) {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
  }
}

4.2 CSS for Previous-Next Post Navigation

For the post navigation links, add the following CSS to ensure they are clearly visible and properly spaced:

.previous-next {
  margin: 30px 0;
  overflow: hidden;
  padding: 20px 0;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  
  .previous-section,
  .next-section {
    display: block;
    margin: 15px 0;
  }
  
  .previous,
  .next {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #495057;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 150px;
    text-align: center;
  }
  
  .previous-section {
    text-align: right;
  }
  
  .next-section {
    text-align: left;
  }
  
  .previous:hover,
  .next:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
    transform: translateY(-1px);
  }
  
  .previous:empty,
  .next:empty {
    display: none;
  }
}

Style Enhancements:

  • Added background colors and borders to make links stand out
  • Implemented hover effects for interactive feedback
  • Set appropriate spacing to ensure links are clearly separated
  • Added minimum width for consistent appearance
  • Included text alignment to position links properly

V. Advanced Configuration Options

5.1 Customizing Post Order

By default, Jekyll orders posts by their date in descending order. If you need a different sort order, you can configure it in _config.yml:

# Custom post ordering
collections:
  posts:
    output: true
    sort_by: date  # Sort by date (default)

# Alternative sort options example
# collections:
#   posts:
#     output: true
#     sort_by: title  # Sort alphabetically by title

5.2 Handling Edge Cases

There are some edge cases you might want to handle for a polished experience:

Single Post Navigation

When there’s only one post, or when viewing the first or last post in your collection, you might want to add fallback content or styling:

<div class="previous-next">
  <div class="previous-section">
    
      <a class="previous" href="/2025/11/01/batch-create-users/">&laquo; Linux系统中批量创建用户并设置密码的完整指南</a>
    
  </div>
  
  <div class="next-section">
    
      <a class="next" href="/2025/11/01/jekyll-pagination-navigation-guide-zh/">Jekyll 分页和导航指南 - 提升用户体验 &raquo;</a>
    
  </div>
</div>

Customizing Navigation Text

For shorter navigation links, especially when post titles are long, you can truncate the titles:




<div class="previous-next">
  
    <a class="previous" href="/2025/11/01/batch-create-users/">&laquo; Linux系统中批量创建用户并设置密码的完整指南</a>
  
  
    <a class="next" href="/2025/11/01/jekyll-pagination-navigation-guide-zh/">Jekyll 分页和导航指南 - 提升用户体验 &raquo;</a>
  
</div>

VI. Troubleshooting Common Issues

6.1 Pagination Problems

Pagination Not Showing Up

If pagination isn’t working correctly, check these common issues:

  • Ensure paginate and paginate_path are correctly set in _config.yml
  • Verify you’re using paginator.posts instead of site.posts in index.html
  • Make sure you have enough posts to trigger pagination (more than your paginate setting)
  • Restart your Jekyll server after making changes to _config.yml

Pagination Only Works on Home Page

This is expected behavior. Jekyll’s built-in pagination only supports the index.html file. For category or tag pages with pagination, you would need to use a plugin like jekyll-paginate-v2.

6.2 Previous-Next Navigation Issues

If your previous-next links aren’t showing up:

</div> ` to your post layout

  • Verify that you have multiple posts for the navigation to work
  • Check for any typos in variable names (e.g., page.previous.url vs. post.previous.url)

If posts are appearing in the wrong order:

  • Check the date metadata in your posts’ front matter
  • Ensure you haven’t modified the default sort order unintentionally
  • Verify that filenames follow the correct format (YYYY-MM-DD-title.md)

VII. Best Practices for Navigation Implementation

7.1 User Experience Considerations

  • Consistent Placement: Always place navigation in the same location across all pages
  • Clear Labels: Use intuitive text for navigation elements (“Previous”, “Next”, “Page 2”)
  • Visual Feedback: Provide hover states and focus indicators for accessibility
  • Responsive Design: Ensure navigation works well on all screen sizes

7.2 SEO Implications

  • Navigation creates internal links between your posts, which helps search engines discover all your content
  • Pagination creates crawlable pages that can rank for relevant search terms
  • Consider adding rel=”prev” and rel=”next” attributes for better pagination SEO:

VIII. Conclusion

Implementing proper pagination and previous-next navigation in your Jekyll blog is essential for creating a user-friendly experience. By following the steps outlined in this guide, you can:

  1. Divide your content into manageable pages with pagination
  2. Create intuitive navigation between individual posts
  3. Style these elements to match your site’s design
  4. Handle edge cases and troubleshoot common issues

Remember that navigation is not just about functionality—it’s also about encouraging users to explore more of your content. A well-designed navigation system can significantly increase engagement and time spent on your blog.

As with any web development task, it’s important to test your implementation thoroughly across different devices and browsers. Pay attention to how users interact with your navigation and be open to making adjustments based on feedback or analytics data.

By investing time in creating a thoughtful navigation system, you’ll create a more polished and professional experience for your blog’s visitors.

文档信息

Search

    Table of Contents