为 Blogger 安装 Valine 评论系统

之前博客使用的是韩国的来必力评论系统,优点挺多,支持QQ、微信等登录,有完善的后台管理。唯一的一个缺点大概就是评论区加载的太慢(大概需10s),介于此缺点,决定把评论系统换成Valine。


特此感谢JoeyLiu大佬的指点,他的博客:https://blog.iljw.me/,他的公众号:Joeyspace

一、为什么使用Valine

Valine 诞生于2017年8月7日,是一款基于Leancloud的快速、简洁且高效的无后端评论系统。

Valine 的特点

  • 无后端实现
  • 高速,使用国内后端云服务提供商 LeanCloud 提供的存储服务
  • 支持邮件通知
  • 支持验证码
  • 支持 Markdown
  • 支持Emoji 😉

二、在Blogger上安装Valine

这里我安装的是:Deserts大佬修改后的版本,增加了后台管理和完善了邮件通知!
Valine安装过程其实简单,这里引用 Valine 原作者 @云淡风轻 的安装教程,想在Blogger上使用Valine需要对原安装教程稍作修改,后文会进行说明。

1.获取APP ID 和 APP Key

请先登录或注册 LeanCloud,务必注册国际版:https://leancloud.app/
然后进入控制台后点击左下角创建应用
20190507210658.png
20190507210658.png
应用创建好以后,进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP IDAPP Key
20190507210730.png
20190507210730.png

2.设置安全域名

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

3. 修改Blogger主题模板

打开Blogger后台修改Html
20190508010532.png
20190508010532.png
我使用的是官方Contempo这套主题模板,并且实现了国内免翻墙访问,详情可以看我之前写的:Blogger搭建国内可正常访问博客,如果你想在其他主题上使用Valine评论系统,你依然可以试试下面的方法(应该是通用的)

</head>前插入以下两段代码
 <script src='//cdn1.lncld.net/static/js/3.0.4/av-min.js'/>
    <script src='你的外链/Valine.min.js'/>
Valine.min.js你可以使用别人的或者上传到自己的服务器(这里我是传到了自己的网易云对象存储)或主机:Valine Ex
  • 然后你可以看到我的评论样式和官方Valine样式不一样,这里是我采用了Deserts大佬修改后的样式
  • 如果你觉得这个评论样式不错,你可以打开这个链接,另存这个JS并上传到自己的服务器,再在自己的博客模板中引用:https://axu.nos-eastchina1.126.net/blogger/Valine.min.js
成功插入之后如下图:
20190508001131.png
20190508001131.png
我这里的是被我注释掉了的,是为了实现国内免翻墙访问博客,详情请看:Blogger搭建国内可正常访问博客

通过搜索找到 <b:includable id='comments' var='post'>...</b:includable>,点一下左边的黑色箭头,展开代码。
<div class='comment'/>插入进去,成功后如下图
20190508001055.png
20190508001055.png

重点!这里要对官方代码进行一点修改,需要加入这段代码:
window.onload = function(){
}
把官方代码放到上面那段代码中间,你会得到这样一段代码:
window.onload = function(){
    <script>
        new Valine({
            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>
}
此外,如果你的主题没有引入 jQuery 也请引入。
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
最后,把这段代码放在</body>之前即可,比如下图我这样
20190508001019.png
20190508001019.png
我这里的</body>是被我注释掉了的,是为了实现国内免翻墙访问博客,详情请看:Blogger搭建国内可正常访问博客
至此,你的评论系统已经可以工作了!回到你的文章页面刷新看一看吧!

4.邮件提醒

如果你还想要实现评论邮件通知、评论管理、垃圾评论过滤等功能。作者在其博客上有详细的教程,我就在不这里复制粘贴了。

此博客中的热门博文

Blogger搭建国内可正常访问博客(超详细教程)