190621-Gitalk配置与排坑全程实战
by 一灰灰

2019-06-21

Shell / 环境搭建

7 分钟读完 (大约 989 个字) 0次访问

190621-Gitalk配置与排坑全程实战

文章目录

I. Gitalk安装说明
II. 问题及解决方式
1. 1. 404 not found
2. 2. Validation Failed(422)
II. 其他

基于gittalk搭建个人站点的评论的完整记录，特别是遇到的一些鬼畜的问题，如Error not found, 404问题，Validation Failed(422)校验失败问题等，为大家避免采坑提供一些参考

I. Gitalk安装说明

gitalk的使用比较简单，直接在你的html中，加入依赖，添加配置即可

1. 添加引用

<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
 
<script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>

2. 添加配置

<script>
  const gitalk = new Gitalk({
    clientID: '...',
    clientSecret: '...',
    repo: 'quick-media',
    owner: 'liuyueyi',
    admin: ['liuyueyi'],
    distractionFreeMode: false
  })
</script>

注意上面的clientId, clientSecret需要到你自己的github上记性申请

进入申请链接: https://github.com/settings/developers
创建新的app
添加必要的配置(如下图，注意两个url，填写你的项目地址即可，后面回调的地址，如果有自己的域名，用自己的域名）

项目issues开启

因为评论是基于issues进行的，所以项目的issues需要打开

进入项目的setting目录，如: https://github.com/liuyueyi/quick-media/settings
开启issues特性

3. 测试验证

如果配置没什么问题，就可以部署上线进行测试了；因为登录回调的地址问题，在本地进行测试时，可能无法正常登录，也没有啥好办法

下面这个是个人的测试链接: https://liuyueyi.github.io/quick-media/#/

II. 问题及解决方式

1. 404 not found

配置完毕之后，如下提示404

打开chrome控制台查看，发现repo仓库地址提示404

正常来讲，仓库地址url应该是： https://api.github.com/repos/liuyueyi/quick-media/issues

出现问题的主要原因就是我们的配置参数不对，主要是 repo 这个属性，

这个值填项目名，不要填完整的仓库地址

const gitalk = new Gitalk({
  // ...
  repo: 'quick-media',
  // ...
})

2. Validation Failed(422)

https://github.com/gitalk/gitalk/issues/102

前面一个问题解决之后，发现提示422，主要原因是url编码之后添加到issues的label中，超过字符长度的限制，因此一个通用的推荐方案就是采用md5进行处理

网上找一个md5的开源js包，如: https://github.com/blueimp/JavaScript-MD5；或者直接使用我找的一个md5文件: https://liuyueyi.github.io/quick-media/_assert/md5.min.js

直接使用url/path来生成md5字符串

const gitalk = new Gitalk({
    // ...
    id: md5(location.href)
  })

但是上面这里有个问题，url带参数时，会创建一个新的issues，这就有点蛋疼了，内部改造一下，针对我自己的项目: https://liuyueyi.github.io/quick-media/，我希望用域名 + path + #xx 来生成md5

针对我自己的应用场景，做了一个简单的取舍，我的url访问格式为 https://liuyueyi.github.io/quick-media/#/其他/其他?id=_4-捐赠

上面的url，我只希望有 /#/其他/其他 就行

function url_parse(url) {
    var left = url.indexOf('/#/');
    if(left < 0) {
      return url;
    }

    var right = url.lastIndexOf('?');
    if (right <= 0 || right < left) {
      right = url.length;
    }
    return url.substring(left, right);
}

gittalk_id = url_parse(location.href);
if(gittalk_id.length > 45) {
  gittalk_id = md5(gittalk_id);
}

II. 其他

1. 一灰灰Blog： https://liuyueyi.github.io/hexblog

一灰灰的个人博客，记录所有学习和工作中的博文，欢迎大家前去逛逛

2. 声明

尽信书则不如，已上内容，纯属一家之言，因个人能力有限，难免有疏漏和错误之处，如发现bug或者有更好的建议，欢迎批评指正，不吝感激

微博地址: 小灰灰Blog
QQ：一灰灰/3302797840

3. 扫描关注

一灰灰blog

QrCode

知识星球

goals

# gitalk

支付宝

微信

一灰灰Blog

Java,Python,DBA, 主旨服务器，兼职全栈

Wuhan, China

文章

523

分类

101

标签

122

关注我