【个人博客网站】博客美化（五）：评论系统以及通知邮件

1.4k
博客教程 / 美化教程
博客文档美化教程
本文最后更新于 about 2 years ago，文中所描述的信息可能已发生改变。

TIP提示

本篇以Valine为例 推荐使用LeanCloud国际版 具体文档地址：https://github.com/HCLonely/Valine

使用第三方js ​

在主题配置文件中，修改以下内容

yaml
CDN:
  option:
    ···
    ## gitalk:
    ## gitalk_css:
    ## blueimp_md5:
    valine: https://fastly.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js
    ## disqusjs:
    ## disqusjs_css:
    ## twikoo:

配置修改 ​

在主题配置文件中，修改以下内容

yaml
## valine
## https://valine.js.org
valine:
  appId: 
  appKey: 
  avatar: ## gravatar style https://valine.js.org/#/avatar
  serverURLs: ## This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: https://butterfly.js.org/img/comment_bg.png ## valine background
  visitor: false
  option:
    enableQQ: true
    emojiCDN: //i0.hdslb.com/bfs/emote/
    recordIP: true
    lang: zh-CN
    placeholder: 发表你的观点及看法
填写QQ号自动获取QQ昵称和邮箱，昵称需要至少3个字符
已使用评论邮件提醒功能
    tagMeta: ["博主","小伙伴","访客"]
    master: ['']
    friends: ['']
    requiredFields: ['nick','mail','link']
    metaPlaceholder: {"nick":"昵称/QQ号(必填,昵称至少3个字符)","mail":"邮箱(选填,填写后如回复会收到邮件)","link":"网站链接(选填)"}

评论系统 ​

添加变量 ​

该部分具体查看：https://github.com/DesertsP/Valine-Admin/blob/master/README.md

打开LeanCloud国际版控制台

依次打开云引擎、WEB、设置，添加以下变量

环境变量示例说明
SITE_NAMEDeserts[必填]博客名称
SITE_URLhttps://blog.mnxy.eu.org[必填]首页地址
SMTP_SERVICEQQ[新版支持]邮件服务提供商，支持 QQ、163、126、Gmail 以及 更多
SMTP_USER[email protected][必填]SMTP登录邮箱
SMTP_PASSccxxxxxxxxch[必填]SMTP登录密码(QQ、163邮箱需要获取独立密码)
SENDER_NAME梦念逍遥[必填]发件人名称
SENDER_EMAIL[email protected][必填]发件邮箱(同SMTP登录邮箱)
ADMIN_URLhttps://xxx.leanapp.cn/[建议]Web主机二级域名（云引擎域名），用于自动唤醒
BLOGGER_EMAIL[email protected][可选]博主通知收件地址，默认使用SENDER_EMAIL
AKISMET_KEYxxxxxxxx[可选]Akismet Key 用于垃圾评论检测，设为MANUAL_REVIEW开启人工审核，留空不使用反垃圾
MAIL_SUBJECT${PARENT_NICK}，您在${SITE_NAME}上的评论收到了回复[可选]@通知邮件主题（标题）模板
MAIL_SUBJECT_ADMIN${SITE_NAME}上有新评论了[可选]博主邮件通知主题模板
MAIL_TEMPLATE见下文[可选]@通知邮件内容模板
MAIL_TEMPLATE_ADMIN见下文[可选]博主邮件通知内容模板

通知邮件内容模板

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>

博主邮件通知内容模板

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>${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" target="_blank">[查看评论]</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>

部署 ​

依次打开云引擎、WEB、部署，选择Git部署

Git remote URL，填写https://github.com/DesertsP/Valine-Admin.git

点击部署

新建Class ​

依次打开数据存储、结构化仓库，点击创建Class

Class名称为Comment，权限为无限制，点击创建

定时任务 ​

依次打开云引擎、定时任务，点击创建定时任务

名称环境函数运行周期
定时检查邮件生产环境resend_mailsCron表达式：0 00 22,6 * * ?
自动唤醒生产环境self_wake间隔时长：20
【个人博客网站】博客美化（七）：随机文章显示
【个人博客网站】博客美化——总篇集