138 lines
4.7 KiB
Markdown
138 lines
4.7 KiB
Markdown
---
|
||
title: Artalk评论区接入AI摘要的尝试
|
||
date: 2026-01-31T01:00:00.000Z
|
||
draft: false
|
||
categories:
|
||
- 尝试
|
||
- 技术
|
||
tags:
|
||
- Artalk
|
||
- AI
|
||
- GitHub Actions
|
||
- SiliconFlow
|
||
ai_comment: >-
|
||
把AI摘要伪装成首条评论的创意很巧妙，既保持了界面简洁又增强了互动感。技术上把生成逻辑放在CI/CD环节是明智选择，不过建议在AI提示词里加入"避免使用第一人称"的约束——否则当AI说"我很喜欢这篇文章"时，读者可能会困惑这是真实用户还是机器。另外，GitHub
|
||
Actions自动提交的颗粒度可以细化到单篇文章，避免全量扫描带来的不必要计算开销。
|
||
slug: 20260131
|
||
---
|
||
|
||
最近看到很多博客都加上了 AI 摘要功能，觉得挺有意思，于是也尝试给自己的博客加了一个。
|
||
|
||
我的需求很简单：
|
||
1. **自动生成**：发布新文章时自动调用 API 生成摘要。
|
||
2. **融入评论区**：不想额外增加 UI 模块，最好能像一条普通的“置顶评论”一样展示。
|
||
3. **零成本**：利用现有的免费 API（DeepSeek V3）。
|
||
|
||
目前已经实现，效果还算满意。简单记录一下实现过程。
|
||
|
||
## 1. 后端：生成 AI 评论
|
||
|
||
写了一个简单的 Node.js 脚本，遍历文章目录，提取正文并调用 SiliconFlow 的 API 生成评论，最后回写到 Front Matter 中。
|
||
|
||
核心代码 (`scripts/ai_comment.js`)：
|
||
|
||
```javascript
|
||
// ... (imports & config)
|
||
|
||
async function generateComment(content) {
|
||
const prompt = `你是一个热情的博客读者。请阅读以下文章内容，并写一段简短的评论（100字以内）。
|
||
...
|
||
文章内容：${content.substring(0, 2000)}...`;
|
||
|
||
// 调用 SiliconFlow API
|
||
const response = await axios.post(SILICONFLOW_URL, {
|
||
model: 'deepseek-ai/DeepSeek-V3',
|
||
messages: [{ role: 'user', content: prompt }],
|
||
// ...
|
||
}, { headers: { 'Authorization': `Bearer ${process.env.SILICONFLOW_API_KEY}` } });
|
||
|
||
return response.data.choices[0].message.content.trim();
|
||
}
|
||
|
||
// 遍历文件并处理
|
||
async function processFiles(dir) {
|
||
// ...
|
||
if (parsed.data.ai_comment) return; // 跳过已生成的文章
|
||
|
||
const comment = await generateComment(cleanContent);
|
||
if (comment) {
|
||
parsed.data.ai_comment = comment;
|
||
// 回写文件
|
||
await fs.promises.writeFile(filePath, matter.stringify(parsed.content, parsed.data));
|
||
}
|
||
}
|
||
```
|
||
|
||
## 2. 自动化：GitHub Actions
|
||
|
||
为了省去手动运行脚本的麻烦，将其集成到了 CI/CD 流程中。
|
||
|
||
在 `.github/workflows/upy.yml` 中添加步骤：
|
||
|
||
```yaml
|
||
# 生成 AI 评论
|
||
- name: Generate AI Comments
|
||
env:
|
||
SILICONFLOW_API_KEY: ${{ secrets.SILICONFLOW_API_KEY }}
|
||
run: node scripts/ai_comment.js
|
||
|
||
# 提交变更 (注意需要 permissions: contents: write)
|
||
- name: Commit AI Comments
|
||
run: |
|
||
git config --global user.name "GitHub Actions"
|
||
git config --global user.email "actions@github.com"
|
||
git add content/post
|
||
if ! git diff-index --quiet HEAD; then
|
||
git commit -m "chore: auto-generate ai comments [skip ci]"
|
||
git push
|
||
fi
|
||
```
|
||
|
||
## 3. 前端：Artalk 集成
|
||
|
||
最后一步是在前端展示。利用 Artalk 的事件机制，将 AI 评论动态插入到评论列表头部，并加上打字机特效。
|
||
|
||
核心代码 (`assets/js/main.js`)：
|
||
|
||
```javascript
|
||
window.artalk.on('list-loaded', function() {
|
||
// 检查是否有 AI 评论数据
|
||
if (window.artalkConfig.aiComment && !document.querySelector('.atk-ai-comment')) {
|
||
var listBody = document.querySelector('.atk-list-body') || document.querySelector('.atk-list');
|
||
|
||
if (listBody) {
|
||
// 避免同时出现“此时无声胜有声”
|
||
var noComment = document.querySelector('.atk-list-no-comment');
|
||
if (noComment) noComment.style.display = 'none';
|
||
|
||
// 创建 DOM 结构
|
||
var aiDiv = document.createElement('div');
|
||
aiDiv.className = 'atk-comment atk-ai-comment';
|
||
aiDiv.innerHTML = `...`; // 填充 HTML
|
||
|
||
// 插入到列表头部
|
||
listBody.prepend(aiDiv);
|
||
|
||
// ... (打字机效果)
|
||
}
|
||
}
|
||
});
|
||
```
|
||
|
||
## 4. 适配 PJAX
|
||
|
||
由于博客使用了 PJAX，页面切换时需要重新初始化 Artalk。我们将初始化逻辑封装在 `initArtalk` 函数中，并在 `pjax:complete` 事件中调用。
|
||
|
||
```javascript
|
||
// mypjax.js
|
||
document.addEventListener("pjax:complete", function () {
|
||
// ...
|
||
// 重载评论
|
||
if (typeof window.initArtalk === 'function') {
|
||
window.initArtalk();
|
||
}
|
||
});
|
||
```
|
||
|
||
这样就完成了一个简单实用的 AI 摘要功能。既丰富了页面内容，又没有过度干扰阅读体验。
|