我的github的个人博客集成的是gitalk评论系统,它也是基于git的issues功能实现的。

但是近日gitalk 出现了NETWORK ERROR等问题导致评论系统时不时加载不出来完全影响使用。

通过浏览器的F12看控制台,发现请求这个请求有问题https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token

其实这个就是github获取accesstoken的代理链接,https://cors-anywhere.azm.workers.dev,这个服务器地址在国内可能由于防火墙等原因导致访问不了。

方式1

如果你非要使用gitalk可能的一种保险的方式是自己搭建一个代理服务器。然后:

gitalk 添加代理

    const gitalk = new Gitalk({
      proxy: 'https://你的代理服务器地址' 
    })

另一种方式2

利用nodejs添加本地代理

const http =  require("http")
const request = require('request')

const client_id = "xxxx"
const client_secret = "xxxx"
const proxy_url = "https://github.com/login/oauth/access_token"


http.createServer(function (req, res) {
    const {method ,headers} = req;
    if(method === 'POST') {
        if(req.url == '/get_accesstoken') {
            let msg = '';
            req.on('data', (data)=>{
                msg += data
            })
            req.on('end', ()=> {
                let obj = JSON.parse(msg);
                if(obj.client_id != client_id) {
                    res.write("404");
                    res.end();
                    return;
                }
                request.post(proxy_url, {
                    headers: {
                        'content-type': 'application/json;charset=UTF-8',
                        'accept': 'application/json'
                    },
                    form: {
                        'client_id': client_id,
                        'client_secret': client_secret,
                        'code': obj.code,
                    },
                }, (err, grsp, gbody)=>{
                    res.write(gbody)
                    res.end()
                })
            })

        }
    }else{
        res.write('404 not Found')
        res.end()
    }
}).listen(9099);

监听本地端口9099,当向服务器请求get_accesstoken时,server转发请求到9099端口,即可请求github accesstoken.从而也实现绕过gitalk的token服务器。

但是上述这两种方式总是让我们不爽,其实gitalk 不只是有上面的问题,还有类似一些ERROR:NOT FOUND 等问题。

所以我就研究了下是否有可以替代gitalk的插件。

可以换成utterances替代gitalk

当我看到utterances评论插件的时候,我以为会很麻烦,没想过会如此的简单。

utterances同样是一款基于 GitHub issues 的评论工具(只有issues才能让用户不用鉴权的方式就能write内容)。但是它明显更优秀:极其轻量、加载非常快、配置仅需几步。

安装 utterances

点击右上角个人账号—》settings—》左边栏到 integrations-》applications—》首先找到安装这个utterances App ,

配置关联评论库

选择要关联评论的仓库。可以选择所有仓库,也可以只选择一个仓库。选择一个仓库比较安全。 这里重点看Repository access 的配置即可

Repository access
  All repositories
  This applies to all current and future repositories owned by the resource owner.
  
  Also includes public repositories (read-only).
  
  Only select repositories
  Select at least one repository.
  
  Also includes public repositories (read-only).
  
  Selected 1 repository.
    chaoxiyan1225/chaoxiyan1225.github.io //这里只选择一个你自己库

这里已经安装好了,是不是非常简单,下面就看怎么集成到文章里面了.

集成utterances

非常简单,在需要评论的地方加如下的代码即可

<script src="https://utteranc.es/client.js"
        repo="user-name/你的repo库" //(即你上一步设置的那个库)
        issue-term="pathname"
        theme="github-light"  
        crossorigin="anonymous"
        async>
</script>

还可以对utterances 配置主题

github-light github-dark github-dark-orange icy-dark dark-blue photon-dark 评论 issue-term 映射配置选项如下:

pathname url title og:title issue-number specific-term 其他功能可以参考https://utteranc.es/(官方文档)。 但是上面的功能已经能让你正常使用起来没必要搞那么复杂的配置,而且每次加载比gitalk快很多,参考本篇文章底下的评论功能即可。

————————-全文完——————————————————

如果你觉得受益欢迎赏杯咖啡,赞助点能量!感谢!