💬静态博客评论系统对比指南

graph LR
    A[静态博客<br/>纯 HTML/JS] --> B{需要评论功能}
    B --> C[第三方评论系统]
    C --> D[自托管数据库]
    C --> E[GitHub Issues]
    C --> F[SaaS 服务]

┌──────────┬──────────────┬──────────┬──────────┬───────────┬──────────────┐
│   系统   │  数据存储     │  免费？  │ 国内速度  │  隐私性   │  上手难度    │
├──────────┼──────────────┼──────────┼──────────┼───────────┼──────────────┤
│  Giscus  │ GitHub 讨论   │   ✅    │   ⚡⚡    │   ⭐⭐⭐  │   极简       │
│  Waline  │ 自托管/SaaS  │   ✅    │   ⚡⚡⚡  │   ⭐⭐⭐  │   中等       │
│  Twikoo  │ 腾讯云/自托管 │   ✅    │   ⚡⚡⚡  │   ⭐⭐⭐  │   中等       │
│utterances│ GitHub Issues │   ✅    │   ⚡⚡    │   ⭐⭐⭐  │   极简       │
│  Disqus  │ 官方服务器    │   ⚠️   │   ⚡     │   ⭐     │   极简       │
│  Artalk  │ 自托管        │   ✅    │   ⚡⚡⚡  │   ⭐⭐⭐  │   中等       │
│  Gitalk  │ GitHub Issues │   ✅    │   ⚡⚡    │   ⭐⭐⭐  │   简单       │
└──────────┴──────────────┴──────────┴──────────┴───────────┴──────────────┘

sequenceDiagram
    participant 读者
    participant 博客页面
    participant Giscus API
    participant GitHub Discussions
    
    读者->>博客页面: 访问文章
    博客页面->>Giscus API: 请求评论（按 pathname）
    Giscus API->>GitHub Discussions: 查询 Discussion
    GitHub Discussions-->>Giscus API: 返回评论数据
    Giscus API-->>博客页面: 渲染评论区
    读者->>博客页面: 发表评论
    博客页面->>Giscus API: 授权 OAuth
    Giscus API->>GitHub Discussions: 写入评论
    GitHub Discussions-->>读者: 评论发表成功

graph TD
    subgraph "前端"
        A[博客页面]
        B[Waline 客户端]
    end
    
    subgraph "服务端（你的 Vercel）"
        C[Waline Server]
    end
    
    subgraph "数据存储（选其一）"
        D1[LeanCloud]
        D2[MySQL]
        D3[SQLite]
        D4[MongoDB]
    end
    
    subgraph "通知"
        E1[邮件通知]
        E2[微信通知]
    end
    
    A --> B
    B --> C
    C --> D1
    C --> D2
    C --> D3
    C --> D4
    C --> E1
    C --> E2

graph TD
    A[用户提交评论] --> B{IP 黑名单检查}
    B -->|命中| C[拒绝]
    B -->|通过| D{敏感词过滤}
    D -->|命中| E[标记待审核]
    D -->|通过| F{Akismet 检测}
    F -->|垃圾| G[自动标记垃圾]
    F -->|正常| H[发布成功]

flowchart LR
    A[访问 /posts/hello] --> B[utterances 脚本]
    B --> C{GitHub 搜索<br/>hello 的 Issue}
    C -->|找到| D[加载 Issue 评论]
    C -->|未找到| E[自动创建 Issue]
    E --> D
    D --> F[渲染评论区]

flowchart TD
    A[选评论系统] --> B{主要读者是谁？}
    
    B -->|国内用户为主| C{愿意折腾吗？}
    B -->|程序员/技术圈| D{在乎极致简单？}
    
    C -->|愿意| E[Waline<br/>功能最全，生态最好]
    C -->|不想折腾| F[Twikoo<br/>腾讯云免费额度够用]
    
    D -->|是| G[Giscus<br/>零配置，体验一流]
    D -->|否| H[Waline<br/>更多功能选择]
    
    B -->|全球用户| I{在乎隐私？}
    I -->|是| J[Giscus<br/>数据在 GitHub]
    I -->|否| K[Disqus<br/>用户基数大]