279 字
1 分钟
给fuwari主题添加置顶功能
2025-10-08

修改工具文件#

修改排序逻辑#

src\utils\content-utils.ts,编辑文件,将 getSortedPosts 函数中的排序逻辑修改为:

export async function getSortedPosts() {
const allBlogPosts = await getCollection("posts", ({ data }) => {
return import.meta.env.PROD ? data.draft !== true : true;
});
const sorted = allBlogPosts.sort((a, b) => {
// 如果一个是置顶一个不是置顶,置顶的排在前面
if (a.data.pinned !== b.data.pinned) {
return a.data.pinned ? -1 : 1;
}
// 都是置顶或都不是置顶,按发布日期时间排序(包含小时分钟秒)
const dateA = new Date(a.data.published);
const dateB = new Date(b.data.published);
return dateA > dateB ? -1 : 1;
});
for (let i = 1; i < sorted.length; i++) {
sorted[i].data.nextSlug = sorted[i - 1].slug;
sorted[i].data.nextTitle = sorted[i - 1].data.title;
}
for (let i = 0; i < sorted.length - 1; i++) {
sorted[i].data.prevSlug = sorted[i + 1].slug;
sorted[i].data.prevTitle = sorted[i + 1].data.title;
}
return sorted;
}

修改文章配置文件#

src\content\config.ts,在lang字段后增加 pinned 字段

pinned: z.boolean().optional().default(false),

修改置顶显示标签#

src\components\PostCard.astro,此文件需要修改两处。

第一处:添加置顶标签判断#

const isPinned = entry.data.pinned === true;

第二处:添加置顶标签显示#

{isPinned && (
<span class="inline-flex items-center mr-2 px-2 py-0.5 text-sm font-medium bg-[oklch(97%_0.1_var(--hue))] dark:bg-[oklch(30%_0.1_var(--hue))] text-[oklch(55%_0.1_var(--hue))] dark:text-[oklch(80%_0.1_var(--hue))] rounded">
<Icon name="material-symbols:push-pin" class="mr-1 text-base" /> 置顶
</span>
)}

这篇文章是否对你有帮助?

发现错误或想要改进这篇文章?

在 GitHub 上编辑此页
给fuwari主题添加置顶功能
https://jk.sb/posts/fuwari-pinned/
作者
业余玩家
发布于
2025-10-08
许可协议
CC BY-NC-SA 4.0