评论区
# 17.评论区
一个网站如果有评论功能，可以更好的和读者互动。VuePress也有很多评论插件，这里简单介绍下，最后介绍本站所使用的Twikoo。
大部分评论插件都是使用的Github或Gitee的issue功能，也就是用issue去存储评论。
# 常见的评论区插件
Vssue：Vssue简单来说就是VuePress + issue，专门用来VuePress的评论功能。博主曾尝试过，但好像和其他插件冲突了，这里不详述。想要使用请参考Vssue官网：介绍 | Vssue (opens new window)
Gitment：Gitment：使用 GitHub Issues 搭建评论系统 | I'm Sun (opens new window)
Valine：Valine 一款快速、简洁且高效的无后端评论系统 (opens new window)
# ArtTalk
可以参考：Vuepress配置评论插件为Artalk | 二丫讲梵 (opens new window)
# Twikoo
官网：Twikoo 文档 (opens new window)
个人认为Twikoo对于自建也还行，这里着重介绍自建的话怎么操作（也支持Docker来部署）。
首先在服务器上安装，并配置全局链接（需先安装Node）
$ npm i -g tkserver
$ln -s /opt/nodejs/node/bin/tkserver /usr/local/bin/tkserver
2
3
启动：
$ tkserver
访问 http://服务端IP:8080
若能正常访问，服务端地址（包含 http:// 和端口号，例如 http://12.34.56.78:8080）即为您的环境 id
Linux 服务器可以用 nohup tkserver >> tkserver.log 2>&1 & 命令后台启动。
注意：可能需要在云服务器上开启8080端口的防火墙
# 配置https
理论上这样部署，就完成后台的部分了，但鉴于我的网站配置过https，而twikoo本身并不支持https，因此还需要做反向代理。
接下来的步骤如下：
- 再申请和购买一个SSL证书
- 配置cname
- 下载证书放到Linux服务器上
- 配置Nginx反向代理
购买https证书，这里我用二级域名的
然后在云服务器控制台上配置cname
配置Nginx反向代理。和上一小节一样，上传子域名的证书到服务器上，
然后配置Nginx：
upstream twi {
server peterjxl.com:8080; #你的域名+加端口
}
server {
listen 443 ssl;
server_name twikoo.peterjxl.com; #子域名
ssl_certificate /opt/nginxrun/conf/cert/8852603_twikoo.peterjxl.com.pem;
ssl_certificate_key /opt/nginxrun/conf/cert/8852603_twikoo.peterjxl.com.key;
# ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!ADH:!EXPORT56:RC4+RSA:+MEDIUM;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://twi;
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
这样，访问https://twikoo.peterjxl.com/，就会转发到我的服务器IP:8080 ，完成反向代理
# 前端配置Twikoo
这里主要参考：本站 - 评论模块 | Young Kbt blog (opens new window)，感谢大佬。
打开 docs/.vuepress/config.js，在 head 里添加如下内容（在 <head> 引入在线 script）：1.6.7 是版本号。
['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.7/twikoo.all.min.js' }],
在 docs/.vuepress/components 目录下创建 Vue 组件：Twikoo.vue。如果不存在 components 目录，则请创建。添加如下内容：
注意修改
envId为你自己的
<template>
<div id="tcomment"></div>
</template>
<script>
let waitTime = 700; // 页面加载后多少毫秒后加载评论区（如果是 0ms，可能会报错）
let archives = "/archives/"; // 归档页的 permalink
export default {
data() {
return {
twikoo: "",
firstLoad: true,
};
},
mounted() {
// 不初始化评论区的页面：frontmatter 的 comment: false 的文章页、首页、归档页、404 页面
if (
(this.$frontmatter.comment == undefined || this.$frontmatter.comment) &&
this.$route.path != "/" &&
this.$route.path != archives &&
!this.isFourZeroFour(this.$route)
) {
setTimeout(() => {
this.twikooInit();
}, waitTime);
}
},
watch: {
$route(to, from) {
// 404 页面、不同的标题会触发路由，禁止掉
if (
this.$route.path == "/" ||
this.$route.hash != "" ||
this.isFourZeroFour(to)
) {
return;
}
// 进入首页、进入 frontmatter 的 comment: false 页面，删除评论区
if (to.path == "/" || this.getCommentByFrontmatter(to) == false) {
this.deleteComment();
return;
}
// 初始化评论条件：来自首页，来自归档页、来自 frontmatter 的 comment: true 的文章页
if (
from.path == "/" ||
from.path == archives ||
!this.getCommentByFrontmatter(from)
) {
this.firstLoad
? setTimeout(() => {
this.twikooInit();
this.firstLoad = false;
}, waitTime)
: this.twikooInit(); // 如果加载过一次评论区，则直接获取
} else if (this.$route.path != "/" && this.$route.hash == "") {
// 文章页之间跳转，重新获取评论
setTimeout(() => {
this.updateComment();
}, waitTime);
}
},
},
methods: {
twikooInit() {
twikoo
.init({
// envId 要切换成自己的，这是评论区的 ID，一个博客只能有一个评论区 ID，用别人的评论区 ID，导致读者评论时或发送到别人的评论区里
envId: "https://twikoo.peterjxl.com/",
el: "#tcomment",
// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
// path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
// lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/dev/src/js/utils/i18n/index.js
// onCommentLoaded: function () {
// console.log("评论加载或评论成功");
// },
})
.then(() => {
this.loadTwikoo();
});
},
// 初始化加载或者跳转新页面重新加载 Twikoo 评论区
loadTwikoo() {
let page = document.getElementsByClassName("page")[0];
let comment = document.getElementById("twikoo");
// comment 不存在代表曾初始化过，后面被删除
comment ? (this.twikoo = comment) : (comment = this.twikoo);
page
? comment
? page.appendChild(comment)
: page.appendChild(this.twikoo)
: "";
this.updateComment();
},
// 跳转新页面，重新获取当前页面的评论信息
updateComment() {
let tk_icon = document.getElementsByClassName("tk-icon")[0];
tk_icon ? tk_icon.click() : undefined;
},
// 删除 frontmatter:comment: false 页面的数据
deleteComment() {
let comment = document.getElementById("twikoo");
comment ? comment.parentNode.removeChild(comment) : "";
},
// 获取 frontmatter 的 comment
getCommentByFrontmatter(route) {
let comment = true;
this.$site.pages.forEach((item) => {
if (item.path == route.path) {
comment = item.frontmatter.comment;
}
});
return comment;
},
// 判定当前页面是不是 404
isFourZeroFour(route) {
let flag = true;
this.$site.pages.forEach((item) => {
if (item.path == route.path) {
flag = false;
}
});
return flag;
},
},
};
</script>
<style>
.twikoo .tk-comments {
margin-top: 20px;
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
# 管理Twikoo
配置好后，就可以在每个文章下面看到评论区，在评论区的右边发现有一个「蓝色小齿轮」，这就是管理面板
第一次 点击小齿轮后会让你注册 登录密码，请记住它，如果忘记了密码，请去直接的 MongoDB 数据库修改。
管理面板的用处：
- 可以查看、删除、隐藏、显示、置顶任意的评论
- 配置你的个人信息，登录管理面板后评论系统能识别你的身份（博主）
- 配置反垃圾模块，防止别人发送不雅的评论
- 配置邮件通知，别人的评论会通过邮件发送给你
- ..............
# 反垃圾
腾讯云是提供了反垃圾评论服务的，提供 1 个月的免费试用，到期后选择后付费即可，25 元/万条。
套餐包管理 - 文本内容安全 - 内容安全 - 控制台 (opens new window)
注意不要购买套餐，非常贵，最少都是4k大洋的，180w条，我一个小破站何德何能用上这么多Twikoo
# Twikoo邮件通知
在管理面板里可以开启邮件通知（如果没有通知，有评论都不知道，而且这么多文章，如果一直没看到就会一直错过了，对用户体验不好）
如果使用的是QQ邮箱，则需要授权码，而不是QQ密码，QQ邮箱这样的设计可能是为了防止QQ被盗吧，可参考：qq邮箱授权码如何获取-百度经验 (opens new window)。如果是使用其他邮箱，同理。
配置完后，可以测试下能不能正常收到邮件
效果：当有评论后会有邮件提醒
# 头像
Twikoo评论区还支持Gravatar头像
什么是Gravatar？简单来说就是全球通用头像，只要你去Gravatar的网站上设置一个邮箱和头像，这样在其他支持Gravatar的网站上，你输入邮箱就能自动获取你的头像。读者可以去https://cravatar.cn (opens new window)上注册邮箱，然后就可以了（由于CDN缓存的问题，可能得过几个小时才能正常显示）。
Twikoo也提供了自定义头像CDN地址的功能：常见问题 | Twikoo 文档 (opens new window)
# 小结
本人使用过几个评论区插件， 但都配置失败了，折腾了很久都不行，最后还是用了Twikoo，并且配置的过程中还加进了Twikoo的QQ群去咨询，也是折腾了很久才可以。
如果读者配置的过程遇到了什么问题，请不要灰心，遇到问题就尽量去解决，总是能成功的。
