导读：博客上线后，添加评论系统、统计分析，让它更有互动性和实用性。

系列文章导航

  1. Hexo + Butterfly 博客搭建指南(一)：本地环境配置与运行
  2. Hexo + Butterfly 博客搭建指南(二)：部署到 Vercel
  3. Hexo + Butterfly 博客搭建指南(三)：评论系统与功能扩展
  4. Hexo + Butterfly 博客搭建指南(四)：常见问题汇总

为什么需要评论系统

有了评论系统，读者可以在文章下面留言交流，博客就不再是单向的内容输出，而是变成了互动社区。

Butterfly 主题支持多种评论系统，我最后选了 Waline，主要因为它：

  • 完全免费 - 自己部署，不用交钱
  • 功能强大 - 支持登录、点赞、邮件通知等
  • 隐私友好 - 数据存在自己的服务器上
  • 国内访问快 - Vercel 的 CDN 覆盖还不错

安装 Waline 评论系统

部署 Waline 服务端

官方推荐的方式是直接部署到 Vercel，免费又方便。

第一步：部署到 Vercel

第二步：创建数据库

  1. 在 Vercel 项目页面，点顶部 Storage 进入存储配置
  2. 选 Create Database，数据库服务选择 Neon，点 Continue
  3. 创建 Neon 账号，直接选 Accept and Create
  4. 数据库配置页面直接 Continue（默认套餐就够了）
  5. 定义数据库名称，也直接 Continue
  6. 创建完成后，点 Open in Neon 跳转到 Neon 管理界面
  7. 在 Neon 左侧选 SQL Editor，把 Waline 提供的 SQL 语句粘贴进去，点 Run 创建表结构
  8. 回到 Vercel，点顶部 Deployments，找到最新一次部署，点 Redeploy 重新部署（让数据库配置生效）
  9. 等部署完成后，点 Visit 就能访问了，这个地址就是你的服务端地址

第三步：绑定域名（可选）

  • 在 Vercel 项目页面，点 Settings → Domains

  • 输入你想绑定的域名，点 Add

  • 到你的域名服务商那里添加 CNAME 记录：

    1
    2
    3
    类型: CNAME
    名称: 你的子域名（比如 comment）
    值: cname.vercel-dns.com

  • 等 DNS 生效后，就能用你自己的域名访问了

  • 评论系统：https://comment.yourdomain.com

  • 评论管理：https://comment.yourdomain.com/ui

官方文档： 如果遇到问题或者想了解更详细的配置，可以查看 Waline 官方文档

在 Butterfly 主题中启用 Waline

编辑 _config.butterfly.yml，找到 comments 配置：

1
2
3
4
5
6
7
8
9
10
11
12
comments:
  use: waline
  lazyload: false  # 是否懒加载评论区
  count: true      # 是否显示评论数量
  card_post_count: false  # 文章卡片是否显示评论数

waline:
  serverURL: https://your-waline-server.vercel.app  # 换成你部署的 Waline 地址
  pageview: true
  emoji: true
  wordLimit: 0
  pageSize: 10

初始化 Waline 管理员

  • 访问 https://your-waline-server.vercel.app/ui/register
  • 注册第一个账号，首个注册的人会被设定成管理员
  • 登录管理员账号后，就能看到评论管理界面，可以审核、删除、标记评论

配置统计分析

Google Analytics

Google Analytics 是最常用的网站统计工具，可以查看访问量、用户来源等数据。

获取追踪 ID：

在 Butterfly 中配置：

编辑 _config.butterfly.yml：

1
2
# Google Analytics
google_analytics: G-XXXXXXXXXX

百度统计

如果读者主要在国内，建议加上百度统计：

获取站点 ID：

在 Butterfly 中配置：

编辑 _config.butterfly.yml：

1
2
# Baidu Analytics
baidu_analytics: 你的站点ID

Microsoft Clarity

Microsoft Clarity 是一个免费的用户行为分析工具，可以看到用户的点击热力图、录屏回放等。

获取 Project ID：

在 Butterfly 中配置：

编辑 _config.butterfly.yml：

1
2
# Microsoft Clarity
microsoft_clarity: 你的Project ID

Cloudflare 分析

Cloudflare 提供的免费网站分析服务，不需要 JavaScript 脚本，性能更好。

获取 Token：

在 Butterfly 中配置：

编辑 _config.butterfly.yml：

1
2
# Cloudflare Analytics
cloudflare_analytics: 你的Token

实用功能扩展

开启文章分享

Butterfly 内置了分享功能，可以在文章末尾显示分享按钮。

编辑 _config.butterfly.yml：

1
2
3
4
5
6
7
8
# Social Share
share:
  enable: true
  position: bottom  # bottom 或 side
  options:
    - twitter
    - facebook
    - linkedin

添加文章打赏

如果你想接受读者的打赏，可以配置打赏功能：

1
2
3
4
5
6
7
8
9
10
# Reward
reward:
  enable: true
  QR_code:
    - img: /img/alipay.png
      link:
      text: 支付宝
    - img: /img/wechat.png
      link:
      text: 微信

开启版权声明

保护你的原创内容，在文章末尾自动添加版权声明：

1
2
3
4
5
# Copyright
copyright:
  enable: true
  decode: false
  limit: 50

优化 SEO

配置 Open Graph

让文章在社交媒体分享时显示更好的预览：

1
2
3
4
# Open Graph
open_graph:
  enable: true
  twitter_card: summary_large_image

配置 Sitemap

帮助搜索引擎更好地索引你的博客：

在 _config.yml 中添加：

1
2
3
4
5
sitemap:
  path: sitemap.xml

baidusitemap:
  path: baidusitemap.xml

提交到搜索引擎

Google Search Console：

  1. 访问 https://search.google.com/search-console
  2. 添加你的网站
  3. 验证所有权
  4. 提交 sitemap

百度站长平台：

  1. 访问 https://ziyuan.baidu.com
  2. 添加网站并验证
  3. 提交 sitemap 链接

总结

到这里，你的博客已经功能齐全了！后续我也会继续完善，持续更新。

其实我也是刚刚开始接触 Hexo，这个博客是我的第一个 Hexo 博客。在搭建的过程中踩了不少坑，也发现了很多好用的插件和技巧。我会把这些经验和心得都记录在这个博客里，跟着我一起学习、一起进步。

以后如果遇到新的实用插件、有趣的主题功能，或者解决了一些头疼的问题，我都会第一时间写成文章分享出来。

回顾一下三篇文章：

  • 第一篇：本地环境配置、主题安装、插件配置
  • 第二篇：部署到 Vercel、自定义域名配置
  • 第三篇：评论系统、统计分析、功能扩展

祝你的博客越办越好，读者越来越多！🎉