使用Twikoo和Gitalk开发评论及留言

前言

本站基于Hexo搭建，用的最新版本 🦋 hexo-theme-butterfly 主题
如果你是别的版本，可能有些地方会有出入。

通用配置（一定要配置）

从3.0.0开始，开启评论需要在comments-use中填写你需要的评论，这里参照你主题版本的格式写。

支持双评论显示，只需要配置两个评论（第一个为默认显示）

1
2
3
4
5
6
7
8
9
10
11
12
13

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use:
    - Twikoo
    - Gitalk
    # Valine,Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: true # Display comment count in Home Page

Twikoo（推荐）

Twikoo 是一个简洁、安全、免费的静态网站评论系统，基于腾讯云开发。

特色

本站是用 Vercel + MongoDB 方案搭建 Twikoo 评论系统。
其他几种部署方式这里不做讲解，详情请参考：Twikoo 文档 。

Vercel 部署

步骤

1. 申请 MongoDB 账号 填好图上所需内容，点击【Create your Atlas account】。
2. 创建免费 MongoDB 数据库，区域推荐选择 【AWS / N. Virginia (us-east-1)】
3. 创建数据库用户（请记住这里的 password，后面步骤需要使用到），按步骤设置允许所有 IP（0.0.0.0/0）地址的连接（为什么？），填完信息后，点击【Finish and Close】
4. 在 Clusters 页面点击 【Connect】，选择【Connect your appliction】，记录数据库连接字符串，请将连接字符串中的<password>修改为第三步中数据库密码，留着备用（将在第7步中用到）。
5. 申请 Vercel 账号，可以选择 Github 账号来同步
6. 点击 此链接 将 Twikoo 一键部署到 Vercel 点击 Create，等待 Deploy完成，可看到如下效果：
7. 进入【Settings】->【Environment Variables】，添加环境变量【MONGODB_URI】，值为第 4 步的数据库连接字符串
8. 进入【Deployments】，然后在任意一项后面点击更多（三个点），然后点击【Redeploy】，最后点击下面的【Redeploy】
9. 进入【Overview】，点击【Domains】下方的链接，如果环境配置正确，可以看到 “Twikoo 云函数运行正常” 的提示 Vercel Domains（包含 https:// 前缀，例如 https://xxx.vercel.app）即为您的环境 id
10. 在主题中写入 Twikoo 配置项。
    在主题配置文件_config.butterfly.yml中修改以下内容，将你的环境id填入对应位置

    yml

    # Twikoo # https://github.com/imaegoo/twikoo twikoo: envId: https://xxxxxx.vercel.app/ region: visitor: true option:

    参数	解释
    envId	环境id
    region	环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
    visitor	是否显示文章閲读数
    option	可选配置

    开启 visitor 后，文章页的访问人数将改为 Twikoo 提供，而不是 不蒜子。

11. 重新编译运行，即可看到效果，点击评论区输入框下方的齿轮状按钮，设置你的管理密码，具体配置信息这里不做讲解，按照注解进行配置即可。

部署时遇到的常见错误

请参考 Hexo + Butterfly 一些常见问题 一文中关于【Twikoo】部分提及的内容。

Gitalk

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。特性如下：

• 使用 GitHub 登录
• 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]
• 支持个人或组织
• 无干扰模式（设置 distractionFreeMode 为 true 开启）
• 快捷键提交评论 （cmd|ctrl + enter）

首先，您需要选择一个公共github存储库（已存在或创建一个新的github存储库）用于存储评论。

然后需要点击右上角头像【Settings】->【Developer settings】->【OAuth Apps】->【New OAuth App】 创建【GitHub Application】进行基本配置 ，找不到地方直接 点击这里申请。

【Homepage URL】填写博客的仓库地址，例如我的填写https://Maimai-snowcapped.github.io。
【Authorization callback URL】填写当前使用的域名，例如我的填写https://yskm.net，没有域名，跟【Homepage URL】保持一致即可。

然后可看到目标client_id， 继续点击【Generate a new client secret】即可得到目标【client_secret】。

最后在主题配置文件_config.butterfly.yml中配置以下内容：

# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id: 'GitHub Application Client ID'
  client_secret: 'GitHub Application Client Secret'
  repo: 'GitHub repo'
  owner: 'GitHub repo owner'
  admin: 'GitHub repo owner and collaborators, only these guys can initialize github issues'
  language: en # en, zh-CN, zh-TW, es-ES, fr, ru
  perPage: 10 # Pagination size, with maximum 100.
  distractionFreeMode: false # Facebook-like distraction free mode.
  pagerDirection: last # Comment sorting direction, available values are last and first.
  createIssueManually: true # Gitalk will create a corresponding github issue for your every single page automatically
  option:

效果如下：

详情可参考 Gitalk Readme。