本文最后更新于：12 分钟前
前言
配置好hexo＋fluid主题后，发现博客没有搞评论系统，不能友好地跟路过的网友互动，所以就花半天时间整了评论系统。原本想用valine但它没有后台系统所以采用waline，以下是它的搭建过程
使用vercel搭建
实际上，官方文档讲的已经很详细，可以自己去看看官方文档，点击传送门前往官方文档
本篇文章只讲怎么配置评论通知
配置邮件通知
以下是邮件配置时需要在vercel增加的变量
SMTP_SERVICE: SMTP 邮件发送服务提供商。
提示
SMTP_SERVICE的变量为引号中的值，例如我使用的是163邮箱，根据文件的定义此时的变量值应为163
你可以在 这里 查看所有支持的运营商。
如果你的运营商不受支持，你必须填写 SMTP_HOST 和 SMTP_PORT。
SMTP_HOST: SMTP 服务器地址，一般可以在邮箱的设置中找到。
SMTP_PORT: SMTP 服务器端口，一般可以在邮箱的设置中找到。
SMTP_USER: SMTP 邮件发送服务的用户名，一般为登录邮箱。
SMTP_PASS: SMTP 邮件发送服务的密码，一般为邮箱登录密码，部分邮箱(例如 163)是单独的 SMTP 密码。
ps:使用网易163邮箱需要登陆网页版开启smtp，开启后它会给你一个全是大写字母的密匙，这个密匙就是`SMTP_PASS` 的值
SITE_NAME: 网站名称，用于在消息中显示。
SITE_URL: 网站地址，用于在消息中显示。
AUTHOR_EMAIL: 博主邮箱，用来接收新评论通知。如果是博主发布的评论则不进行提醒通知。
操作流程
进入vercel，并打开当前应用的评论项目
依次点击Settings Environment Variables
进入变量配置后，分别填写以上列出的变量
完成配置后，重新部署一下，基本能用，但是不完整 
此时再打开github上这个项目自动生成的仓库
项目内有一个index.js的文件，内容如下
1
2
3
4
5
6
7
8
| const Application = require('@waline/vercel');
module.exports = Application({
async postSave(comment) {
}
});
|
然后将整个内容替换成
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
| const Application = require('@waline/vercel');
module.exports = Application({
mailSubject: '{{parent.nick}}，👉 叮咚！您在博客「{{site.name}}」上的评论收到了回复',
mailTemplate: `
<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
<h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
👉 叮咚！您在博客<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的评论有了新的回复
</h2>
<div style="padding:0 12px 0 12px;margin-top:18px">
<p>{{parent.nick}}，您曾发表评论：</p>
<div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{parent.comment | safe}}</div>
<p><strong>{{self.nick}}</strong> 回复说：</p>
<div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
<p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">前往原文查看完整的回复內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。</p>
<br/>
</div>
<div style="border-top:1px solid #DDD; padding:13px 0 0 8px;">
该邮件为系统自动发送的邮件，请勿直接回复。
</div>
<br/>
</div>`,
mailSubjectAdmin: '👉 叮咚！您的博客「{{site.name}}」收到了新评论',
mailTemplateAdmin: `
<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
<h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
有人在<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>发表了新的评论
</h2>
<div style="padding:0 12px 0 12px;margin-top:18px">
<p><strong>{{self.nick}}</strong> 评论说：</p>
<div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
<p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">前往原文查看完整的评论内容。</a></p>
<br/>
</div>
<div style="border-top:1px solid #DDD; padding:13px 0 0 8px;">
该邮件为系统自动发送的邮件，请勿直接回复。
</div>
<br/>
</div>`
});
|
随后它会自动部署到vercel，此时邮件配置就算完成了,附上结果图
