feat：写了新文章
This commit is contained in:
mckero authored and 
GitHub committed
1 parent
22547bf2e0
commit
5ecbf97c49
1 file changed
+109
@@ -0,0 +1,109 @@
|
||||
---
|
||||
title: 给你的fuwari博客添加AI文章摘要
|
||||
published: 2025-11-26
|
||||
description: 最近，看到很多博客都有AI摘要，我的博客没有，就想去添加一个AI摘要。
|
||||
tags:
|
||||
- AI
|
||||
- AI摘要
|
||||
category: 教程
|
||||
draft: false
|
||||
lang: zh_CN
|
||||
---
|
||||
|
||||
# 给你的fuwari博客添加AI文章摘要
|
||||
我之前在很多的博客上都可以看到文章摘要，今天看到了相关内容，就给我的博客添加了。
|
||||
|
||||
# 经历
|
||||
我原本是在测试我的博客的`开往`是否可以跳转的，试着试着我跳转到了[张洪Heo](https://blog.zhheo.com/)这个博客，我看到他的网站的文章质量很高（文章的封面就很高级，感觉质量很高）
|
||||
|
||||
|
||||
|
||||
我就点了一下文章摘要，就跳转到了[Heo-如何让博客支持AI摘要，使用TianliGPT自动生成文章的AI摘要](https://blog.zhheo.com/p/ec57d8b2.html)我看了这篇文章，很有启发，这篇文章讲了如何接入还说了一个平台[洪墨AI](https://ai.zhheo.com/docs/)看了文档后我看到有两种接入方式，[插件接入](https://ai.zhheo.com/docs/plugin/)和[代码嵌入](https://ai.zhheo.com/docs/addCode.html)
|
||||
|
||||
## 插件接入
|
||||
插件接入是有要求的，你的博客必须是这些框架的。
|
||||
|
||||
- Wordpress
|
||||
|
||||
- Hexo
|
||||
|
||||
- Halo
|
||||
|
||||
- Typecho
|
||||
|
||||
- Discuz
|
||||
|
||||
- emlog
|
||||
|
||||
- VitePress
|
||||
|
||||
- Z-Blog
|
||||
|
||||
可以看到，列表里面没有astro或者fuwari所以我不能通过插件接入。
|
||||
|
||||
## 代码嵌入
|
||||
文档上是这样说的
|
||||
洪墨AI是用过js在网页中插入iframe的方式提供，体积小巧，功能强大，兼容性强。
|
||||
我的博客就是使用这种方式接入的。
|
||||
|
||||
# 接入
|
||||
首先，先注册洪墨AI（这个很简单吧？就不细讲了。）
|
||||
注册后，花8.9左右买点Token
|
||||
在控制台找到[代码生成器](https://ai.zhheo.com/console/code-generator)往下滑可以找到配置接入代码的地方，你可能需要调整一些设置，比如说字数限制
|
||||
```html
|
||||
<link rel="stylesheet" href="https://ai.zhheo.com/static/public/tianli_gpt.min.css">
|
||||
<script>
|
||||
let tianliGPT_postSelector = '这里修改为指定参数，详见页面底部的摘要参数配置教程';
|
||||
let tianliGPT_wordLimit = 200;
|
||||
let tianliGPT_Title = '智能摘要';
|
||||
let tianliGPT_key = '项目KEY';
|
||||
</script>
|
||||
<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？](https://ai.zhheo.com/docs/summary.html)文档中已经列出一些常见博客主题的选择器值(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写的，如果你的博客也是fuwari你可以试试）
|
||||
```html title="[...slug].astro"
|
||||
<div class="hongmo-ai-container mt-4">
|
||||
<link rel="stylesheet" href="https://ai.zhheo.com/static/public/tianli_gpt.min.css">
|
||||
|
||||
<script is:inline>
|
||||
// 1. 设置参数
|
||||
var tianliGPT_postSelector = '.markdown-content';
|
||||
var tianliGPT_wordLimit = 700; // 已调整为 700，摘要内容会更丰富
|
||||
var tianliGPT_Title = '智能摘要';
|
||||
var tianliGPT_key = '你的项目KEY';
|
||||
|
||||
// 2. 暴力重载脚本 (解决 Swup 切换不显示的问题)
|
||||
(function() {
|
||||
var oldScript = document.getElementById('tianli-gpt-script');
|
||||
if (oldScript) { oldScript.remove(); }
|
||||
|
||||
var script = document.createElement('script');
|
||||
script.id = 'tianli-gpt-script';
|
||||
script.src = 'https://ai.zhheo.com/static/public/tianli_gpt.min.js';
|
||||
script.async = true;
|
||||
|
||||
document.body.appendChild(script);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
```
|
||||
|
||||
插入后部署完就可以看到AI摘要了。
|
||||
|
||||
效果
|
||||
|
||||
Reference in new issue
Block a user