rename content/post to content/posts

2026-06-02 15:37:49 +08:00
1 parent cda4dbb24b
commit bcd4bc9282
@@ -0,0 +1,137 @@
+---
+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 摘要功能。既丰富了页面内容，又没有过度干扰阅读体验。