valine评论设置邮件通知和valine-admin后台管理

https://s3.bmp.ovh/imgs/2022/09/06/fd89748a78bed6c3.png

给valine评论系统升级

valine评论系统搭起来后,整体比较简洁,甚至,简单。

如果没限制的话,任何人都可以留言,数据会记录到leancloud管理端。但是因为没有后台,你查看评论只能在你博客页面查看或者去leancloud管理端去管理原始评论数据,就不是很方便。

基础版邮件提醒

如果不想太折腾的话,可以配置基础版的邮件提醒,但是它只能提醒有评论而已,无法查看评论内容和跳转评论页面。

这种方法实际是通过修改leancloud的密码重置邮件提醒来实现的,属于巧借力。

配置方式可参考:valine邮件提醒

https://s.imgkb.xyz/abcdocker/2022/08/30/76557fb677cd3/76557fb677cd3.png

进阶版邮件提醒和评论后台管理

进阶版邮件提醒,可以自定义配置回复模板样式,直接查看评论内容,和直达评论页面。

并且搭配使用独立的评论后台管理,可以在浏览器直接登录管理。

这里就需要使用到Valine-Admin,这是valine的增强版本,当前在GitHub上有多个开源版本。配置也不会很复杂。

这里采用leancloud国际版演示。

1. 云引擎部署

leancloud国际版进入后台,【云引擎】-》【部署】-》选择Git部署,输入Valine-Admin项目地址,保存,手动部署。

1
https://github.com/DesertsP/Valine-Admin

https://s.imgkb.xyz/abcdocker/2022/08/30/25a0565930021/25a0565930021.png

2. 添加变量

添加一大批环境变量,这里有些要注意的点。

https://s.imgkb.xyz/abcdocker/2022/08/30/e068a055e993f/e068a055e993f.png

详细说明如下:

变量示例说明
SITE_NAME六月长河的博客[必填] 博客名称
SITE_URLhttps://kingpo.netlify.app/[必填] 首页地址
SMTP_SERVICEQQ[必填] 邮件服务提供商,参照 Supported services
SMTP_USER[email protected][必填] SMTP 用户名
SMTP_PASSccxxxxxxxxch[必填] SMTP 授权码(非邮箱独立密码!),参照客户端设置
SENDER_NAME六月长河[必填] 发件人
SENDER_EMAIL[email protected][必填] 发件邮箱
MAIL_SUBJECT${PARENT_NICK},您在${SITE_NAME}上的评论收到了回复[必填]@通知邮件主题(标题)模板
MAIL_TEMPLATE填下文MAIL_TEMPLATE代码块[必填]@通知邮件内容模板
MAIL_SUBJECT_ADMIN${SITE_NAME}上有新评论了[必填] 博主邮件通知主题模板
MAIL_TEMPLATE_ADMIN填下文MAIL_TEMPLATE_ADMIN代码块[必填] 博主邮件通知内容模板
SMTP_HOSTsmtp.qq.com[必填] SMTP_SERVICE 留空时,自定义 SMTP 服务器地址
SMTP_PORT465或587,参照 POP3 与 SMTP[必填] SMTP_SERVICE 留空时,自定义 SMTP 端口
SMTP_SECUREtrue[选填] SMTP_SERVICE 留空时填写
BLOGGER_EMAIL[email protected][选填] 博主通知收件地址,默认使用 SENDER_EMAIL
ADMIN_URLhttps://lean.kinpo.eu.org/评论管理后台地址
COMMENT新评论内容
NICK新评论者昵称
PARENT_COMMENT父级评论内容
PARENT_NICK收件人昵称(被@者,父级评论人)
POST_URL评论文章地址(完整路径)
  • MAIL_TEMPLATE代码块:
 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
  <html>
