看了 HEO 的如何让博客支持 AI 摘要，使用 TianliGPT 自动生成文章的 AI 摘要，甚是手痒…… 整一个！
前情提要
的确，我可以直接把 HEO 现成的部署方案拿来用，但我是一个有追求的人（雾。事实上，直接使用这种解决方案得到的摘要栏与我博客的设计风格并不是很搭，这就要求我自己写一个前端后端是不可能的，这辈子也不可能的。
好，开干！但首先，第一个问题出现了：我博客的设计风格本身就不太统一。首页的说说轮播和说说页面的数量统计用了 fluid 主题自带的 info，而友链朋友圈页面又没有，直接使用了圆角矩形承载统计信息。
为了解决这个问题，我需要用一样东西代替 info 标签。经过再三深思熟虑，我选用圆角矩形统一替换 info.
而后便有了枯燥的漫长（？）css 编写时间：
CSS
div.ocxqntcontainer {
display: flex;
align-items: center;
justify-content: center;
height: auto;
}
div.ocxqnt {
border: 1px solid #e9e9e9;
border-radius: 1rem;
padding: 1rem;
text-align: left;
width: 100%;
}
span.memos-t {
margin: 0 1rem;
}就这样，圆角矩形大功告成。
摘要部署
现在这个步骤就变得很简单了，对于我用的 fluid 主题，编辑layout/post.ejs即可，在article标签中，类为markdown-body的div标签之前加入以下内容：
HTML
<style>
i.icon-ordchaos-blog-robot,
span.ocxq-ai-title {
font-weight: bold;
font-size: 1.2em;
}
span.ocxq-ai-warn {
font-weight: bold;
}
.ocxq-ai-text.typing::after {
content: '_';
margin-left: 2px;
animation: blink 0.7s infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
</style>
<script>
let tianliGPT_postSelector = '#board .post-content .markdown-body';
let tianliGPT_key = '5Q5mpqRK5DkwT1X9Gi5e';
</script>
<div class="ocxqntcontainer">
<div class="ocxqnt">
<span id="memos-t">
<i class="iconfont icon-ordchaos-blog-robot"></i><span id="memos-index-space"> </span
><span class="ocxq-ai-title">AI摘要</span>
<br />
<span class="ocxq-ai-text"> 生成中... </span>
<br />
<span class="ocxq-ai-warn">摘要由AI自动生成，仅供参考！</span>
</span>
</div>
</div>
<br />
<!--正文部分-->
<script src="https://www.ordchaos.com/js/aisummary.js"></script>这里有几个问题：
- 为什么内容在
id为memos-t的span标签中：因为它同样套用了刚刚写好的圆角矩形，而这个圆角矩形为了适配原有的memos说说而要求内部文字必须拥有memos-t的id. iconfont icon-ordchaos-blog-robot是什么图标：我在iconfont.cn中取用的，因为加入了我的图标库所以拥有图标库前缀icon-ordchaos-blog，若也想选用的话可以直接在iconfont.cn搜索关键词 robot 找到并添加到自己的图标库- 为什么不把样式代码写到 css 里面去：我懒
最后在文件的末尾处加上对 js 文件的引用。
说到 js，由于 HEO 提供的 js 文件中含有生成前端容器的部分，所以必须要删除这部分内容并对其做出部分修改。过程这里就不放了，实在看不懂的可以参考我改好的被压缩了怎么看啊自己想办法现在想看也看不到了（。
而后去爱发电订阅 TianliGPT 并将 api key 填入即可。
效果
题外话
最开始因为不想写 css 而拖了好久…… 最终因为实在眼馋，欲望盖过了懒病才动身做完。
话说我这样改别人写好的 js 应该没问题吧……
那就这样，886！
2024.08.14 更新
自己整了一个无服务器的后端，已经换上了。