1 核心组件配置
1.1 修改布局文件
打开项目根目录下的 quartz.layout.ts 文件。你需要将 Component.RecentNotes() 添加到你希望展示的区域(通常是侧边栏 left 或 right)。
配置示例如下:
TypeScript
export const defaultPageLayout: PageLayout = {
beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
left: [
Component.PageTitle(),
Component.MobileOnly(Component.Spacer()),
Component.Search(),
Component.Darkmode(),
Component.DesktopOnly(Component.Explorer()),
],
right: [
Component.Graph(),
Component.DesktopOnly(Component.TableOfContents()),
Component.Backlinks(),
// 添加以下这行代码
Component.RecentNotes({ title: "最近更新", limit: 5 }),
],
}
1.2 参数深度定制
-
1.2.1 标题修改:通过
title参数可以更改展示面板的名称,例如改为“最新笔记”或“Recent Updates”。 -
1.2.2 数量控制:通过
limit参数控制显示的条目数量。默认显示 3 条,建议设置为 5 或 10,保持页面侧边栏视觉平衡。 -
1.2.3 隐藏标签:如果你觉得带有 tags 的列表太杂乱,可以通过添加
showTags: false参数来隐藏标签,只显示文章标题和时间。
2 排序与过滤逻辑
添加组件后,你需要了解 Quartz 是如何抓取时间的,以确保列表的展示符合预期。
2.1 日期识别规则
-
2.1.1 优先读取属性:Quartz 会绝对优先读取 Markdown 文件头部 YAML 区域的
date字段(例如date: 2026-03-14)。 -
2.1.2 自动降级读取:如果你没有手动写 YAML 属性,它会自动读取物理文件的系统“修改时间”(Modified Time)。
-
2.1.3 排除特定文件:如果想要某篇文章(例如导航页或草稿)不出现在最近更新里,可以使用
filter参数将其剔除:Component.RecentNotes({ filter: (f) => f.slug !== "排除的文件名" })。