hexo-sakura添加gitalk评论

前言

背景

之前一直用的valine评论系统,也魔改了很多,but最近有通过appid和appkey恶意刷评论的脚本,不知道我的小小站得罪了哪位“dalao”,总之,valine不能用了,也有人推荐了好几个评论系统,一直懒于动刀,今天算是不太忙(工作摸鱼),也是无意间看到gitalk,算是眼缘吧,安装试试。

在这里插入图片描述

正文

前提:你有github账号、hexo博客,没有的话度娘创建。

1.注册应用

在github上,这个地址注册一个评论的应用:Register a new OAuth application
注意细节:
1.homepage URL是github的仓库,callback URL是你的博客地址
2.URL是https加密的,而且callback地址末尾要加上/
在这里插入图片描述

注册成功后会拥有用户编号ClientID和应用秘钥ClientSecret:

在这里插入图片描述
在homepage URL的仓库,gitalk每次评论会自动在新建issue标签用于存放后面的评论地方,然后显示评论内容在你的博客,类似于在github评论原理:

在这里插入图片描述

2.博客配置

我这里是hexo-sakura,可以参考,我的sakura当然也是被我魔改过一下,如果路径不一样,权当参考。

  1. 在主题配置文件添加:themes\sakura\_config.yml
    标签和issue之前命名相同,repo填写仓库名,

    因为博客加载评论访问时地址为:https://api.github.com/repos/cungudafa/cungudafa.github.io/issues/3
    可以看出这是调用的github仓库->github名称->仓库名->issues->数据
    这就是gitalk的应用原理,还是蛮ok的!

    gitalk:
      enable: true
      clientID:    #GitHub Application Client ID
      clientSecret:  #GitHub Application Client Secret
      repo:   #博客的仓库名称(注意不是地址)
      owner:  #github用户名
      admin: 
      labels: 'gitalk' #github issue 对应的issue标签(新建一个)
      distractionFreeMode: true #无干扰模式,不需要更改
    

    在这里插入图片描述

  2. 新建themes\sakura\source\js\md5.min.js,这是将后面url地址压缩加密,防止github跳转时路径过长出错

    ! 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);
    //# sourceMappingURL=md5.min.js.map
    
  3. 新建评论初始化文件,themes\sakura\layout\_partial\gitalk.ejs

    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <div id="gitalk-container" class="comment"></div> 
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script src="/js/md5.min.js"></script>
    <script type="text/javascript">
    	var gitalk = new Gitalk({
      	clientID: '<%= theme.gitalk.clientID %>',
      	clientSecret: '<%= theme.gitalk.clientSecret %>',
      	repo: '<%= theme.gitalk.repo %>',
      	owner: '<%= theme.gitalk.owner %>',
    	admin: ['<%= theme.gitalk.admin %>'],
    	distractionFreeMode: '<%= theme.gitalk.distractionFreeMode %>',
        id: md5(location.pathname)
    })
    gitalk.render('gitalk-container') 
    </script>
    
    

    class="comment"是适配sakura主题加入的

  4. 修改评论引用,因为不同的主题不一样,有的主题内置了gitalk,但是sakura没有,所以以下修改的位置可能不同,就是在评论加上gitalk初始化文件就好:

    初始化文件位置:themes\sakura\layout_partial\gitalk.ejs

    • 文章末尾加入评论(先删除valine或其他评论),在 themes\sakura\layout\_widget\common-article.ejs末尾加上:

      <% if (theme.gitalk.enable){  %>
        <%- partial('_partial/gitalk') %>
      <% } %>
      
    • 公共页面加入评论(留言页面,友链,等等)

      <%- partial('_partial/gitalk') %>
      

gitalk配置出错参考

1.未找到相关的Issues评论(登陆一下就好,配置者的github账号登录才能初始化哦)

在这里插入图片描述
2.登录跳转出错,我当时是因为本地测试跳转不对,注意callback URL为https的,同时末尾有/;

在这里插入图片描述
发布后,域名跳转登录就没有问题,可以成功登录(应用名是之前设置的,授权就可以):
在这里插入图片描述
3.Gitalk报错Error: Not Found,这是地址URL填错了,注意在github有两个URL,在hexo代码里config有一个URL,一共三个路径,再讲解一下:

在这里插入图片描述

在这里插入图片描述
三个地址:
Homepage URL: 放Issue的github仓库地址(必须填写https,同时在仓库下新建Issue)
Authorization callback URL: 域名地址,博客的地址(必须是https,结尾加上/)
repo: github存放issue的仓库名(不用填https)
在这里插入图片描述
在这里插入图片描述
如果参考完还不能解决,建议重头再配置一遍,如果还是不成功,请百度其他教程!

后序是否对gitalk做一些优化(diy样式或者增加免登陆留言,看后续,说不定就安排上了)

©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页