<head></head> 
<body> 
  <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;color:#257db9">您在<a style="text-decoration:none;color:#257db9" href="${SITE_URL}">「Kingpo's Note」</a>上的留言有新回复啦!</p>
  </div> 
  <div style="margin:40px auto;width:90%"> 
    <p>亲爱的 <span style="color:#7777ff">${PARENT_NICK}</span> 同学,您曾在该页面/文章:</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;"> 
    ${POST_URL}
    </div> 
    <p>发布了以下评论:</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;"> 
    <b>${PARENT_COMMENT} </b> 
    </div> 
    <p>刚刚,用户 <span style="color:#7777ff">${NICK}</span> 给您的回复如下:</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;"> 
    <b>${COMMENT}</b> 
    </div> 
    <p>您可以点击 <a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看回复的完整內容</a>,欢迎再次光临<a style="text-decoration:none; color:#9fefaf" 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> 
  <center> 
  Powered by LeanCloud
</br>
  Copyright &copy; 2022 <a href="https://kingpo.netlify.app" style="color:auto;">六月长河</a>
  <br /> 
  <a href="https://kingpo.netlify.app"><img style="height:70px !important;" src="https://kingpo.netlify.app/images/avatar.png" /></a> 
  </center> 
  <br /> 
  <br />  
</body>
</html>

样式如下:

https://s.imgkb.xyz/abcdocker/2022/08/30/9fd8124a02846/9fd8124a02846.png

  • MAIL_TEMPLATE_ADMIN代码块:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  <html>
<head></head>
<body>
  <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 0px;">您在<a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的文章有了新的评论</h2> 
  <p><strong>${NICK}</strong>回复说:</p>
  <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">
    ${COMMENT}
  </div>
  <p> 您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a><br /></p> 
  <p><strong>评论页面为</strong></p>
  <p><strong>${POST_URL}</strong></p>
  <br />
  </div>
</body>
</html>

样式如下图:

https://s.imgkb.xyz/abcdocker/2022/08/30/67d6c76cfb7aa/67d6c76cfb7aa.png

这里注意,MAIL_TEMPLATE_ADMIN代码块:MAIL_TEMPLATE代码块: 两个模板的内容不要搞反,我参考valine-admin-document/发现是填反了,会报错,报错日志如下 https://s.imgkb.xyz/abcdocker/2022/08/30/9c835599213b5/9c835599213b5.png

3. 绑定自定义域名

这里需要绑定自定义域名一个域名,它是你后台评论管理的地址,在你定义的域名解析中添加一条CNAME记录。

https://s.imgkb.xyz/abcdocker/2022/08/30/3ffa42977f820/3ffa42977f820.png

4. 评论管理

绑定自定义域名后,第1步也部署好后,即可进行评论管理。

首次使用需要先访问管理员注册页面https://绑定的域名/sign-up,注册管理员登录信息,如:https://lean.kinpo.eu.org/sign-up

然后直接使用域名就可以登录了。功能也比较简单,标记垃圾评论,删除,跳转查看。 https://s.imgkb.xyz/abcdocker/2022/08/30/ebe3c0eb13e3c/ebe3c0eb13e3c.png

https://s.imgkb.xyz/abcdocker/2022/08/30/fcb094b0acb28/fcb094b0acb28.png

5. 定时任务设置

因为leancloud免费版本提供的实例,有休眠策略,如果没有请求,会自动休眠。为了保持实例一直在线,我们可以设置定时任务函数来来唤醒。

https://s.imgkb.xyz/abcdocker/2022/08/31/84b8963c89ba4/84b8963c89ba4.png

  • 两个定时任务函数设置

参看Valine Admin 配置手册定时任务设置

  • 利用github actions设置定时

设置定时任务函数,很多人运行几天后会遇到leancloud平台因为流控原因无法激活定时唤醒任务的问题。

另一种方式是利用github actions中的workflow定时执行命令访问leancloud的web域名,实现唤醒。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
name: 'wake comment system'
on:
  push:
  schedule:
    - cron: '7,33,53 0-15,23 * * *'
    
jobs:
  bot:
    runs-on: ubuntu-latest
    steps:
      - run: curl -sLo /dev/null ${{ secrets.DOMAIN }}

仓库->settings->secrets->actions->New repository secret
Name: DOMAIN
Value: 你的web域名


参考资料:

Valine Admin 邮件回复提醒 https://xiabor.com/valine-admin.html#valine%E7%9A%84%E9%82%AE%E4%BB%B6%E6%8F%90%E9%86%92

Valine Admin 配置手册 https://deserts.io/valine-admin-document/