国庆节10月1日
--


详细讲解文章页AI摘要打字机组件的工作原理、配置方式和补全脚本的使用方法,帮助你快速为博客文章生成自然、人味十足的摘要。

博客为每篇文章详情页顶部配备了一个 AI 摘要打字机组件,读者打开文章时会以打字机动画形式逐字展示文章摘要,提升阅读体验。
description 字段,没有时才由 AI 补全所有文章的摘要来源由 frontmatter 中的 descriptionSource 字段标记:
| 值 | 含义 | 页面显示 |
|---|---|---|
manual | 人工编写 | 📝 人工编写 |
ai | 千问 AI 生成 | 🧠 AI 摘要 |
你完全可以自己写 description 并标记 descriptionSource: manual,这样就不会被 AI 覆盖。
在你的文章 frontmatter 中添加 description 字段即可:
1---2title: 我的文章标题3published: 2026-04-154description: "一段自然的、像博客导语一样的摘要文字,60~120字左右。"5descriptionSource: manual6tags:7 - 标签8category: 分类9---字段说明:
manual 表示你自己写的,ai 表示由脚本生成的。如果你的文章有 description 字段,脚本会直接跳过这篇文章,不会做任何改动。只有当你新增了一篇文章但没有写 description 时,补全脚本才会介入。
在项目根目录执行:
1npx tsx scripts/fill-descriptions.tssrc/content/posts/ 下所有 .md 和 .mdx 文件description 字段的文章description 字段descriptionSource: ai 标记description 的文章 完全不动,不会覆盖你的手写内容1[09:15:32] 🚀 AI 摘要补全脚本启动2[09:15:32] 📡 模型: qwen-plus3[09:15:32] 📂 文章目录: src/content/posts4[09:15:32] 📊 扫描到 29 篇文章5[09:15:32] 📋 27 篇已有描述 -> 跳过6[09:15:32] 📝 2 篇缺少描述 -> 准备补全7[09:15:33] ⏳ 正在生成: 技术分享/新文章.md8[09:15:34] ✅ 补全完成: 技术分享/新文章.md9[09:15:34] → 折腾了两天终于把Nginx反代配通了……10[09:15:35] 🏁 执行完毕11[09:15:35] 跳过(已有描述): 27 篇12[09:15:35] 需要补全: 2 篇13[09:15:35] ✅ 成功: 2 篇14[09:15:35] ❌ 失败: 0 篇我们在补全脚本中内置了一套精心设计的提示词(Prompt),让千问知道:
所以生成出来的摘要更像这样:
折腾了两天终于把Nginx反代配通了,中间踩了三个莫名其妙的坑,趁热记下来免得下次再掉进去 😤
而不是:
本文主要介绍了Nginx反向代理的配置方法,包括常见的错误排查和解决方案。
如果你希望每次 pnpm build 时自动补全新文章的摘要,可以修改 package.json 的 build 脚本:
1{2 "scripts": {3 "build": "npx tsx scripts/fill-descriptions.ts && node scripts/generate-icons.js && astro build && pagefind --site dist"4 }5}这样每次部署前都会自动检查并补全缺失的摘要,无需手动运行脚本。
scripts/fill-descriptions.ts 已加入 .gitignore,因为它包含千问 API 密钥,确保不会泄露到公开仓库。description 和 descriptionSource,不会触碰文章正文内容。description 且未运行过补全脚本,文章页面不会显示摘要区域,不影响正常页面渲染。qwen-plus(性价比之选),如有需要可切换为 qwen-max(质量更好)或 qwen-turbo(更快更便宜)。如果你喜欢,那么欢迎来到我的世界!
了解更多暂未播放



"所有的相遇都是久别重逢。"—— 未知


