Twikoo评论系统配置教程（基于腾讯云开发）

注意！腾讯云函数几乎不提供免费额度，建议使用vercel或者私有部署。

之前博客一直在使用Valine，奈何Leancloud太抠门了。天下苦Valine久矣，其他的评论要么有广告，要么国外的服务器，要么需要登录。在Butterfly3.3版本下支持了Twikoo评论。本博客在可见的未来均会采用这个评论。它支持邮件提醒、甚至微信提醒等。可以说是目前最好的评论系统，并且长期免费。

本文章在评论系统早期文档不完善的情况下提供了一些详细的配置教程，但是目前官方文档相比曾经已经完善很多，可以先查看文档，如果有问题可以在本文或者文档下的评论区留言。

官方文档：配置使用

注意！本教程主要针对腾讯云的部署方式进行部署，已经陈旧且不再维护，最新vercel部署方式请查看官方文档

视频教程

Twikoo作者为大家提供了一个视频教程，建议观看视频教程进行实装

Butterfly主题用户

要求你的Butterfly版本在3.3以上。Butterfly3.3及以上用户可以通过配置文件来直接启用twikoo

无任何魔改用户
未更新用户需要输入下段代码，更新有风险，更新前需备份。有魔改的用户小心升级。

cd 主题路径
git add *
git commit -m '旧版本一去兮不复返'
git pull

有魔改用户
可以参考Akilar提供的平滑升级魔改后的Hexo主题

魔改指的是修改原作者主题文件行为，例如主题的pug文件、styl文件等

其他主题用户

Twikoo文档：配置使用

可以参考twikoo文档的配置使用部分进行配置。本教程以butterfly主题进行撰写，其他主题只有配置方面的差异。

先来搞腾讯云吧（已失效）

购买云开发套餐

首先前往腾讯云的活动区域：立即前往

我们可以在网页下方找到新用户专享的套餐购买，我们立即购买

新用户专享

我们在配置选择中输入名称，点击购买。

配置选择

遇到问题？

如果你从没购买过腾讯云开发（是腾讯云开发新用户），但是无法购买，提示参数错误，可以尝试在控制台中新建一个配置：立即前往提示“选择部署应用”，请选择“不创建环境”。创建后回到活动页购买免费套餐。

打开权限

首先进入登陆授权打开匿名登陆

打开匿名登陆

然后进入安全配置将网站url和测试地址添加进安全域名中。

示例：
配置安全域名

1 2	blog.zhheo.com localhost:4000

当你的博客使用了二级域名的场合，需要将完整的二级域名填入，而不是只填入主域名。
当更改后发现报错，没有关系，可以尝试刷新网页查看是否配置成功。

部署腾讯云

以下两种方式三选一即可，使用本教程的想要始终免费推荐使用**云函数部署**的方式，想要按量付费用户推荐一键部署。

进入腾讯云控制台云函数点击新建云函数

新建云函数

名称输入twikoo，点击新建按钮

进入作者的项目页面全选所有代码内容并复制

全选代码内容

回到刚才的新建函数窗口，粘贴到函数代码中，点击确定

我们就可以看到这个全新的函数了

进入函数详情页

进入函数代码并新建一个文件

文件名输入为package.json按回车确认

和之前同样的步骤，打开作者package文件全选代码并复制到腾讯云函数页面中，并点击保存并安装依赖

函数更新成功

注意：一键部署适合按量计费环境，不适合本教程免费的包年包月环境

点击这里将 Twikoo 一键部署到云开发

注意

请确保你已经安装了 Node.js

请将命令、代码中“你的环境id”替换为你自己的环境id

请不要使用 Windows 自带的记事本编辑 envId.txt，否则会部署失败，后续会修复该问题

1
2
3

cd 随便一个文件夹
git clone https://github.com/imaegoo/twikoo.git
cd twikoo

如果你没有安装 Git，也可以从 Release 页面下载最新的 Source code

npm install
echo 你的环境id > envId.txt
npm run login
npm run deploy

