Gitalk配置教程

2022/10/11 教程 踩坑

配置背景

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

配置OAuth

打开 github.com/settings/applications/new

    Application name //应用名称
    Homepage URL //可以填自己的博客地址
    Application description //应用描述
    Authorization callback URL //填自己要使用Gitalk的博客地址

点击Register application后会得到Client ID和Client Secret，将其保留备用。

创建评论仓库

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

启用Gitalk

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

    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)。

改完后的代码如下：

    <% 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