博客评论系统

我目前接触过的静态博客平台大部分主题都会有评论系统,即使没有,也可以自己按意愿添加,这种教程网上有很多。最终该博客我改成用valine,一想到后面几天会发生的事,我又改成了gittalk。不得不说还是valine好一点,只需一个邮箱就能对话,而gittalk还需要GitHub账号,然而不是每个人都玩GitHub。下面简要记录一下这两种评论系统我的配置过程。

valine

valine需要用到LeanCloud网站,去该网站注册一个账号。创建应用,计价方式选择免费的开发版,设置好会得到你所创建应用的 client 和 key,这两个东西后面要用到。然后在安全中心绑定自己的网站域名,到了这里,LeanCloud的设置基本就结束了,下面为博客配置valine。

valine的配置视不同平台而定,如果你已经熟悉了某平台的设计布局,自然就会配置的,下面以本站主题Persephone为例,本站由jekyll驱动。

_include/comments/目录下新建一个“valine.html”,添加如下代码:

{% if site.valine_comment.enable %}
<div id="vcomments"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        app_id: '{{ site.valine_comment.leancloud_appid }}',   //这里变量的取值在网站配置文件里_config.yml
        app_key: '{{ site.valine_comment.leancloud_appkey }}', //这里变量的取值在网站配置文件里_config.yml
        placeholder:'{{ site.valine_comment.placeholder }}'    //这里变量的取值在网站配置文件里_config.yml
    });</script>
{% endif %}

上面代码中用了if语句判断,显然还要在站点配置文件_config.yml新添“valine_comment”属性,代码如下:

valine_comment:
  enable: true
# app_id
  leancloud_appid: 第一步获取的 id
# app_key
  leancloud_appkey: 第一步获取的 key
# placeholde
  placeholder: “你是我一生只会遇见一次的惊喜:)"

因为前面已经创建了valine.html,现在需要博客去调用它以使得每篇博文页面出现评论区,以我所用主题为例,原作者采用case判断,可以选择使用哪个评论系统,在_include/comments.html文件中仿照前两个选项新增一个case:valine,而新选项所执行内容就是前面写的valine.html,故此处代码写法如下:

{% include comment/valine.html %}

至此,所有设置基本搞好了,我之前在有个地方发生了一个小问题,就是valine.html中div标签中的id参数必须与下面Valine元组的el参数中#后面内容一致,而我参考的教程所给代码居然不一样,太坑了吧……

gittalk

从名字就大概猜出该评论插件是GitHub本家的,肯定要用到GitHub。

第一步先在你的GitHub上新建一个库,例如名为“blog-talk”,另外务必保证该库setting中issue功能是开的,默认是开启的。然后需要注册一个GitHub应用,注册入口我从GitHub页面还真没找到,好在网上的小伙伴直接分享了网址,注册一个‘Authorized OAuth Apps’,按照说明填入自己的设置,两个URL都是填自己博客网址,设置好后就会得到两个后面有用的东西 Client ID和Client Secret。

接下来,博客主题自带Gittalk插件的,直接在主题配置信息中填入相关信息就OK了,会用到上面那俩。如果不自带,自己配置,就需要在你希望评论框存在的页面布局文件中加入一串引用代码,但是我们一般新建一个gittalk.html,放在_includes中,然后让博文页layout文件引用它。代码如下:

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>
<script type="text/javascript" src="/assets/js/md5.min.js"></script>
<div id="gitalk-container"></div>
<script type="text/javascript">
    var gitalk = new Gitalk({
        clientID: '复制刚才生成的clientID',
        clientSecret: '复制刚才生成的clientSecret',
        repo: '装载评论的GitHub库名',
        owner: 'GitHub的用户名',
        admin: ['Github的用户名'],
        id: md5(location.pathname),
    });
    gitalk.render('gitalk-container');
</script>

上面代码引用了一个md5.min.js文件,所以,在站点“/assets/js/”目录下新建一个md5.min.js,内容如下:

