集成Twikoo评论
说真的 我麻了
事情的起因还是从这个用于自我满足的博客诞生之际,评论系统就在多个版本之间来回跳转。最终在这次切换到Twikoo的时候,我崩溃了,其实接入Twikoo评论还是比较方便的,由于愚蠢,磨了我好几天,主要就是邮件发送咬牙切齿
# Twikoo简介
# 备份一下
这里不做任何演示,根据自己的评论插件去咨询百度,Twikoo目前支持导入Valine
,Disqus
,Artalk v1
,Artalk v2
,Twikoo
# 私有部署
Docker 的安装这里不多赘述,网上很多傻瓜教程的,如果你的服务器带宝塔可视化界面,直接到docker菜单栏,剩下的点进去就懂了。
OK,让我们继续说下部署Twikoo
# 拉取镜像
docker pull imaegoo/twikoo
# 拉取镜像
docker run -p 9090:8080 -v /home/twikoo/data:/app/data -d imaegoo/twikoo
端口和数据存放路径可以按照个人喜好改动,没什么影响,注意把
外置IP端口
放行,此处指:9090
# 测试效果
docker ps
查看是否存在我们刚才创建的twikoo容器,如果存在,正常情况下访问 <font backgroundColor="#84d4b4" borderRadius="5px" padding-bottom: 2px padding-left: 5px padding-right: 5px>http://服务器ip:port,即twikoo的服务地址,可以看到如下运行状况
鉴于我的网站配置过https,由于twikoo本身并不支持https,因此还需要做反向代理
如果不需要考虑https的问题,到这里部署基本上就是结束了
# Nginx反向代理配置https
# 大概流程
- 新的子域名或者域名
- 绑定到服务器
- 域名的ssl证书 腾讯云免费 SSL 证书 (opens new window)
- 新增配置
- nginx配置
- 重启测试
# 新的子域名或者域名
可以直接创建一个新的子域名,例如:twikoo.blog.top 或者申请一个新的域名 例如: twikoo.top
由于使用的腾讯云免费 SSL 证书,仅提供标准域名的免费证书,所以重新购买了域名生成
# 绑定到服务器
没什么好说的,将新域名twikoo.top解析到twikoo容器所在的服务器地址上,使后续可以直接通过域名访问到twikoo环境
# 域名的ssl证书
可以参考上面提供的地址或者自行百度获取自己的ssl证书 并进行下载 放到服务器上
# 新增配置
SSL证书存放路径:
/home/nginx/twikoo
将文件twikoo.top.key
和twikoo.top.pem
放入该目录下
同目录下创建文件
twikoo.conf
写入如下内容
upstream twi {
server blog.top:port; #你的域名+端口
}
server {
listen 443 ssl;
server_name twikoo.top; #新域名
ssl_certificate /home/nginx/twikoo/twikoo.top.pem;
ssl_certificate_key /home/nginx/twikoo/twikoo.top.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
# Nginx配置
在nginx.conf里面需要声明要加载的外部配置文件,在http配置里面添加一行
include /home/nginx/twikoo/twikoo.conf;
# 重启测试
重启Nginx服务 通过新域名
https://twikoo.top
进行访问 将转发到http://blog.top:port
实现反向代理 同样可以查看到twikoo的部署信息
后续envId使用
https://twikoo.top
# Vdoing 集成
主要摘录自 本站 - 评论模块 | Young Kbt blog (opens new window) 原文查看 (opens new window)膜拜大佬🔦🔦。
打开 docs/.vuepress/config.js(新版是 config.ts) 在 head 里添加如下内容(在 <head> 引入在线 script)
['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js' }]
1.6.32 是版本号,具体可以在上面访问http://服务器ip:port
后查看version
字段
在 docs/.vuepress/components 目录下创建 Vue 组件:Twikoo.vue。如果不存在 components 目录,则请创建
添加如下内容
<template>
<div id="tcomment"></div>
</template>
<script>
let waitTime = 700; // 页面加载后多少毫秒后加载评论区(如果是 0ms,可能会报错)
export default {
data() {
return {
twikoo: "",
firstLoad: true,
};
},
mounted() {
// 不初始化评论区的页面:frontmatter 的 comment: false 的文章页、首页、归档页、404 页面
if (
(this.$frontmatter.comment == undefined || this.$frontmatter.comment) &&
this.$route.path != "/" &&
!this.otherPage(this.$route) &&
!this.isFourZeroFour(this.$route)
) {
setTimeout(() => {
this.twikooInit();
}, waitTime);
}
},
watch: {
$route(to, from) {
// 404 页面、不同的标题会触发路由,禁止掉
if (
this.$route.path == "/" ||
this.otherPage(this.$route) ||
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 == "/" ||
this.otherPage(from) ||
!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: "",
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;
},
// 其他页面
otherPage(route) {
if(
route.path == "/archives/" ||
route.path == "/categories/" ||
route.path == "/tags/"
) {
return true;
}else {
return false;
}
}
},
};
</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
133
134
135
136
137
138
139
140
141
142
143
144
注意
twikooInit
方法中的 evnId
(66行) 换成自己的twikoo的服务地址,即http://服务器ip:port
,如果绑定了域名,服务器Ip切换为域名即可
警告
如果你不想在某个页面出现评论区,有两种方法: 文档里的 frontmatter 里设置 comment 为 false 修改源码,位于 124 - 126 行那里(参考),route.path 需要强制判断某个页面的 premilink,等于则评论区不出现在该页面里
写完 Vue 组件,接下来注册使用,在 config.js(新版是 config.ts)的 plugins 模块下,添加如下内容:
ts 使用以下代码
import { UserPlugins } from 'vuepress/config'
plugins: <UserPlugins>[
[
{
name: 'custom-plugins',
globalUIComponents: ["Twikoo"] // 2.x 版本 globalUIComponents 改名为 clientAppRootComponentFiles
}
]
]
2
3
4
5
6
7
8
9
js 使用以下代码
module.exports = {
plugins: [
{
name: 'custom-plugins',
globalUIComponents: ["Twikoo"] // 2.x 版本 globalUIComponents 改名为 clientAppRootComponentFiles
}
],
}
2
3
4
5
6
7
8
9
# 管理面板
我主要说一下邮件这一块,其他配置可以参考大佬的博客 (opens new window),比较详细了
配置好后,就可以在每个文章下面看到评论区,在评论区的右边发现有一个「蓝色小齿轮」,这就是管理面板
第一次点击小齿轮后会让你输入登录密码,如果忘记了密码,参考:常见问题 | Twikoo 文档 (opens new window)
# 邮件通知
SENDER_EMAIL
邮件通知邮箱地址。对于大多数邮箱服务商,SENDER_EMAIL 必须和 SMTP_USER 保持一致,否则无法发送邮件。SENDER_NAME
邮件通知标题。记住这个家伙,卡了我好久SMTP_SERVICE
邮件通知邮箱服务商。例如:"126"、"163"、"QQ"SMTP_HOST
自定义 SMTP 服务器地址。如您已配置 SMTP_SERVICE,此项请留空。SMTP_PORT
自定义 SMTP 端口。如您已配置 SMTP_SERVICE,此项请留空。SMTP_SECURE
自定义 SMTP 是否使用TLS,请填写 true 或 false。如您已配置 SMTP_SERVICE,此项请留空。SMTP_USER
邮件通知邮箱用户名。此处建议和SENDER_EMAIL
一致SMTP_PASS
邮件通知邮箱密码,QQ、163邮箱请填写授权码
。注意不是邮箱密码,授权码获取请自行百度 QQ (opens new window)MAIL_SUBJECT
自定义通知邮件主题,留空则使用默认主题。MAIL_SUBJECT_ADMIN
自定义博主通知邮件主题,留空则使用默认主题。
注意
评论的邮件通知,仅会通知非博主的评论,如果需要测试进行评论自动发送邮件通知,需要使用非博主邮箱 博主邮箱在通用设置 - BLOGGER_EMAIL中配置
# 邮件通知测试
配置完成之后,输入需要接收邮件的邮箱,点击发送邮件,等待即可查看配置是否正常,邮件是否发送成功,具体日志可以在twikoo容器日志中查看
注意
邮件测试百试百灵,但是进行评论 死活没有邮件通知。查看twikoo容器日志 什么也没有 查看twikoo源码, 发现邮件通知的日志 不知道被谁给吃了 也没有出现 N次重装 调试 甚至把twikoo源码打成镜像去用 邮件通知这个方法 进去了就像石沉大海一样
万恶之源
: 复制的博客名称 WasteTime's blog
, 不支持WasteTime's
blog 切换成 WasteTime blog
啥事没有了
# 通用配置
BLOGGER_EMAIL
博主的邮箱地址,用于邮件通知、博主标识。DEFAULT_GRAVATAR
默认的头像显示。默认值为 "identicon",可选:"404"、"mp"、"identicon"、"monsterid"、"wavatar"、"retro"、"robohash"、"blank"404
如果没有与电子邮件哈希关联的图像,则不加载任何图像,而是返回 HTTP 404(未找到文件)响应mp
一个简单的卡通风格的人物轮廓identicon
一个几何图案(随机生成)monsterid
具有不同颜色、面孔的“怪物”(随机生成)wavatar
具有不同特征和背景的人脸(随机生成)retro
8位色的像素人脸(随机生成)robohash
具有不同颜色、面部的机器人(随机生成)blank
透明的 PNG 图像
DISPLAYED_FIELDS
界面上展示的输入框,默认:nick,mail,link
昵称,邮箱,网站地址
REQUIRED_FIELDS
评论必填信息,设为 nick,mail,link 代表全必填,设为 none 代表全选填,默认:nick,mailHIDE_ADMIN_CRYPT
隐藏管理面板入口。可设置一个“暗号”,只有在“昵称”一栏输入相同的“暗号”时,管理面板入口才会显示,留空则不隐藏管理入口
# 即时通知
使用钉钉(dingtalk)进行演示
PUSHOO_CHANNEL
即时消息推送平台名称,钉钉演示此处填写dingtalk
PUSHOO_TOKEN
即时消息推送 token。请参考 即时消息推送 (opens new window) 里的详细说明配置SC_MAIL_NOTIFY
是否同时通过 IM 和邮件 2 种方式通知博主,默认只通过 IM 通知博主,默认:false
# 最后的最后
再见👋👋