整理部署 Gitalk 出现的坑

适用于

Hexo-Material

坑

登录报错返回 URL：/?error=redirect_uri_mismatch&...
初始化留言板的时候 Validation Failed(422)

原因

Github OAuth Apps或本地未配置好导致没能正确访问Github Repo
title字段太长导致返回 URL 超过长度限制

Solution

1. 链接Repo

先确认是否出现初始化 issues 提示，如没有，将OAuth Apps里的两个 URL 填入博客的主页地址

再从主题 config 找到 gitalk 照如下形式填入配置

1
2


gitalk_repo: hexo-blog   #Repo名称
gitalk_owner: iyume      #Owner名称

然后会出现只有 Hello World 文章可以正常加载 Gitalk 初始化并评论，中文标题文章无法初始化 Gitalk，再参照下面的方法

2. 用MD5加密ID

地址：https://github.com/blueimp/JavaScript-MD5

定位到 themes/material/layout/_widget/comment/gitalk/main.ejs

导入MD5方法

1

<script src="https://cdn.jsdelivr.net/gh/iyume/static/hexo-blog/md5.min.js"></script>

然后在 gitalk 的实例化里修改 id 为

1

id: md5(location.pathname)

最终配置如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iyume/static/hexo-blog/gitalk.css">

<script src="https://cdn.jsdelivr.net/gh/iyume/static/hexo-blog/gitalk.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/iyume/static/hexo-blog/md5.min.js"></script>

<script>
    var gitalk = new Gitalk({
            clientID: '<%= theme.comment.gitalk_client_id %>',
            clientSecret: '<%= theme.comment.gitalk_client_secret %>',
            repo: '<%= theme.comment.gitalk_repo %>',
            owner: '<%= theme.comment.gitalk_owner %>',
            admin: ['<%= theme.comment.gitalk_owner %>'],
            id: md5(location.pathname),
            // facebook-like distraction free mode
            distractionFreeMode: false
        })
   gitalk.render('gitalk-container')
</script>

巨坑（圈重点）

文章名不要带中文符号！！！ 否则回调url会将中文符号转换成英文导致报错！！！

由于没有在网上看到类似的情况，当时用了半天才偶然发现回调 url 被诡异地改为英文符号。

issue: https://github.com/gitalk/gitalk/issues/162

Github Manual: https://developer.github.com/apps/managing-oauth-apps/troubleshooting-authorization-request-errors/#redirect-uri-mismatch

参考: https://www.izhongxia.com/posts/41249.html