! function(n) {
    "use strict";
    function t(n, t) {
        var r = (65535 & n) + (65535 & t);
        return (n >> 16) + (t >> 16) + (r >> 16) << 16 | 65535 & r
    }
    function r(n, t) {
        return n << t | n >>> 32 - t
    }
    function e(n, e, o, u, c, f) {
        return t(r(t(t(e, n), t(u, f)), c), o)
    }
    function o(n, t, r, o, u, c, f) {
        return e(t & r | ~t & o, n, t, u, c, f)
    }
    function u(n, t, r, o, u, c, f) {
        return e(t & o | r & ~o, n, t, u, c, f)
    }
    function c(n, t, r, o, u, c, f) {
        return e(t ^ r ^ o, n, t, u, c, f)
    }
    function f(n, t, r, o, u, c, f) {
        return e(r ^ (t | ~o), n, t, u, c, f)
    }
    function i(n, r) {
        n[r >> 5] |= 128 << r % 32, n[14 + (r + 64 >>> 9 << 4)] = r;
        var e, i, a, d, h, l = 1732584193,
            g = -271733879,
            v = -1732584194,
            m = 271733878;
        for (e = 0; e < n.length; e += 16) i = l, a = g, d = v, h = m, g = f(g = f(g = f(g = f(g = c(g = c(g = c(g = c(g = u(g = u(g = u(g = u(g = o(g = o(g = o(g = o(g, v = o(v, m = o(m, l = o(l, g, v, m, n[e], 7, -680876936), g, v, n[e + 1], 12, -389564586), l, g, n[e + 2], 17, 606105819), m, l, n[e + 3], 22, -1044525330), v = o(v, m = o(m, l = o(l, g, v, m, n[e + 4], 7, -176418897), g, v, n[e + 5], 12, 1200080426), l, g, n[e + 6], 17, -1473231341), m, l, n[e + 7], 22, -45705983), v = o(v, m = o(m, l = o(l, g, v, m, n[e + 8], 7, 1770035416), g, v, n[e + 9], 12, -1958414417), l, g, n[e + 10], 17, -42063), m, l, n[e + 11], 22, -1990404162), v = o(v, m = o(m, l = o(l, g, v, m, n[e + 12], 7, 1804603682), g, v, n[e + 13], 12, -40341101), l, g, n[e + 14], 17, -1502002290), m, l, n[e + 15], 22, 1236535329), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 1], 5, -165796510), g, v, n[e + 6], 9, -1069501632), l, g, n[e + 11], 14, 643717713), m, l, n[e], 20, -373897302), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 5], 5, -701558691), g, v, n[e + 10], 9, 38016083), l, g, n[e + 15], 14, -660478335), m, l, n[e + 4], 20, -405537848), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 9], 5, 568446438), g, v, n[e + 14], 9, -1019803690), l, g, n[e + 3], 14, -187363961), m, l, n[e + 8], 20, 1163531501), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 13], 5, -1444681467), g, v, n[e + 2], 9, -51403784), l, g, n[e + 7], 14, 1735328473), m, l, n[e + 12], 20, -1926607734), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 5], 4, -378558), g, v, n[e + 8], 11, -2022574463), l, g, n[e + 11], 16, 1839030562), m, l, n[e + 14], 23, -35309556), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 1], 4, -1530992060), g, v, n[e + 4], 11, 1272893353), l, g, n[e + 7], 16, -155497632), m, l, n[e + 10], 23, -1094730640), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 13], 4, 681279174), g, v, n[e], 11, -358537222), l, g, n[e + 3], 16, -722521979), m, l, n[e + 6], 23, 76029189), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 9], 4, -640364487), g, v, n[e + 12], 11, -421815835), l, g, n[e + 15], 16, 530742520), m, l, n[e + 2], 23, -995338651), v = f(v, m = f(m, l = f(l, g, v, m, n[e], 6, -198630844), g, v, n[e + 7], 10, 1126891415), l, g, n[e + 14], 15, -1416354905), m, l, n[e + 5], 21, -57434055), v = f(v, m = f(m, l = f(l, g, v, m, n[e + 12], 6, 1700485571), g, v, n[e + 3], 10, -1894986606), l, g, n[e + 10], 15, -1051523), m, l, n[e + 1], 21, -2054922799), v = f(v, m = f(m, l = f(l, g, v, m, n[e + 8], 6, 1873313359), g, v, n[e + 15], 10, -30611744), l, g, n[e + 6], 15, -1560198380), m, l, n[e + 13], 21, 1309151649), v = f(v, m = f(m, l = f(l, g, v, m, n[e + 4], 6, -145523070), g, v, n[e + 11], 10, -1120210379), l, g, n[e + 2], 15, 718787259), m, l, n[e + 9], 21, -343485551), l = t(l, i), g = t(g, a), v = t(v, d), m = t(m, h);
        return [l, g, v, m]
    }

    function a(n) {
        var t, r = "",
            e = 32 * n.length;
        for (t = 0; t < e; t += 8) r += String.fromCharCode(n[t >> 5] >>> t % 32 & 255);
        return r
    }

    function d(n) {
        var t, r = [];
        for (r[(n.length >> 2) - 1] = void 0, t = 0; t < r.length; t += 1) r[t] = 0;
        var e = 8 * n.length;
        for (t = 0; t < e; t += 8) r[t >> 5] |= (255 & n.charCodeAt(t / 8)) << t % 32;
        return r
    }

    function h(n) {
        return a(i(d(n), 8 * n.length))
    }

    function l(n, t) {
        var r, e, o = d(n),
            u = [],
            c = [];
        for (u[15] = c[15] = void 0, o.length > 16 && (o = i(o, 8 * n.length)), r = 0; r < 16; r += 1) u[r] = 909522486 ^ o[r], c[r] = 1549556828 ^ o[r];
        return e = i(u.concat(d(t)), 512 + 8 * t.length), a(i(c.concat(e), 640))
    }

    function g(n) {
        var t, r, e = "";
        for (r = 0; r < n.length; r += 1) t = n.charCodeAt(r), e += "0123456789abcdef".charAt(t >>> 4 & 15) + "0123456789abcdef".charAt(15 & t);
        return e
    }
    function v(n) {
        return unescape(encodeURIComponent(n))
    }
    function m(n) {
        return h(v(n))
    }
    function p(n) {
        return g(m(n))
    }
    function s(n, t) {
        return l(v(n), v(t))
    }
    function C(n, t) {
        return g(s(n, t))
    }
    function A(n, t, r) {
        return t ? r ? s(t, n) : C(t, n) : r ? m(n) : p(n)
    }
    "function" == typeof define && define.amd ? define(function() {
        return A
    }) : "object" == typeof module && module.exports ? module.exports = A : n.md5 = A
}(this);

在布局文件中引用gittalk.html时一般都会用到下面这句,具体的视你的文件结构而定。

{% include gitalk.html %} 

如果照着网上大多数教程,可能会有个“ Error:Validation Failed ”bug,而解决该bug的方法就是上述内容,所以本文直接用了这个方法。


2019.8.4 –updated

本博客经历了GitTalk数天又换回了valine,去除了评论框下方powered by valine,在valine.html的new列表下加入以下代码:

    new···
//增加以下六行代码去除 power by valine
    var infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
      infoEle.childNodes.forEach(function(item) {
        item.parentNode.removeChild(item);
      });
    }

新添评论框罗小黑背景,在/_sass/persephone/_comments.scss中加入以下代码:

#veditor {
    background-image: url(https://罗小黑-comment-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: rgba(255,255,255,0);
    resize: vertical;
}

更换了更为强大的valine-admin,详情请参考以下链接:

valine官方文档

valine-admin配置手册

评论框样式也更换了该作者的valine.min.js,的确更酷炫了,可惜的是小黑不能用了。