为Valine评论添加邮件通知

这两天在别人博客留下评论之后，有人回复我的话则会自动给我发邮件提醒。这个功能简直太方便了8，于是琢磨琢磨给我的博客中也加上😋

由于官方的邮件通知自1.4版本以来就已经下线，这里使用第三方邮件提醒——Valine-Admin

为了避免出现不必要的问题，这里使用LeanCloud国际版！（国际版还有二级域名，国内版就没有😖，可惜我的留言和评论了[虽然不多🤒]）

1. 国际版LeanCloud

首先创建好应用，这些和国内版没啥区别，之前没了解过的小伙伴可以先看我这篇文章——给Hugo个人博客添加Valine评论系统

打开设置 - 安全中心，服务开关按需打开，将博客主页链接设置到Web安全域名中(带https的！)

2. 环境变量

打开云引擎 - 设置，设置环境变量（先设置环境变量，在部署项目就能少部署一次了🤔）

需要设置的变量有这些：

先别急着设置，把页面往下翻翻：

可以看到有一个云引擎域名，红色方框中的内容可以随意设置，然后作为云引擎的地址（比国内版良心太多👍）。

然后设置环境变量，图中除了MAIL_TEMPLATE不是必须设置，其它最好都设置上才不会报错，想要了解更多信息的朋友可以查看github中的官方文档——Valine-Admin。

变量	说明	示例
ADMIN_URL	云引擎域名	例如我这里的https://shenshilei1022.avosapps.us/
MAIL_TEMPLATE	回复邮件模板	模板内容放在下面
SENDER_EMAIL	发件邮箱	自己的邮箱😁
SENDER_NAME	发件人	邮件标题，怎么取都🆗
SITE_NAME	博客名称	ShenShilei’s Blog
SITE_URL	博客地址	https://shenshilei1022.gitee.io/
SMTP_PASS	SMTP登录密码	去邮箱设置找找SMTP就好啦
SMTP_SERVICE	邮箱服务商	这里我用的QQ邮箱就填QQ
SMTP_USER	SMTP登录用户	还是自己的邮箱😁

提醒邮件使用彩虹模板

则将MAIL_TEMPLATE的值设置为如下html

<div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}"> ${SITE_NAME}</a>上的留言有新回复啦！</p></div><div style="margin:40px auto;width:90%"><p>${PARENT_NICK} 同学，您曾在文章上发表评论：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${PARENT_COMMENT}</div><p>${NICK} 给您的回复如下：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb"                href="${SITE_URL}"> ${SITE_NAME}</a>。</p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div></div>