想法

  前面有人配置 twikoo 的评论收件箱,这里也被问怎么配置,我在这里记录一下过程,这里就以qq邮箱为例,Google邮箱由于不需要配置 SMTP 授权码,这里就不做叙述,这里只记录一下qq邮箱,当然如果用的是163邮箱也是要配置 SMTP 授权码的,这里从配置过程开始说起,记录配置过程。

过程

准备

vercel 部署twikoo评论系统,Gravatar 自定义你的头像,MongoDB 数据存储

vercel 部署 twikoo

  1. 注册好 vercel 账号 后,这一步比较简单,进入到 twikoo 直接一键部署,等待部署完成。

  2. 注册好 MongoDB,点击 Create 创建一个免费的数据库,区域推荐选择 AWS / N. Virginia (us-east-1),下面的

    注意 **Cluster Name ** 只能创建一次,这里创建好后无法更改。

    创建好后,点击 Connect,选择 Druvers,复制链接。

    1
    2
    # 这里的password设置为你的 mongodb 账号密码。
    mongodb+srv://Twikoo:<password>@cluster0.iqobdc1.mongodb.net/?retryWrites=true&w=majority
  3. 设置环境变量MONGODB_URI把你复制改好的链接创建到你的环境变量中,到这里基本上都配置完成。

邮件通知配置

配置表:

参数配置
SENDER_EMAIL邮件通知邮箱地址(必填)。
SENDER_NAME邮件通知标题。
SMTP_SERVICE邮件通知邮箱服务商(必填)。
SMTP_HOST自定义 SMTP 服务器地址(必填),根据你选择的邮箱决定,如QQ为smtp.qq.com
SMTP_PORT自定义 SMTP 端口,QQ端口可配置为 465
SMTP_SECURE自定义 SMTP 是否使用TLS,请填写 true 或 false(选择true)。
SMTP_USER邮件通知邮箱用户名。
SMTP_PASS邮件通知邮箱密码,QQ、163邮箱请填写授权码(见下图)。

SMTP_PASS获取

登录你的qq邮箱或163邮箱,点击设置,选择账号,你就可以在页面下看到 SMTP 配置项。

自定义通知邮件模板

自行进行微改,把链接和文字改为自己的,这没有难度,如果自身水平足够可以进行美化。

访客评论模板
1
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
<div>
<div id="isForwardContent">
<div>
<div id="content">
<div
style="background: white;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: #49b1f5 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);">
<header style="overflow: hidden"><img
src="https://npm.elemecdn.com/falling42-cdn@1.0.0/cover/6833939bly1gicis3attqj20zk0m8k7l.jpg"
style="width: 100%; z-index: 666" /></header>
<div style="padding: 5px 20px">
<div class="dear"
style="position: relative;color: white;float: left;z-index: 999;background: #49b1f5;padding: 5px 30px;margin: -25px auto 0;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);">
Dear ${PARENT_NICK}</div><br />
<center>
<h3>来自&nbsp;<strong>${NICK}</strong>&nbsp;的回复</h3>
</center>
<hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" />
<br />&nbsp;&nbsp;<p>您在<a href="${POST_URL}" style="text-decoration: none; color: #49b1f5"
target="_blank">&nbsp;${SITE_NAME}&nbsp;</a>上发表的评论:</p>

<div class="tk-content"
style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px; ">
${COMMENT}</div>

