22. 文章置顶指南

1097 字
5 分钟
22. 文章置顶指南

文章置顶指南#

这个项目自带文章置顶功能,不需要另外装插件。

你只要在文章头信息里加上一行:

pinned: true

这篇文章就会被排到普通文章前面。

先说结论#

如果你只想马上用起来,直接照这个写:

---
title: 你的文章标题
published: 2026-04-20
description: 一句话简介
tags: [学习笔记]
category: 博客搭建
author: Coldairboy
image: ./images/firefly1.avif
pinned: true
---

保存后刷新页面,这篇文章就会优先显示。

这个项目为什么确定支持置顶#

我已经帮你查过代码了,结论很明确:

  1. 文章数据模型里已经定义了 pinned 字段
  2. 文章排序逻辑会先判断 pinned
  3. 页面上还会显示“置顶”标记

也就是说,这不是“可能支持”,而是已经做好的功能。

正确用法#

1. 打开你要置顶的文章#

这个项目真正读取的文章目录是:

src/content/posts/

比如你要置顶第 21 篇文章,就打开:

src/content/posts/21.md

2. 在文章头信息里加入 pinned: true#

---
title: 21. B站视频嵌入指南
published: 2026-04-19
description: 博客B站视频嵌入教程
tags: [博客配置]
category: 博客搭建
author: Coldairboy
image: ./images/firefly1.avif
pinned: true
---

3. 保存并本地预览#

Terminal window
cd E:\GITHUB\firefly-replica
pnpm dev

然后刷新浏览器,看首页文章列表是不是已经跑到前面了。

4. 确认没问题后再推送#

Terminal window
cd E:\GITHUB\firefly-replica
.\publish-blog.bat

取消置顶怎么做#

有两种方式都可以:

方法一:直接删除这一行#

pinned: true

方法二:改成 false#

pinned: false

一般来说,直接删掉最省事。

置顶后的实际效果#

这个项目的逻辑是:

  1. 先看文章是不是置顶
  2. 置顶文章排在前面
  3. 如果都是置顶,或者都不是置顶,再按发布日期排序

所以你可以理解成:

  • pinned: true 的文章,会优先排到前面
  • 普通文章,再按日期新旧排序

页面上会怎么显示#

置顶文章通常会有两种变化:

  1. 在文章列表里排得更靠前
  2. 在文章信息区域显示“置顶”标记

所以如果你看到文章顺序变了,同时页面上还有“置顶”字样,说明功能已经正常生效。

新手最常见的错误#

1. 把 sticky: true 当成置顶#

这个项目文章置顶认的是:

pinned: true

不是:

sticky: true

sticky 这个词在项目里主要是给导航栏、侧边栏那类布局用的,不是文章置顶字段。

2. 改错目录#

这个项目真正读取的是:

src/content/posts/

如果你只改了 src/content/ 里的镜像文件,但没改 src/content/posts/,页面可能不会按你预期变化。

3. 改完了没刷新#

有时候不是置顶没生效,而是浏览器还没刷新出来。

先试这几个动作:

  1. 保存文件
  2. 刷新本地页面
  3. 如果还没变化,重启一次 pnpm dev

4. 以为所有页面都会按置顶排序#

这里有个细节很重要:

  • 首页 / 普通文章列表:会看置顶
  • 归档页:按纯发布时间排序,不受置顶影响

也就是说,如果你在归档页面看到顺序没变,不代表置顶失效。

最适合你的使用方式#

如果你现在只是想让一篇重点文章长期挂在最前面,最简单的做法就是:

  1. 打开那篇文章
  2. 在头信息里加 pinned: true
  3. 本地预览确认
  4. 推送到 GitHub

就这么简单。

推荐场景#

下面这些文章很适合置顶:

  • 自我介绍
  • 博客导航
  • 新手入门说明
  • 最重要的一篇教程
  • 你的代表作文章

不建议滥用#

如果你很多文章都设置成置顶,会出现两个问题:

  1. 首页前面全是置顶,看起来会很乱
  2. 新文章会被压到后面,不容易被看到

比较稳的做法是只保留 1 到 3 篇置顶文章。

一份可直接复制的模板#

---
title: 文章标题
published: 2026-04-20
description: 一句话简介
tags: [学习笔记]
category: 博客搭建
author: Coldairboy
image: ./images/firefly1.avif
pinned: true
---

最后总结#

这个项目有原生文章置顶功能,而且用法非常简单。

你只需要记住一句话:

pinned: true

写上它,就是置顶。删掉它,或者改成 false,就是取消置顶。

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!

赞助
22. 文章置顶指南
https://blogboy.eu.cc/posts/22/
作者
Coldairboy
发布于
2026-04-14
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image of the Author
Coldairboy
记录学习笔记、折腾过程和日常灵感。
公告
Hi,欢迎来到 Coldairboy学习笔记。
音乐
封面

音乐

暂未播放

0:00 0:00
暂无歌词
分类
标签
站点统计
文章
31
分类
3
标签
5
总字数
36,702
运行时长
0 天
最后活动
0 天前

目录