中间会直接跳转授权页，直接授权即可
更新 Twikoo 版本时，先cd进这个文件夹，使用git pull更新版本（需要处理合并，详细可以百度，我用的是vscode打开文件夹在vscode的git功能里处理的冲突），然后再次执行npm run deploy更新现有的云函数（同意覆盖）
卡在获取授权中…？如果你是用macOS BigSur(11.0)及以上，推荐尝试使用windows虚拟机下终端或者Catalinna(10.15)及以下系统。
如果你没有对twikoo执行npm install，就会报错：找不到对应的FunctionName：

使用脚本部署可以直接执行命令更新，更新比较方便

1
2
3

git pull
npm install
npm run deploy

Butterfly主题用户配置

打开butterfly的主题配置文件_config.yml，启用Twikoo。

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
  use:
    - Twikoo

前往控制台获取你的环境id粘贴到配置文件中

控制台复制环境id

1
2
3

## Twikoo
## https://github.com/imaegoo/twikoo
twikoo: 你的环境id

开启管理面板

进入登陆授权点击自定义登陆的密钥下载

用文本编辑器打开私钥文件，复制全部内容，点击齿轮并在密码里输入密钥

密钥配置出现问题？
当前版本的密钥添加会有问题，一定概率失败，需要手动评论一条以后，去云开发控制台->数据库->config数据集->导入->选择密钥上传。密钥上传成功后再返回配置面板就可以正常配置了。（——来自akilar）

大功告成！

你已经完成了最基础的配置，现在可以体验超棒的评论工具了！

进阶设定

添加版本号（强烈建议）

在butterfly的3.3版本中Twikoo引入的js没有指定版本号，云开发版本和js版本不同的情况下可能会造成问题。大多数普通用户配置成功后可能不会去追更twikoo的版本，所以添加版本号是一个非常好的习惯

进入通过CDN引入查看代码，将文档中带版本号的js链接粘贴到配置文件中。

文档中的js链接

butterfly配置文件

作者表示会做前后兼容，所以不添加版本号也没关系。添加版本号之后每次更新不要忘记要更新链接。

为防止意外的问题，因为twikoo目前为测试阶段，建议修改。

头像设置

Twikoo使用的是Gravatars头像，对于国外用户和博主来说一般会设置头像，普通路人用户显示默认头像。

配置文件

在新版本的twikoo中提供了后台直接修改配置：
进入管理后台

可以直接在里面修改你所需要的功能，包括邮件提醒等。

曾经Twikoo还没有后台管理的时候，只能通过手动添加数值来配置评论系统。

前往数据库，找到config

数据库

没有config?
config是自动生成的，如果你没有config，可以尝试在博客中多评论测试一下，如果还没有，再考虑新建集合。

我们选择添加文档，再根据官方文档介绍的参数进行配置。

添加文档

添加参数

添加多个参数时点击下方的+来添加

添加参数

文档中的参数

SITE_NAME
类型: String
默认值: null
必要性: false
示例: 虹墨空间站

博客、站点名称。

SITE_URL
类型: String
默认值: null
必要性: false
示例: https://www.imaegoo.com

博客、站点地址。

BLOGGER_EMAIL
类型: String
默认值: null
必要性: false
示例: 12345@qq.com

博主的邮箱地址，用于邮件通知、博主标识。

反垃圾

AKISMET_KEY
类型: String
默认值: null
必要性: false
示例: 8651783ed123

反垃圾评论 API key。

微信通知

SC_SENDKEY
类型: String
默认值: null
必要性: false
示例: SCT1364TKdsiGjGvyAZNYDVnuHW12345

Server酱微信推送的 SCKEY

邮件通知

SENDER_EMAIL
类型: String
默认值: null
必要性: false
示例: blog@imaegoo.com

邮件通知邮箱地址。

SENDER_NAME
类型: String
默认值: null
必要性: false
示例: 虹墨空间站评论提醒

邮件通知标题。

SMTP_SERVICE
类型: String
默认值: null
必要性: false
示例: qiye.aliyun

邮件通知邮箱服务商。
完整列表请参考：Supported services

SMTP_USER
类型: String
默认值: null
必要性: false
示例: blog@imaegoo.com

邮件通知邮箱用户名。

