如何给博客增加AI摘要

网上冲浪时看到很多博主的博客的文章都有一个ai摘要功能，秉着别人有的，我也想要的原则。于是特意去了解给博客增加ai摘要的方法。经过总结汇总，大致明白了原理：

通过对接一个第三方ai平台，将文章内容发送给ai让其生成摘要，然后作为文章的附属字段。有的为了更加灵活，提供了实时生成摘要，但是本质都是对接第三方ai平台。

知道了原理，下面就是实践了。不过基于长久开发养成的习惯，我在做项目之前会三省：

1. 自己是否了解清楚了，技术上可行乎？

2. 网上有没有现成的，避免重复造轮子，网上现成的能否二改满足自己的要求？

3. 如果让自己从零开始做能否实现并达到自己的要求？耗费的时间经历与收获是否成正比。

所以在了解清楚博客ai摘要的大致原理后，我首先就是针对博客所用框架typecho寻找是否有对应插件，经过查询和对比，最后选择的插件是：AISummary

从插件提供的配置来看，使用方式是很简单的只需要确定对接的ai平台。填入模型名称，sk-密钥基本就可以了。

这里博主尝试了两个平台，都提供免费使用sk的，亲测是可用的。一个是阿里千问，一个Kimi。经过对比后，博主选择的是Kimi。

最后，插件提供的生成的默认样式不太好看，所以这里针对主题样式写了一个自定义ai摘要的样式效果。最终的效果如下：

为了方便同主题的想要使用，同时也可以提供借鉴，这里把自定义样式的代码提供出来。

自定义样式代码：

<style>
.aisummary{
    background: #f7f7f9;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 16px -4px #2c2d300c;
    border: 1px solid #e3e8f7;
    margin-bottom: 16px;
}
</style>

...正文摘要前后固定文字
<p style="display: flex;align-items: center;margin-bottom: 8px;color: #465CEB; ">
    <iconify-icon icon="tabler:brand-bilibili" class="text-lg px-1"></iconify-icon>AI摘要
</p>
<p style="background: #fff;border-radius: 8px;padding: 8px 12px;border: 1px solid #e3e8f7;
margin-bottom: 8px;     font-size: 15px; ">
    {{text}}
</p>
<p style="font-size: 14px;color: rgba(60, 60, 67, 0.8);margin-bottom: 0;padding: 0 12px; ">
此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结
</p>

    感兴趣的可以去尝试一下，插件这里增加的ai摘要是作为文章的附属字段，后台管理也支持手动二次生成。可以说不会特别占用资源和带宽。毕竟在ai如此火热的互联网当下，博客的技术也得与时俱进不是。