如何在Jekyll中实现单篇博客文章的多页面分页？

方案1：手动生成独立分页页面（最推荐，适配你的脚本工作流） #

• 借助你现有的脚本，直接为每个分页创建单独的页面文件，命名比如ai-generated-palettes-1.md、ai-generated-palettes-2.md，无需添加日期前缀。
• 每个文件开头添加YAML Front Matter，指定布局和标题，示例：

---
layout: page # 使用你博客的页面布局，或自定义的帖子布局
title: AI生成调色板 - 第1页
---

• 脚本负责将内容按每页5-6张图拆分，分别写入对应页码的文件中。
• 在每个页面底部添加分页导航链接，脚本生成时自动处理：比如第2页的导航链接到第1页和第3页，最后一页仅显示上一页链接。

方案2：基于Jekyll数据文件+模板生成分页 #

• 先把所有图片的信息（路径、描述、对应页码）整理成_data/palettes.yml数据文件，格式示例：

- image: "/images/palette-01.jpg"
  description: "暖色调复古调色板"
  page: 1
- image: "/images/palette-02.jpg"
  description: "冷色调极简调色板"
  page: 1
# 更多条目...

• 创建专用布局_layouts/palette-page.html，在布局里通过page.page_num筛选对应页码的内容：

<h1>{{ page.title }}</h1>
{% for palette in site.data.palettes %}
  {% if palette.page == page.page_num %}
    <div class="palette-item">
      <img src="{{ palette.image }}" alt="{{ palette.description }}">
      <p>{{ palette.description }}</p>
    </div>
  {% endif %}
{% endfor %}
<!-- 分页导航 -->
<div class="pagination">
  {% if page.page_num > 1 %}
    <a href="/ai-generated-palettes-{{ page.page_num | minus: 1 }}/">上一页</a>
  {% endif %}
  {% assign next_page = page.page_num | plus: 1 %}
  {% if site.data.palettes | where: "page", next_page | size > 0 %}
    <a href="/ai-generated-palettes-{{ next_page }}/">下一页</a>
  {% endif %}
</div>

• 用脚本生成分页页面文件，比如ai-generated-palettes-1.md的Front Matter：

---
layout: palette-page
title: AI生成调色板 - 第1页
page_num: 1
---

• Jekyll编译时会自动根据模板渲染出每个分页的内容。

方案3：前端静态分页（适合不想创建多文件的场景） #

• 将所有图片和描述放入一个单独的页面文件，给每页的内容块加上标识，示例：

<div class="page-section" data-page="1">
  <!-- 第1页的5-6张图和描述 -->
</div>
<div class="page-section" data-page="2" style="display: none;">
  <!-- 第2页的内容 -->
</div>
<!-- 分页按钮 -->
<div class="pagination">
  <button data-target="1">第1页</button>
  <button data-target="2">第2页</button>
</div>

• 添加一段现成的JS代码（直接复制使用即可）来控制切换：

document.querySelectorAll('.pagination button').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetPage = btn.getAttribute('data-target');
    document.querySelectorAll('.page-section').forEach(section => {
      section.style.display = section.getAttribute('data-page') === targetPage ? 'block' : 'none';
    });
  });
});

• 注意这个方案依赖JS，若用户禁用JS则无法正常分页，但实现最简单，无需创建多个文件。

方案选择建议 #

• 优先选方案1：完全静态，兼容性最好，和你的脚本工作流契合，无需理解Jekyll复杂功能，只要脚本能拆分内容生成文件即可。
• 若内容后续需要频繁修改，选方案2：内容集中在数据文件，修改更方便，无需重新生成所有页面文件。
• 若不想创建多文件，且能接受JS依赖，选方案3。

内容的提问来源于stack exchange，提问作者Shay