SMTP_PASS
类型: String
默认值: null
必要性: false
示例: password

邮件通知邮箱密码，QQ邮箱请填写授权码。

适配深色模式

以下是我正在使用的深色模式样式和注释部分，可供参考。

引入方式：你可以在主题sourse文件夹里新建一个你自己的文件夹，里面新建一个css文件，然后将代码粘贴之后，在主题的_config.yml里面的inject的head中引入css文件的相对路径<link rel="stylesheet" href="这里写相对路径，直接从sourse内文件相对路径开始写">

:root{
  --heo-white: #fff;
  --heo-blue: #286dea;
  --heo-none: rgba(0,0,0,0);
  --heo-gray: #999999;
}
[data-theme=light] {
  --heo-fontcolor: #000;
  --heo-background: #fff;
  --heo-maskbg: rgba(255, 255, 255, 0.6);
  --heo-navbg: rgba(255, 255, 255, 0.9);;
  --heo-hovertext: #286dea;
  --heo-ahoverbg: #F7F7FA;
  --heo-lighttext: #ef794f;
  --heo-secondtext: rgba(0, 0, 0, 0.6);
  --heo-card-btn-bg: #F7F7FA;
  --heo-post-blockquote-bg: #f2f5f7;
  --heo-sceondbg: #F7F7FA;
}
[data-theme=dark] {
  --heo-fontcolor: #fff;
  --heo-background: #1e1e1e;
  --heo-maskbg: rgba(0,0,0, 0.6);
  --heo-navbg: rgba(0,0,0, 0.9);
  --heo-hovertext: #286dea;
  --heo-ahoverbg: #fff;
  --heo-lighttext: #f2b94b;
  --heo-secondtext: rgba(255, 255, 255, 0.6);
  --heo-card-btn-bg: #3f3f3f;
  --heo-post-blockquote-bg: #000;
  --heo-sceondbg: #252627;
}

/* 评论 */
/* ---------------------------------------------------------------- */

/* 填写项标题 */
.el-input-group__append, .el-input-group__prepend{
  background-color: var(--heo-sceondbg)!important;
  color: var(--heo-fontcolor)!important;
  border: 0px solid var(--heo-blue)!important;
}

/* 输入框 */
.el-input__inner{
  background: var(--heo-post-blockquote-bg)!important;
  border: 0px solid var(--heo-blue)!important;
  color: var(--heo-fontcolor)!important;
}

/* 评论输入框 */
.el-textarea__inner{
  background: var(--heo-post-blockquote-bg)!important;
  border: 0px solid var(--heo-blue)!important;
  color: var(--heo-fontcolor)!important;
}

/* 评论数量字号 */
#twikoo > div.tk-comments > div.tk-comments-container > div.tk-comments-title > span:nth-child(1){
  display: none!important;
}

.tk-icon[data-v-2619081a]{
  transform: translateY(-46px);
}

/* 加载时背景颜色 */
.el-loading-mask{
  background-color: var(--heo-background)!important;
}


/* 评论博主标签圆角 */
.tk-tag-green{
  border-radius: 12px!important;
  border: 0px solid #e1f3d8!important;
}

[data-theme=dark] .tk-tag-green{
  background-color: #67c23a21!important;
}

/* 预览按钮 */
.el-button{
  background: var(--heo-card-btn-bg)!important;
  border: 0px solid var(--heo-blue)!important;
  color: var(--heo-fontcolor)!important;
}

.el-button:hover{
  background: var(--heo-blue)!important;
  color: var(--heo-white)!important;
}

/* 发送按钮正常状态 */
.el-button--primary{
  background-color: var(--heo-blue)!important;
  border-color: var(--heo-blue)!important;
  color: var(--heo-white)!important;
}

/* 发送按钮禁用状态 */
.el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover{
  opacity: 0.4;
}

/* 更多评论的渐变遮罩 */
[data-theme=dark] .tk-expand{
  background: linear-gradient(rgba(29, 31, 32,0), rgba(29, 31, 32,1))!important;
  color: var(--heo-fontcolor);
}

/* 评论时间 */
.tk-time{
  color: var(--heo-gray);
}