/ 折腾

Valine——独立博客评论系统解决方案

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

Valine 的特点:

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

我完善实现了以下内容:

  • [08/16 更新] 隐私保护:敏感字段限制读取,如 E-mail(用于头像显示和评论通知)、User-Agent、IP(用于垃圾评论判别)
  • 头像显示、样式美化和细节优化
  • 完善的邮件通知,自定义 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 一键部署页,填写必要信息后即可自动部署。

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

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

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

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

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

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

工作原理: 本身 Valine 只工作在浏览器端,评论逻辑由前端 JavaScript 完成,数据存储交给 LeanCloud 去做。但单纯的前端有所局限,无法完成一些必要的功能,而 LeanCloud 没有提供这些功能接口,如邮件发送,垃圾过滤等。LeanCloud 除了数据存储还提供云引擎,即可以部署后端代码到云引擎上,如数据新建后触发 afterSave 钩子,进而完成我们所需的工作;当然,云引擎也具备普通服务器的网站功能,我们因此能实现评论数据后台管理。

数据迁移

Disqus2LeanCloud

效果

前端效果:

后台演示

后台截图:

邮件通知:

小结

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

Deserts Pan

Deserts Pan

CS专业在读;热爱代码,机器学习入门;年近半半百,一无所长。

Read More