搭建自己的技术博客系列(三)让你的博客拥有评论功能!

简介: 给大家介绍一个博客评论神器,Valine。本来hexo博客用的是gitment,我也非常喜欢,看着逼格就超高呀。无奈我用着bug略多,而且毕竟有github账户的小伙伴似乎并不多。于是我就忍痛准备换评论系统。

给大家介绍一个博客评论神器,Valine。

本来hexo博客用的是gitment,我也非常喜欢,看着逼格就超高呀。无奈我用着bug略多,而且毕竟有github账户的小伙伴似乎并不多。于是我就忍痛准备换评论系统。然后在最近刚刚加入的hexo博客群里,看见了一个神器。也就是本篇主人公——Valine.js。

具体配置就见如下的文章吧。它的定义—— 一款极简的无后端评论系统。

在多说和网易云跟帖相继倒闭的情况下,这个简直是救人一命胜造七级浮屠呀。

Valine -- 一款极简的评论系统

Valine官网

这个评论系统是基于LeanCloud的,大家应该对这个很熟悉,对,Hexo的博客阅读量统计也是它。官网网址如下,需要注册一个账户。

Leancloud配置

首先访问Leancloud官网https://leancloud.cn/
有Github账号的小伙伴可以用Github账号进行登陆然后绑定邮箱就可以啦!
进入之后点击创建应用
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

Valine配置

在这里插入图片描述

将下载好的 Valine.min.js 放置于 nextsourcejssrc 下
接着,打开valine配置文件进行配置
valine配置文件路径:nextlayout_third-partycommentsvaline.swig

{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unjkp.com/valine/dist/Valine.min.js"></script>  //删除Valine核心代码库外链调用
  <script src="/js/src/Valine.min.js"></script>  //调用刚下载的本地文件以加速加载速度

  {% set valine_uri = '/js/src/Valine.min.js' %}  //这里改为从本地加载
  {% if theme.vendors.valine %}
    {% set valine_uri = theme.vendors.valine %}
  {% endif %}
  <script src="{{ valine_uri }}"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = '{{ theme.valine.guest_info }}';
    guest = guest.split(',').filter(function (item) {
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: {{ theme.valine.verify }},
        notify: {{ theme.valine.notify }},
        appId: '{{ theme.valine.appid }}',
        appKey: '{{ theme.valine.appkey }}',
        placeholder: '{{ theme.valine.placeholder }}',
        avatar:'{{ theme.valine.avatar }}',
        guest_info:['nick'] ,  //评论者只需要提供评论的昵称即可
        pageSize:'{{ theme.valine.pageSize }}' || 10,
    });
    //增加以下六行代码去除 power by valine
    var infoEle = document.querySelector('#comments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
      infoEle.childNodes.forEach(function(item) {
        item.parentNode.removeChild(item);
      });
    }
  </script>
{% endif %}

然后我们去主题配置文件中进行修改
主题配置文件路径:next_config.yml
找到以下参数进行修改

valine:
  enable: true //打开valine评论功能
  appid: 你的leancloud appid 
  appkey: 你的leancloud appkey 
  notify: false //邮件提醒
  verify: true //评论时是否有验证码,需要在Leancloud 设置->安全中心 中打开
  placeholder: 说点什么吧! //评论框默认显示
  avatar: hide //评论者的头像,我这里设置的不显示
  guest_info: nick # custom comment header
  pageSize: 10 # pagination size

我的配置文件

由于Icarus主题的配置文件结构和next不太一样,所以我们这边的配置文件也有点不一样,首先修改_config.xml文件
在这里插入图片描述
然后在valine.ejs中加入以下代码
在这里插入图片描述
如果你使用的next主题,可以这样修改配置文件
在这里插入图片描述
PS:评论者头像可以进行如下设置

到此,一个极简评论系统就完成啦!
在这里插入图片描述

效果预览

https://how2playlife.com/
随便找一篇文章,拉到最下面,就是这个效果啦

相关文章
一键自动化博客发布工具,用过的人都说好(51cto篇)
使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到51cto上。
一键自动化博客发布工具,用过的人都说好(51cto篇)
|
7月前
|
人工智能 大数据 Java
面向萌新的技术博客入门指南
面向萌新的技术博客入门指南
83 0
|
前端开发
前端好的博客收藏
前端好的博客收藏
58 0
|
前端开发 JavaScript Java
【博客平台】
【博客平台】
74 0
|
Shell 开发工具 git
博客搭建
博客搭建
186 0
|
Ubuntu Docker 容器
关于该博客的搭建
关于该博客的搭建
82 0
|
域名解析 弹性计算 资源调度
工具分享【一】5分钟搭建自己的博客
本文利用vuePress快速构建大气好看的个人博客,vuePress是由Vue 驱动的静态网站生成器,可以基于markdown语法生成网页,君哥的个人博客就是由vuepress构建
401 0
工具分享【一】5分钟搭建自己的博客
|
弹性计算 安全 Linux
如何使用阿里云简单的搭建自己的博客
使用PHP集成工具phpstudy,简易搭建word press个人博客
420 0
如何使用阿里云简单的搭建自己的博客
|
存储 移动开发 JavaScript
10分钟带你搭建属于自己的博客
10分钟带你搭建属于自己的博客
242 0
10分钟带你搭建属于自己的博客