Butterfly接入TianliGPT文章摘要

前言

给文章开头加一个 AI 摘要，用的是 TianliGPT 的托管脚本。这里只记录前端怎么接入，服务需要用自己的配置。

美化之前

本站使用 Hexo 6.0.0 + Butterfly 4.5.1，其他版本请按实际情况调整。样式、脚本引入及全局变量用法可参考：

修改方案

1. 确认文章正文选择器

本站文章正文是 #post #article-container，参数设置在摘要脚本之前。页面 DOM 不同，就需要调整这个选择器；不要指向包括评论区在内的整个 body。

2. 按顺序加载

以下选自本站当前的引入方式。tianliGPT_key 故意留为空字符串，必须使用服务提供方给自己站点分配的浏览器接入标识，不能复制本站标识，也不能把服务端模型密钥填在这里。

inject:
  head:
    - <link rel="stylesheet" href="https://ai.zhheo.com/static/public/tianli_gpt.min.css">
  bottom:
    - <script>let tianliGPT_postSelector = '#post #article-container';let tianliGPT_key = '';let tianliGPT_Title = '文章摘要';let tianliGPT_Name = 'June';</script>
    - <script defer src="https://ai.zhheo.com/static/public/tianli_gpt.min.js"></script>

参数放在服务脚本前面。服务能否生成摘要，还要看自己的域名授权和账号配置。

3. 添加样式

新建 source/static/css/tianligpt.css，添加下面的样式。如果之前改过这一块，记得先合并旧样式。

/* TianliGPT样式 */
.post-TianliGPT {
    background: var(--june-secondbg, var(--card-bg)) !important;
}

然后在 _config.butterfly.yml 的 inject.head 里引入：

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/static/css/tianligpt.css">

4. 常见问题

先看脚本和样式请求是否成功，再看正文容器能否匹配，最后检查自己的域名授权及服务配置。如果是授权或额度的问题，需要到服务后台处理。

原总结引用的文档 https://docs_s.tianli0.top/introduction.html 目前返回 421。没有核实新的官方使用条件前，不应承诺原来的套餐、免费额度和后台操作仍然有效。

如果外部脚本失败，文章正文应继续可读。需要离线可维护的摘要时可以另做构建期方案，但那是新功能，不属于本次还原的实现。