为Hugo增加Valine评论系统

无论是早些年坚守Hexo还是19年进驻Hugo,始终没动过评论系统的念头,其因有二,一是本站的原生评论系统是Disqus,已经被墙,无法访问。二是印象中Disqus留言必须有Google账号,这就对读者群无形中形成技术性筛选。

不久前,看了fooleap大神的《科学使用 Disqus 》,忽然对架设Disqus API有了兴趣,但这种disqus-php-api 这种方案需要有一个境外空间实例,只得作罢。

直到今天,外貌协会如我看到了deserts二开的Valine ,毅然下定决心给自己来一套。

亦步亦趋按官方给的安装步骤改造博客,然而到最后还是永远在加载状态,而且控制台提示一连串的bug:

已拦截跨源请求:同源策略禁止读取位于 https://api.ipify.org/?format=json 的远程资源。(原因:CORS 请求未能成功)。[详细了解]
Error: "Class or object doesn't exists."
 r error.js:8
 v request.js:123
 C es6-promise.js:465
 q es6-promise.js:873
 v request.js:106
 T es6-promise.js:416
 N es6-promise.js:431
 A es6-promise.js:399
 b es6-promise.js:341
 u es6-promise.js:126

调试了无数遍不同版本的av.min.jsvaline.min.js,故障依然。

尽管心有不甘,但也只能姑且放弃这套方案。一番挣扎后,我又乱入到原生态的valine官网 ,看到了无数个hexo主题的成功案例 ,又激起了永不言败的斗志。

这一次,退而求其次,参照了hexo-theme-Anisina 的评论系统,悟出了适合自己的部署办法:

准备工作

leancloud 注册、获取APPID、APPKEY、设置云引擎等过程就此略过不表,不明白的多看几遍Valine Admin配置手册

第一步

xxx/layouts/partials/目录下,新建comment.html,内容如下:

{{ if eq .Params.comments true }}
   <div class="vcomments"></div>
    <script src="/js/av-min.js"></script>
    <script src="/js/Valine.min.js"></script>
    //必须保证jquery在上述两个js之前已加载
    //Valine.min.js也可以调用官方原生态js
    //<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    //<script src="//cdn.jsdelivr.net/npm/valine"></script>
    <script>
        var GUEST = ['nick','mail','link'];
        var meta = '{{ .Site.Params.Valine.meta }}';
        meta = meta.split(',').filter(function (item) {
            return GUEST.indexOf(item)>-1;
        });
        var notify = '{{ .Site.Params.Valine.notify }}' == true ? true : false;
        var verify = '{{ .Site.Params.Valine.verify }}' == true ? true : false;
        new Valine({
            el: '.vcomments',
            emoticon_url: '{{ .Site.Params.Valine.emojiURL }}',
            emoticon_list: ["狂汗.png","不说话.png","哭泣.png","邪恶.png","吐舌.png","无奈.png","内伤.png","脸红.png","得意.png","汗.png","喜极而泣.png","赞一个.png","吐血倒地.png","喷水.png","黑线.png","中刀.png","中指.png","害羞.png","惊喜.png","扇耳光.png","瞅你.png"],
            notify: notify,
            verify: verify,
            app_id: "{{ .Site.Params.Valine.ID }}",
            app_key: "{{ .Site.Params.Valine.Key }}",
            placeholder: "{{ .Site.Params.Valine.placeholder }}",
            avatar:"{{ .Site.Params.Valine.avatar }}",
            meta:meta
        });
      </script>
{{ end }}

第二步

然后打开post.html,在正文容器后加入评论开关代码:


 {{ if eq .Params.comments true -}}
    {{ partial "comment.html" . }}
    {{ end -}}

第三步

然后打开config.tomlconfig.json,加入valine相关参数:

"Valine": {
            "ID": "VvF*****************GzoHsz",
            "Key": "XL4po***************2ncFGU",
            "emojiURL": "https://cloud.panjunwen.com/alu",
            "placeholder": "看你骨骼清奇,来一发评论吧骚年",
            "verify": "false",
            "notify": "false",
            "avatar": "mm"
        },

清除/public路径下的缓存文件后,再来一发hugo server

当你梦寐以求的valine赫然跃入你的眼帘时,岂不美哉美哉?

第四步

如果希望对评论的管理更上一阶,那么建议增加Valine后台管理面板,具体设置参数请见deserts的《Valine Admin 配置手册

后台管理界面如下图