<div class="chakan" style="text-align: center;"><a href="${POST_URL}"
style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#3eae5f;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em"
target="_blank">点击去原文查看&gt;&gt;</a>
<p></p>
</div>
<div class="footer-p"
style="text-align: center; margin-top: 5rem; display:block;color:#b3b3b1;text-decoration:none;">
<img src="https://q1.qlogo.cn/g?b=qq&nk=1580777927&s=5"
style="width:1.8rem; margin:0 auto" />&nbsp;
<hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />
©&nbsp;2021&nbsp;<a href="https://hcer.top/" style="text-align:center; color: #0da1e6a6"
target="_blank">冰梦の博客</a>
<p></p>
</div>
</div>
</div>
</div>
</div><br />
</div>
<style type="text/css">
.qmbox::-webkit-scrollbar {
display: none
}
</style>
<style id="cloudAttachStyle" type="text/css">
.qmbox#divNeteaseBigAttach,
.qmbox#divNeteaseBigAttach_bak {
display: none
}
</style>
<style id="blockquoteStyle" type="text/css">
.qmbox blockquote {
display: none
}
</style>
<style type="text/css">
.qmbox body {
font-size: 14px;
font-family: arial, verdana, sans-serif;
line-height: 1.666;
padding: 0;
margin: 0;
overflow: auto;
white-space: normal;
word-wrap: break-word;
min-height: 100px
}
.qmbox td,
.qmbox input,
.qmbox button,
.qmbox select,
.qmbox body {
font-family: Helvetica, 'Microsoft Yahei', verdana
}
.qmbox pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
width: 95%
}
.qmbox th,
.qmbox td {
font-family: arial, verdana, sans-serif;
line-height: 1.666
}
.qmbox img {
border: 0
}
.qmbox header,
.qmbox footer,
.qmbox section,
.qmbox aside,
.qmbox article,
.qmbox nav,
.qmbox hgroup,
.qmbox figure,
.qmbox figcaption {
display: block
}
.qmbox blockquote {
margin-right: 0px
}
</style>
<style type="text/css">
@media screen and(max-width:1100px) {
#content p {
font-size: 10px
}
#content h3 {
font-size: 14px
}
.footer-p {
font-size: 9px
}
.dear {
font-size: 12px
}
}
</style>
<style id="ntes_link_color" type="text/css">
.qmbox a,
.qmbox td a {
color: #236da1
}
</style>
</div>
博主回复模板
1
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
<div>
<div id="isForwardContent">
<div>
<div id="content">
<div
style="background: white;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: #49b1f5 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);">
<header style="overflow: hidden"><img
src="https://npm.elemecdn.com/falling42-cdn@1.0.0/cover/6833939bly1gicis3attqj20zk0m8k7l.jpg"
style="width: 100%; z-index: 666" /></header>
<div style="padding: 5px 20px">
<div class="dear"
style="position: relative;color: white;float: left;z-index: 999;background: #49b1f5;padding: 5px 30px;margin: -25px auto 0;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);">
Dear ${PARENT_NICK}</div><br />
<center>
<h3>来自&nbsp;<strong>${NICK}</strong>&nbsp;的回复</h3>
</center>
<hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" />
<br />&nbsp;&nbsp;<p>您在<a href="${POST_URL}" style="text-decoration: none; color: #49b1f5"
target="_blank">&nbsp;${SITE_NAME}&nbsp;</a>上发表的评论:</p>
<div class="tk-content"
style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px;">
${PARENT_COMMENT}</div>
<p><strong>${NICK}</strong>&nbsp;给您回复啦:</p>
<div class="tk-content"
style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px; ">
${COMMENT}</div>
<p>欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}"
target="_blank">${SITE_NAME}</a></p><br />
<div class="chakan" style="text-align: center;"><a href="${POST_URL}"
style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#3eae5f;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em"
target="_blank">点击去原文查看&gt;&gt;</a>
<p></p>
</div>
<div class="footer-p"
style="text-align: center; margin-top: 5rem; display:block;color:#b3b3b1;text-decoration:none;">
<img src="https://q1.qlogo.cn/g?b=qq&nk=1580777927&s=5"
style="width:1.8rem; margin:0 auto" />&nbsp;
<hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />
©&nbsp;2021&nbsp;<a href="https://hcer.top/" style="text-align:center; color: #0da1e6a6"
target="_blank">冰梦の博客</a>
<p></p>
</div>
</div>
</div>
</div>
</div><br />
</div>
<style type="text/css">
.qmbox::-webkit-scrollbar {
display: none
}
</style>
<style id="cloudAttachStyle" type="text/css">
.qmbox#divNeteaseBigAttach,
.qmbox#divNeteaseBigAttach_bak {
display: none
}
</style>
<style id="blockquoteStyle" type="text/css">
.qmbox blockquote {
display: none
}
</style>
<style type="text/css">
.qmbox body {
font-size: 14px;
font-family: arial, verdana, sans-serif;
line-height: 1.666;
padding: 0;
margin: 0;
overflow: auto;
white-space: normal;
word-wrap: break-word;
min-height: 100px
}
.qmbox td,
.qmbox input,
.qmbox button,
.qmbox select,
.qmbox body {
font-family: Helvetica, 'Microsoft Yahei', verdana
}
.qmbox pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
width: 95%
}
.qmbox th,
.qmbox td {
font-family: arial, verdana, sans-serif;
line-height: 1.666
}
.qmbox img {
border: 0
}
.qmbox header,
.qmbox footer,
.qmbox section,
.qmbox aside,
.qmbox article,
.qmbox nav,
.qmbox hgroup,
.qmbox figure,
.qmbox figcaption {
display: block
}
.qmbox blockquote {
margin-right: 0px
}
</style>
<style type="text/css">
@media screen and(max-width:1100px) {
#content p {
font-size: 10px
}
#content h3 {
font-size: 14px
}
.footer-p {
font-size: 9px
}
.dear {
font-size: 12px
}
}
</style>
<style id="ntes_link_color" type="text/css">
.qmbox a,
.qmbox td a {
color: #236da1
}
</style>
</div>