Gitalk配置教程

2022/10/11 教程 踩坑

配置背景

我是用的 hexo 引擎，主题为 Hexo-Theme-ParticleX ，以下的配置皆是在此环境之下。

配置OAuth

打开 github.com/settings/applications/new 

1
2
3
4
Application name //应用名称
Homepage URL //可以填自己的博客地址
Application description //应用描述
Authorization callback URL //填自己要使用Gitalk的博客地址
点击Register application后会得到Client ID和Client Secret，将其保留备用。

创建评论仓库

在Github中新建一个public仓库用于存放评论，可以不新建就用博客的也行，记住仓库名称。

启用Gitalk

在 themes\particlex\_config.yml 文件中启用gitalk. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gitalk:
    enable: true
    clientID: # Default ClientID 填入上面得到的Client ID
    clientSecret: # Default ClientSecret 填入上面得到的Client Secret
    repo: # The name of repository of store comments 填入评论仓库名称
    owner: # GitHub repo owner 填入自己的用户名
    admin: # GitHub repo owner and collaborators, only these guys can initialize github issues 管理员名单，填入自己的用户名
    language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available.
    proxy: # CORS proxy
    sites: # Sites
        []
        # Example:
        # <www.example.com>:
        #    clientID: <client-id>
        #    clientSecret: <client-secret>

这个时候一般就可以使用了，但是有一些博客页面会由于url过长导致Gitalk出现错误， 详见https://github.com/gitalk/gitalk/issues/102，可以用MD5转码解决这个问题，不过之前的评论会隐藏。

以下为我的解决方案：

在\themes\particlex\layout\script.ejs文件中引用MD5转码方案https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js， 具体操作为在文件开头第一个if下加入<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>， 然后把紧接着的gitalk部分的id改为md5(window.location.pathname)。

改完后的代码如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<% if (theme.gitalk.enable && is_post()) { %>
<script src="https://cdn.staticfile.org/gitalk/1.7.2/gitalk.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
<script>
    var clientID = "<%- theme.gitalk.clientID %>", clientSecret = "<%- theme.gitalk.clientSecret %>";
    <% Object.keys(theme.gitalk.sites).forEach(function(key) { %>
        if (window.location.host == "<%- key %>") {
            clientID = "<%- theme.gitalk.sites[key].clientID %>";
            clientSecret = "<%- theme.gitalk.sites[key].clientSecret %>";
        }
    <% }); %>
    const gitalk = new Gitalk({
        clientID: clientID,
        clientSecret: clientSecret,
        repo: "<%- theme.gitalk.repo %>",
        owner: "<%- theme.gitalk.owner %>",
        admin: ["<%- theme.gitalk.admin %>"],
        language: "<%- theme.gitalk.language %>",
        id: md5(window.location.pathname),
        distractionFreeMode: false,
        <% if (theme.gitalk.proxy) { %>
            proxy: "<%- theme.gitalk.proxy %>"
        <% } %>
    })
    gitalk.render("gitalk-container")
</script>

这个时候就可以正常使用了。
img_show