用 Valine.min.js 配置一个独立博客评论系统

配置后台管理、邮件通知等功能请转至 Valine Admin 配置文档


安装

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


1. 获取 APP ID 和 APP KEY

点击这里登录或注册 Leancloud如没有备案的话,一定要用国际版。未备案域名,2019年10月1日后将不再可用。


点这里创建应用,应用名看个人喜好。


选择刚刚创建的应用>设置>选择应用 Key,然后你就能看到你的 APP ID 和 APP KEY 了,参考下图:



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



2.  修改主题模板


在主题模板的文章页中引入相应的 js 即可,几乎所有程序适用。只需要在要调用的模板页面文件中 </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="你托管的Valine路径./dist/Valine.min.js"></script>
    <script>
        new Valine({
            // AV 对象来自上面引入av-min.js(老司机们不要开车➳♡゛扎心了老铁)
            av: AV, 
            el: '.comment',
            emoticon_url: 'https://cloud.panjunwen.com/alu',
      emoticon_list: ["狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png","皱眉.png","小眼睛.png","暗地观察.png"],
      app_id: '你的id',
      app_key: '你的key',
      placeholder: 'Write a Comment'
        });
    </script>


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

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


此外,如果你的主题没有引入  jQuery 也请引入。

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


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


如果想要后台管理评论、评论自动发邮件、防垃圾评论的话,可参考 Valine Admin 配置手册

如果想用我博客的评论界面,可用自己右键把我博客的 Valine.min.js 保存下来。


效果

前端效果:



后台演示


后台截图:


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 写的,也是第一次用,所以就不放源码献丑了。


关于免费云引擎自动休眠的补充说明:
关于自动休眠的官方说法:点击查看;休眠后只影响邮件通知功能,可以在评论管理后台补发。


详见 Valine Admin 配置文档


我的做法是在 VPS 上添加一个定时任务,每天 6:00 ~ 23:00 每 20 分钟访问一次我的 leanapp 网址,防止云引擎进入休眠,保证通知邮件的及时发送。cron 定时任务:*/20 6-23 * * * curl 

打赏

取消

感谢支持 Savalone !

扫码支持

打开支付宝扫一扫,即可进行扫码打赏哦


「本文由 Savalone 原创或搜集整理发布,转载请遵守 CC BY-NC-ND 4.0 许可!」
  • 34