前言

Valine，是一款快速、简洁且高效的无后端评论系统，它界面简洁、游客无需登录即可评论，还支持表情，对于博客和访客都很友好。它基于LeanCloud搭建，对Hexo和Jekyll的博客都支持，配合Leancloud云引擎实现邮件通知、垃圾评论识别和评论管理面板等等功能。

下面我们介绍搭建Valine评论系统的方法以及使用valine-admin 实现有新评论时的邮件提醒功能。

注：我使用的是Jekyll博客，如果是其他类型的博客请自行搜索。

给博客添加Valine评论

获取 APP ID 和 APP KEY

点击这里登录或注册Leancloud
点这里创建应用，应用名看个人喜好。
选择左下角的设置>应用Key

_config.yaml配置

valine_comment: 
enable: true
leancloud_appid: Cd26RI8uft3yIkXRTKTvVWe7-gzGzoHsz
leancloud_appkey: UVDInqUyF8cl6EaRA58snH7h
placeholder: Say something...

新增评论页面

新增_includes/valine_comment.html

<!-- <script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
new Valine({
el: '#comments',
app_id: 'U24f6pItYFGdkT6HD1gDFtGQ-9Nh9j0Va',   //网站配置文件_config.yml
app_key: 'qng12LPr1OxxkRiFg7VK1AyA', //网站配置文件_config.yml
placeholder:'Say something...'
});</script>

增加评论功能代码

在需要添加评论框的文件中增加：

<!-- 使用 valine 评论框 start -->
<div id="comments">
<!-- <script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<script src=" /static/js/av-min.js "></script>
<script src=" /static/js/Valine.min.js "></script>
<script>
    new Valine({
        el: '#comments',
        app_id: 'U24f6pItYFGdkT6HD1gDFtGQ-9Nh9j0Va',   //网站配置文件_config.yml
        app_key: 'qng12LPr1OxxkRiFg7VK1AyA', //网站配置文件_config.yml
        placeholder:'Say something...',
        visitor: 'true' // 阅读量统计
    });</script>
</div>
<!-- 使用 valine 评论框 end -->

给Valine添加邮件提醒

设置邮件提醒模板

登录leancloud

在设置—>邮件模板—>右边红框内修改代码—>保存模板：

<p>Hi, </p>
<p>
你在  的评论收到了新的回复，请点击查看：
</p>
<p><a href="https://sumcai.gitee.io" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

源码部署

云引擎–>部署–>git部署

在Deploy from中填写以下地址后点击部署

https://github.com/hongweifuture/Valine-Admin.git

自定义环境变量

云引擎–>设置

添加如下环境变量：

变量名	说明	值
SENDER_NAME	邮箱发件人名称	robot
SITE_NAME	博客站点的名字	August Blog
SITE_URL	博客的URL	https://sumcai.gitee.io
SMTP_PASS	SMTP登录密码（授权码）
SMTP_SERVICE	SMTP服务器提供商（如QQ\163等）	163
SMTP_USER	SMTP登录用户	使用的邮箱地址

如图所示：

上述配置没问题点话，收到的邮件提醒效果如图

最后

本文简单介绍了valine以及使用valine-admin配置邮件提醒，更多功能等待大家去发掘，有问题欢迎评论区交流~

参考：

博客使用valine评论开启邮件提醒

快速搭建博客：美化主题

个人博客使用valine评论系统

前言