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

给 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 项目地址，保存，手动部署。

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

2. 添加变量

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

详细说明如下：

变量	示例	说明
SITE_NAME	六月长河的博客	[必填] 博客名称
SITE_URL	https://kingpo.netlify.app/	[必填] 首页地址
SMTP_SERVICE	QQ	[必填] 邮件服务提供商，参照 Supported services
SMTP_USER	[email protected]	[必填] SMTP 用户名
SMTP_PASS	ccxxxxxxxxch	[必填] 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_HOST	`smtp.qq.com`	[必填] SMTP_SERVICE 留空时，自定义 SMTP 服务器地址
SMTP_PORT	`465或587`，参照 POP3 与 SMTP	[必填] SMTP_SERVICE 留空时，自定义 SMTP 端口
SMTP_SECURE	true	[选填] SMTP_SERVICE 留空时填写
BLOGGER_EMAIL	[email protected]	[选填] 博主通知收件地址，默认使用 SENDER_EMAIL
ADMIN_URL	https://lean.kinpo.eu.org/	评论管理后台地址
COMMENT		新评论内容
NICK		新评论者昵称
PARENT_COMMENT		父级评论内容
PARENT_NICK		收件人昵称（被 @者，父级评论人）
POST_URL		评论文章地址（完整路径）

MAIL_TEMPLATE 代码块：

  <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 © 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>

样式如下：

MAIL_TEMPLATE_ADMIN 代码块：

  <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>

样式如下图：

这里注意，MAIL_TEMPLATE_ADMIN 代码块： 和 MAIL_TEMPLATE 代码块： 两个模板的内容不要搞反，我参考 valine-admin-document/ 发现是填反了，会报错，报错日志如下

3. 绑定自定义域名

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

4. 评论管理

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

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

然后直接使用域名就可以登录了。功能也比较简单，标记垃圾评论，删除，跳转查看。

5. 定时任务设置

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

两个定时任务函数设置

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

利用 github actions 设置定时

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

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

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/

关注一下有惊喜

公众号

赞赏支持

微信打赏

支付宝打赏

给 valine 评论系统升级

基础版邮件提醒

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

1. 云引擎部署

2. 添加变量

3. 绑定自定义域名

4. 评论管理

5. 定时任务设置

Recommend

A new report into flexible work shows employees are doing their bit, but employe...

陕西自贸试验区“一带一路”跨国农业全链条发展体系向全国推广

VMware and Equinix partner to bring data to the edge for metro or branch process...

跟着小白一起学鸿蒙--简析蓝牙协议栈（十三）

Sriram Krishnan: The Indian-American 'helping' Elon Musk run Twitter

元宇宙凉了？Meta大裁员，烧的钱够买4个B站

特别受客户欢迎的3种logo设计形式，同时极具价值感！

华硕发布ROG Strix Gold Aura Edition系列电源：最高1200W，支持12VHPWR

品牌出海：企业想开发海外市场，应提前做好哪些准备工作？

尤雨溪回应：Vite 真的比 Turbopack 慢 10 倍？

About Joyk