上下篇导航（PrevNext）

动机

Quartz v4 默认没有文章底部的上下篇导航。用户在读完一篇文章后，需要回到侧边栏或首页才能找到下一篇——这是静态博客框架（Hexo、Hugo 等）早已标配的体验，Quartz 作为知识库框架缺失了这块。

因此自定义实现了 PrevNext 组件，按日期排序提供线性阅读路径，让读者可以沉浸式连续浏览。

架构总览

核心设计：全站内容按日期排序是 PrevNext 的导航基础，但通过 ConditionalRender 将渲染限定在阅读列表板块内。仓库列表页面完全不出现上下篇导航——两个内容流保持独立。

实现细节

文件清单

核心排序逻辑

// PrevNext.tsx — section 过滤 + 全站排序 + 定位当前页
const sectionPrefix = fileData.slug?.split("/")[0]  // 提取顶层目录名
const pages = allFiles
  .filter((f) =>
    f.dates &&                          // 必须有日期
    f.slug !== "index" &&               // 排除首页
    !f.slug?.startsWith("tags/") &&     // 排除标签页
    f.slug?.startsWith(sectionPrefix + "/")  // 仅当前 section 的文件
  )
  .sort(byDateAndAlphabetical(cfg))     // 按日期降序 + 字母排序

const currentIndex = pages.findIndex((f) => f.slug === fileData.slug)

// 降序排列下，数组前一位置是更新的文章，后一位置是更老的。
// 交换索引方向使：「上一篇」→ 更老的文章，「下一篇」→ 更新的文章
const prev = pages[currentIndex + 1]   // 上一篇（更老）
const next = pages[currentIndex - 1]   // 下一篇（更新）

布局注册

// quartz.layout.ts — afterBody 区
Component.ConditionalRender({
  component: Component.PrevNext(),
  condition: (page) =>
    page.fileData.slug?.startsWith("阅读列表/") ||
    page.fileData.slug?.startsWith("仓库列表/"),
}),

设计决策