为最近笔记添加排序和筛选

有时候会更新一些目录页说明，更新说明时会出现博客左上角的“最近笔记”模块显示成这些目录页的更新，于是在自定义设置中记录一下Component.RecentNotes({})的使用。

quartz 主题官方有一篇介绍：最近笔记

设置配置

自定义筛选：传递额外参数 Component.RecentNotes({ filter: someFilterFunction })。筛选函数应具有签名 (f: QuartzPluginData) => boolean。
自定义排序：传递额外参数 Component.RecentNotes({ sort: someSortFunction })。默认情况下，Quartz 会按日期排序并在有相同日期时按字母顺序排序。排序函数应具有签名 (f1: QuartzPluginData, f2: QuartzPluginData) => number。可参考 quartz/components/PageList.tsx 中的 byDateAndAlphabetical 示例。

1
import { QuartzPluginData } from "./quartz/plugins/vfile"
2

3
// ...
4

5
Component.DesktopOnly(Component.RecentNotes({
6
  limit: 3,
7
  showTags: false,
8
  filter: (f) => f.frontmatter?.tags?.includes('intro') ? false : true,
9
  sort: (f1: QuartzPluginData, f2: QuartzPluginData) => {
10
  if (f1.frontmatter?.date && f2.frontmatter?.date) {
11
    // Sort by date
12
    if (f1.frontmatter?.date && f2.frontmatter?.date) {
13
    return f1.frontmatter.date < f2.frontmatter.date ? 1 : -1
14
    } else if (f1.frontmatter?.date && !f2.frontmatter?.date) {
15
    return -1
16
    } else if (!f1.frontmatter?.date && f2.frontmatter?.date) {
17
    return 1
18
    }
19

20
    const f1Title = f1.frontmatter?.title.toLowerCase() ?? ""
21
    const f2Title = f2.frontmatter?.title.toLowerCase() ?? ""
22
    return f1Title.localeCompare(f2Title)
23
  }
24
  return 0
25
  }
26
})),

在frontmatter.ts中添加页面参数：

1
declare module "vfile" {
2
  interface DataMap {
3
    aliases: FullSlug[];
4
    frontmatter: { [key: string]: unknown } & {
5
      title: string;
6
    } & Partial<{
7
        tags: string[];
8
        aliases: string[];
9
        modified: string;
10
        created: string;
11
        date: string;
12
        lastmod: string;
13
        published: string;
14
        description: string;
15
        socialDescription: string;
16
        publish: boolean | string;
17
        draft: boolean | string;
18
        lang: string;
19
        enableToc: string;
20
        cssclasses: string[];
21
        socialImage: string;
22
        featuredImage: string;
23
        comments: boolean | string;
24
      }>;
25
  }
26
}