/ 折腾

Valine: 独立博客评论系统

@云淡风轻 开发了 Valine -- 一款极简的评论系统。我冒昧做了二次修改给自己的博客用上;强迫症使然,这两天又熬夜写了个后台管理,对 Valine 做了轻度改造,让其更合我的胃口。Valine 可以说是当前最好的独立博客评论解决方案了。

Valine 的特点:

  • 无后端实现
  • 高速,使用国内后端云服务提供商 LeanCloud 提供的存储服务
  • 开源,自定义程度高
  • 支持邮件通知
  • 支持验证码
  • 支持 Markdown

我完善实现了以下内容:

  • [08/16 更新] 隐私保护:敏感字段限制读取,如 E-mail(用于头像显示和评论通知)、User-Agent、IP(用于垃圾评论判别)
  • [11/19 更新云引擎休眠解决方案]关于自动休眠问题的说明
  • 头像显示、样式美化和细节优化
  • 完善的邮件通知,自定义 SMTP 发件频率和内容不再受限
  • 基于 Akismet 的垃圾评论自动标注和过滤
  • 评论管理,避免直接操作数据库
  • 通知邮件补发(未发送或发送失败的通知邮件可以进入后台补发)
  • Disqus 数据迁移
  • 清理不必要的数据库字段,提高效率

在线预览

评论安装

安装过程非常简单,这里引用 Valine 原作者 @云淡风轻 的安装教程,稍作修改。

获取 APP ID 和 APP KEY

点击这里登录或注册Leancloud
点这里创建应用,应用名看个人喜好。
选择刚刚创建的应用>设置>选择应用 Key,然后你就能看到你的APP ID和APP KEY了,参考下图:

为了您的数据安全,请填写应用>设置>安全设置中的Web 安全域名,如下图:

修改主题模板

在主题模板的文章页中引入相应的 js 即可,几乎所有博客程序适用。以 Ghost 博客的默认主题为例,只需要在 「post.hbs」 文件中 </body> 前插入下方的代码即可。

    <!--评论显示区,请插入合适的位置-->
    <div class="comment"></div>
    <!--载入js,在</body>之前插入即可-->
    <!--Leancloud 操作库:-->
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <!--Valine 的核心代码库-->
    <script src="./dist/Valine.min.js"></script>
    <script>
        new Valine({
            // AV 对象来自上面引入av-min.js(老司机们不要开车➳♡゛扎心了老铁)
            av: AV, 
            el: '.comment',
            app_id: 'Your APP ID', // 这里填写上面得到的APP ID
            app_key: 'Your APP KEY', // 这里填写上面得到的APP KEY
            placeholder: 'ヾノ≧∀≦)o来啊,快活啊!', // 留言框占位提示文字
        });
    </script>

Valine.min.js 你可以使用别人的或者上传到自己的服务器或主机:Valine Ex

需要修改的只有:el、app_id 和 app_key。如果之前有用原版Valine,请将邮件通知和验证码关掉:notify: false, verify: false,避免重复发通知。算术验证码反人类,强烈建议停用。
此外,如果你的主题没有引入 jQuery 也请引入。

<script src="https://cdnjs.cat.net/ajax/libs/jquery/3.2.1/jquery.min.js</script>

至此,你的评论系统已经可以工作了!是不是很简单😉.

云引擎一键部署

虽然 Valine 是无后端的,但为了实现邮件通知和垃圾评论过滤,需要部署少量的 LeanEngine 代码。不用担心,代码我都写好了,不需要本地开发环境,只要在网页点两下就能完成。关于自动休眠问题的说明

1.打开 LeanCloud 后台,进入云引擎设置页。

ping-mu-kuai-zhao-2017-11-12-xia-wu-2-45-11

  • 切换到部署标签页,分支使用master,点击部署即可:

ping-mu-kuai-zhao-2017-11-12-xia-wu-2-43-52

2.此外,你需要设置云引擎的环境变量以提供必要的信息,如下示例:

ping-mu-kuai-zhao-2017-11-12-xia-wu-2-46-35

请正确填写 SMTP 服务器信息,部分邮箱需要单独的 SMTP 密码。以QQ邮箱为例,需要在设置中开启 SMTP 并且通过发送短信来获取授权码(即密码)。注意我们使用 SSL 发件,所以端口别填错了。

如果你用过 WordPress 你应该有 Akismet Key;如果还没有,你可以去 AKISMET FOR DEVELOPERS 网站 免费申请一个;如果你不需要反垃圾评论,Akismet Key可以忽略。

3.设置二级域名后你可以访问评论管理后台。

后台管理需要登录,使用云存储 _User 表中的用户登录即可。特别提醒,为确保数据安全,请合理设置数据库权限。此外,请务必设置 Web 安全域名。

4.设置完成后重启一下云引擎实例一切就正常工作啦!

数据迁移

Disqus2LeanCloud
(点击提交按钮后跳转至博客首页,大约一两分钟会自动导入完成。)

效果

前端效果:

后台演示

后台截图:

ping-mu-kuai-zhao-2017-11-12-xia-wu-2-57-13

邮件通知:

ping-mu-kuai-zhao-2017-11-12-xia-wu-2-52-48

小结

Valine 『无后端』已经可以很好的运行,但反垃圾评论和邮件通知还得靠后台来做,正好 LeanCloud 提供免费的云引擎和云 Hook,得以实现上述功能。LeanCloud 实在太好用了,借助官方的示例程序,连 JavaScript 语法都不懂就硬着头皮用 Nodejs 了,代码虽然很丑还是放出来,Github:Valine-Admin。另外数据迁移是用 Flask 写的,也是第一次用,所以就不放源码献丑了。

关于免费云引擎自动休眠的补充说明:
关于自动休眠的官方说法:点击查看;休眠后只影响邮件通知功能,可以在评论管理后台补发。
我的做法是在 VPS 上添加一个定时任务,每天6:00 ~ 23:00每20分钟访问一次我的leanapp网址,防止云引擎进入休眠,保证通知邮件的及时发送。cron定时任务:*/20 6-23 * * * curl https://deserts.leanapp.cn。薅羊毛就要薅得干干净净!

支付宝扫码打赏 微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章

Deserts

Deserts

CS专业在读;预备码农;科幻爱好者;年过半半百,一无所长。