梨尽兴 | Li's Blog

Back
an image targetting my articlean image targetting my article
7 min
中文
主题魔改 /
aisummary /
typescript /
css /
astro

本地实现Astro文章AI摘要

纯静态的ai文章摘要
浏览 | 评论
机器人
Li's AI Summary
Li's AI
文章介绍了在本地实现Astro文章AI摘要的方法。作者首先从TianliGPT的AI摘要服务开始，但感觉不够自定义。之后尝试了KonoXIN的文章AI摘要实现思路，发现存储在Index DB里的摘要占用空间小，但每次访问文章时都会请求一次API，不太方便。因此，作者决定本地生成文章摘要，并将其放置在文章的Frontmatter块末尾。作者还提到了使用星火Spark-Lite和Vercel部署项目的过程，以及如何配置环境变量和引入相关代码片段。最后，作者提供了一些关于如何使用项目的说明。
本摘要由AI生成，仅供参考，内容准确性请以原文为准

起因#

在之前的NotionNext架构博客使用过一两周 TianliGPT ↗ 的AI摘要服务，虽然只需10￥就有足够的TOKEN余额，对于我这种小博客肯定是绰绰有余，但感觉还是不够自定义 （想完全自建使用） 详见《讨论NotionNext如何配置AI摘要》 ↗

之后呢给博客迁移到了 Astro 架构，看到了 konoXIN的文章 ↗ ，大佬的AI摘要实现思路也很完美，试了一周感觉不错，不过就是有点小小的不足，因为他的摘要是存储在 Index DB 里的，虽然占用的空间小，并且也足够存储生成的摘要，但每个人在访问文章时都会请求一次API还是太那啥了 （即使TOKEN无限用）

思考了几天，也试了试，还是想本地生成文章摘要再放置在文章的 Frontmatter 块末尾，于是结合 @Liushen ↗ 和 @konoXIN ↗ 的思路，捣鼓了几天 实则是摸鱼~ ，初步实现了我的需求 应该不会有啥大毛病吧

前置#

API这部分就直接采用 konoXIN文章 ↗ 里的代码了（如有侵权可以与我联系）

申请星火Spark-Lite#

  1. 访问 星火大模型API ↗
  2. 下滑页面到如下位置，选择 Spark-Lite，点击立即调用

图1

  1. 点击创建新应用，之后侧边栏点击 Spark Lite ，选择领取无限量即可

图2

  1. 之后右侧会出现你的 APPID 、 APISecret 、 APIKey , 需要记住保存好

图2

搭建 Vercel API#

  1. 点击上方任一按钮导入项目成功后，进入该项目在 Vercel 上的仪表盘 Dashboard 选项

  2. 在项目仪表盘中找到 Settings 选项

  3. 在 Settings 下找到 Environment Variables 部分

  4. 在这里添加你的 SPARK_APPID , SPARK_API_KEY 和 SPARK_API_SECRET ，对应如下表：

    Spark Lite WebsocketVercelServer
    APPIDSPARK_APPID
    APIKeySPARK_API_KEY
    APISecretSPARK_API_SECRET

  5. 配置完环境变量后需重新部署一次项目

项目部署后，Vercel 会提供一个类似 https://[your-project-name].vercel.app 的域名。代理函数可以通过 /api/spark-proxy 接口访问。

如果需要想改为自己的子域名，需要在域名控制台解析一下，让其可以在国内访问

引入#

  1. 在 src/plugins 路径下添加脚本文件 aisummary.js ↗

  2. 在 src/assets/styles 路径下添加样式文件 aisummary.css ↗

  3. 在 scripts/ 路径下添加脚本文件 generateSummary.ts ↗

  4. 在 src/plugins 路径下添加配置文件 aisummary.config.js ↗

  5. 在 src/components/BaseHead.astro 和 src/layouts/BlogPost.astro 中添加初始化代码

    BaseHead.astro
    ---
import aisummaryConfig from '../plugins/aisummary.config.js?url';
import aisummary from '../plugins/aisummary.js?url';
import aisummaryCss from '../assets/styles/aisummary.css?url';
---

{/* AISummary 工具 */}
<script src={aisummaryConfig} is:inline></script>
{Astro.url.pathname.startsWith('/blog/')
  && !/^\/blog\/\d+\/?$/.test(Astro.url.pathname)
  && <script src={aisummary} is:inline></script>}
{/* AISummary 样式 */}
<link rel='stylesheet' href={aisummaryCss} />
    astro

配置#

主要集中在 aisummary.config.js 和 .env 文件进行配置和修改变量，列表如下（文件中也有详细注释说明）：

供离线脚本读取的配置项#

配置项示例值说明
AI_SUMMARY_APIhttps://your-api-server/api/spark-proxy摘要服务地址
AI_SUMMARY_KEYyour-api-key摘要服务密钥
AI_SUMMARY_MODELlite模型名称
AISUMMARY_CONCURRENCY2并发执行摘要生成任务数
AISUMMARY_COVER_ALLfalse是否重新生成所有摘要
AISUMMARY_MAX_TOKEN5000用于截取文章内容
AISUMMARY_MIN_CONTENT_LENGTH50用于判断是否跳过

说明：使用前文 Spark-Lite 模型搭建Vercel代理服务器不需配置 AI_SUMMARY_KEY 变量，可保持空值

供博客页面使用的配置项#

配置项示例值说明
aisummaryTypingAnimatetrue是否开启打字机动画
aisummaryPostSelector#content文章内容容器选择器

如何知道 aisummaryPostSelector ?

进入任一博客文章页面，按下 F12 进入开发者控制台，再按下 Ctrl + Shift + C ，并选取 正文部分 进行如下步骤复制后即为 aisummaryPostSelector 的值

图3

使用#

  1. 补全缺失库 npm install -D xxx
  2. 确保 aisummary.config.js 和 .env 文件里变量配置正确
  3. 在项目主目录运行 npx tsx scripts/generate-summary.ts 即可

后记#

Vercel代理服务器部分的代码基本来自于 @konoXIN ↗ ，主要修改的本地脚本的部分，感觉代码有点乱，还需要再整理一下

参考#

本地实现Astro文章AI摘要
https://blog.ljx.icu/blog/aisummary-blog
Author Ljx
Published at December 18, 2025
Copyright CC BY-NC-SA 4.0
Buy me a cup of coffee ☕.

自动化友链检测

通过Waline API获取最新评论并显示
Comment seems to stuck. Try to refresh?✨