Fuwari博客的功能增强（一）：文章置顶与置底

在内容密集的博客中，某些文章可能需要更高的曝光度（如公告、指南）或更低的优先级（如归档、旧闻）。为此，我们为 Fuwari 博客 新增了 文章置顶（Top）与置底（Bottom） 功能。本文将逐步说明如何通过修改主题配置实现这一能力。

第一步：扩展内容配置字段#

首先，在 src/content/config.ts 中为文章元数据添加 order 字段，用于标识文章的显示优先级：

1
import { defineCollection, z } from "astro:content";
2

3
const postsCollection = defineCollection({
4
  schema: z.object({
5
    title: z.string(),
6
    published: z.date(),
7
    updated: z.date().optional(),
8
    draft: z.boolean().optional().default(false),
9
    description: z.string().optional().default(""),
10
    image: z.string().optional().default(""),
11
    tags: z.array(z.string()).optional().default([]),
12
    category: z.string().optional().nullable().default(""),
13
    lang: z.string().optional().default(""),
14
    order: z.number().default(0), // 新增字段：0=默认, 1=置顶, -1=置底
15
    /* For internal use */
16
    prevTitle: z.string().default(""),
17
    prevSlug: z.string().default(""),
18
    nextTitle: z.string().default(""),
19
    nextSlug: z.string().default(""),
20
  }),
21
});
22

23
export const collections = {
24
  posts: postsCollection,
25
};

说明：

order: 1 表示该文章将被置顶；

order: -1 表示置底；

默认值 0 保持原有排序行为。

第二步：调整文章排序逻辑#

接下来，修改 src/utils/content-utils.ts 中的排序函数，使文章按 order 优先级排序，再按发布时间降序排列：

1
async function getRawSortedPosts() {
2
  const allBlogPosts = await getCollection("posts", ({ data }) => {
3
    return import.meta.env.PROD ? data.draft !== true : true;
4
  });
5

6
  // 自定义排序逻辑
7
  const sorted = allBlogPosts.sort((a, b) => {
8
    // 第一优先级：按 order 字段排序（1 > 0 > -1）
9
    if (a.data.order !== b.data.order) {
10
      return b.data.order - a.data.order; // 降序：置顶(1)在前，置底(-1)在后
11
    }
12

13
    // 第二优先级：order 相同时，按发布日期倒序（新文章在前）
14
    const dateA = new Date(a.data.published);
15
    const dateB = new Date(b.data.published);
16
    return dateA > dateB ? -1 : 1;
17
  });
18

19
  return sorted;
20
}
21

22
export async function getSortedPosts() {
23
  const sorted = await getRawSortedPosts();
24

25
  // 保持原有的前后文章链接逻辑不变
26
  for (let i = 1; i < sorted.length; i++) {
27
    sorted[i].data.nextSlug = sorted[i - 1].slug;
28
    sorted[i].data.nextTitle = sorted[i - 1].data.title;
29
  }
30
  for (let i = 0; i < sorted.length - 1; i++) {
31
    sorted[i].data.prevSlug = sorted[i + 1].slug;
32
    sorted[i].data.prevTitle = sorted[i + 1].data.title;
33
  }
34

35
  return sorted;
36
}

NOTE

如果你在 VS Code 中看到类似 “类型‘Date’的参数不能赋给类型‘string | number’” 的类型检查警告，请忽略。该代码在 Astro 运行时可正常执行，不影响功能。

使用方式#

在任意 Markdown 文章的 Frontmatter 中添加 order 字段即可：

1
---
2
title: 重要公告
3
order: 1  # 置顶
4
published: 2025-11-01
5
---

或

1
---
2
title: 旧版使用说明
3
order: -1  # 置底
4
published: 2023-05-20
5
---