给你的fuwari博客添加AI文章摘要#

我之前在很多的博客上都可以看到文章摘要，今天看到了相关内容，就给我的博客添加了。

经历#

我原本是在测试我的博客的开往是否可以跳转的，试着试着我跳转到了张洪Heo这个博客，我看到他的网站的文章质量很高（文章的封面就很高级，感觉质量很高）

我就点了一下文章摘要，就跳转到了Heo-如何让博客支持AI摘要，使用TianliGPT自动生成文章的AI摘要我看了这篇文章，很有启发，这篇文章讲了如何接入还说了一个平台洪墨AI看了文档后我看到有两种接入方式，插件接入和代码嵌入

插件接入#

插件接入是有要求的，你的博客必须是这些框架的。

Wordpress
Hexo
Halo
Typecho
Discuz
emlog
VitePress
Z-Blog

可以看到，列表里面没有astro或者fuwari所以我不能通过插件接入。

代码嵌入#

文档上是这样说的洪墨AI是用过js在网页中插入iframe的方式提供，体积小巧，功能强大，兼容性强。我的博客就是使用这种方式接入的。

接入#

首先，先注册洪墨AI（这个很简单吧？就不细讲了。）注册后，花8.9左右买点Token 在控制台找到代码生成器往下滑可以找到配置接入代码的地方，你可能需要调整一些设置，比如说字数限制

1
<link rel="stylesheet" href="https://ai.zhheo.com/static/public/tianli_gpt.min.css">
2
<script>
3
let tianliGPT_postSelector = '这里修改为指定参数，详见页面底部的摘要参数配置教程';
4
let tianliGPT_wordLimit = 200;
5
let tianliGPT_Title = '智能摘要';
6
let tianliGPT_key = '项目KEY';
7
</script>
8
<script src="https://ai.zhheo.com/static/public/tianli_gpt.min.js"></script>

日常其实只用改动这些参数 tianliGPT_wordLimit：字数限制 tianliGPT_Title：AI摘要标题

如何填写tianliGPT_postSelector参数？#

tianliGPT_postSelector这个参你自己去获取，洪墨AI文档中有记载，如何获取tianliGPT_postSelector？文档中已经列出一些常见博客主题的选择器值(tianliGPT_postSelector)

这个列表中也没有astro或fuwari，由于我代码能力不行，我就直接把文章页面的HTML源代码丢给了Gemini，Gemini分析出我应该填写.markdown-content(Gemini上下文还是太高了，我原本想把源代码丢给Claude的但是Claude吃不下那么多)

插入到模板#

得到代码之后，我们就要把代码填入到模板，经过Gemini的分析，我们应该把代码插入src/pages/posts/[...slug].astro这个应该是文章的模板。

找到src/pages/posts/[...slug].astro中的最后一个</MainGridLayout>（应该是在文件最下面）找到</MainGridLayout>上面的</div>

这是我使用的代码（刚开始我是使用Gemini写的，但是效果太差所以我就换Claude来写了，如果你的博客也是fuwari你可以试试）

1
<div class="hongmo-ai-container mt-4">
2
    <link rel="stylesheet" href="https://ai.zhheo.com/static/public/tianli_gpt.min.css">
3

4
    <!-- 配置脚本 - 使用 data-astro-rerun 确保每次都执行 -->
5
    <script is:inline data-astro-rerun>
6
        window.tianliGPT_postSelector = '.markdown-content';
7
        window.tianliGPT_postURL = '*/posts/*';
8
        window.tianliGPT_wordLimit = 700;
9
        window.tianliGPT_Title = '智能摘要';
10
        window.tianliGPT_key = 'S-HMJ7UXQGBIAZ0U8Q';
11

12
        // 立即尝试初始化
13
        function tryInitTianliGPT() {
14
            if (typeof window.tianliGPT === 'object' &&
15
                typeof window.tianliGPT.checkURLAndRun === 'function') {
16

17
                // 清除旧的摘要
18
                const old = document.querySelector('#tianliGPT');
19
                if (old) old.remove();
20

21
                // 等待 DOM 和动画
22
                setTimeout(() => {
23
                    if (document.querySelector('.markdown-content')) {
24
                        window.tianliGPT.checkURLAndRun();
25
                        console.log('✓ TianliGPT 初始化成功');
26
                    }
27
                }, 500);
28
            } else {
29
                // 脚本还没加载,继续等待
30
                setTimeout(tryInitTianliGPT, 200);
31
            }
32
        }
33

34
        // 开始尝试
35
        tryInitTianliGPT();
36
    </script>
37

38
    <!-- 主脚本 - 只加载一次 -->
39
    <script is:inline>
40
        // 使用全局标志避免重复加载脚本
41
        if (!window.tianliGPT_scriptLoaded) {
42
            window.tianliGPT_scriptLoaded = true;
43
            const script = document.createElement('script');
44
            script.src = 'https://ai.zhheo.com/static/public/tianli_gpt.min.js';
45
            script.async = true;
46
            document.body.appendChild(script);
47
        }
48
    </script>
49
</div>

插入后部署完就可以看到AI摘要了。

效果