博客新增随笔功能
加入了随笔功能。
为什么要单独开一个随笔分类
博客里原有的分类都是「成体系」的:前端、数据结构算法、技术工具,每篇都得把概念、代码、坑写全,一篇下来至少一两千字。但实际上每天遇到的更多是碎片:读了某个库的文档觉得设计得好、调试时撞上一个五分钟就绕过去的小坑、看到一个 API 命名想吐槽两句。这些内容撑不起一篇正经文章,硬写就会掺水,不写又会忘。
所以我们单独开了「随笔」这个分类,专门放这种短内容。写的时候不要求结构完整,一段话也行,配一小段代码也行。
目录与分类是怎么对应的
博客的文章全部放在 src/views/blog/docs 下,按目录组织,目录名前面的数字前缀只用来控制排序,不参与路径。新增随笔功能就是在 docs 下建了一个 10.随笔 目录:
src/views/blog/docs/
├── 01.前端/
├── 02.技术工具/
├── 03.数据结构算法/
└── 10.随笔/
├── 01.new.md
└── 02.new.md
需要注意的是,文章的实际访问地址并不是文件路径。每篇 md 顶部都有一个自定义路由块(就是本文最上面那段声明),它会覆盖 unplugin-vue-router 根据文件路径推导出来的路由,里面的 path 字段形如 /pages/3a8865,meta 字段带上标题、日期和分类。
真正决定这篇文章归到哪个分类下的是 meta.category,而不是它放在哪个目录里。文件路径 /blogDocs/... 只是路由的 name,直接拿它当 URL 会 404。这一点在写脚本处理文章清单时特别容易踩:sitemap 里必须写路由块里解析出来的 path,用文件路径会全部 404。
摘要与列表展示
随笔通常很短,但列表页仍然需要一段摘要。正文里的 <!-- more --> 是从早期 vuepress 主题沿用下来的分隔标记,习惯上把第一段概括写在它前面。
现在生成 SEO description 的逻辑走的是 scripts/gen-blog-routes.ts 里的 extractSummary:它会剥掉顶部的路由块、围栏代码块、行内码、图片和链接语法、目录占位符、标题符号,再取前 150 字并在句末标点处收口,避免摘要断在半句上。所以随笔的第一句话最好就是完整的一句结论,别用「最近……」这种没有信息量的开头。
新增文章后别忘了重跑生成脚本
路由清单和 SEO 映射是构建期之外由脚本生成并提交到仓库的,不会自动跟着 md 变。新增或删除文章之后要手动重跑一次:
npx tsx scripts/gen-blog-routes.ts
漏跑的后果是文章能访问,但不在 sitemap 里,搜索引擎发现不了。这个坑我们已经踩过一次,几百篇文章的具体 URL 都没进 sitemap,收录情况一直很差。

还没有留言,来发表第一条吧~