hexo 接入 github issue 评论

原文转自博客：https://mser.xyz/2019/08/06/git_comment/

更新，评论系统切换为 gitalk

gitment 登录 alert 报错 [object ProgressEvent]，打开 network 这个 gh-oauth.imsun.net 请求失败，https://imsun.github.io/gitment/dist/gitment.browser.js 内向网址 https://gh-oauth.imsun.net 发送了验证请求，这个gh-oauth.imsun.net是作者自行搭建的，现在不在维护了，所以出现了问题

看了 gitment 的 issue 很多人都反应有问题，官方的 demo 也不能用

所以现在切换为 gitalk，方法差不多，只需要改下类名就好

#comment
    #gitalk-container(data-gitalk=JSON.stringify(theme.Gitalk) data-date=page.date)
    link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css")
    script(src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js")
    script.
        function commentinit() {
            setTimeout(()=>{
                if (this.Gitalk) {
                    let string = JSON.parse(document.getElementById('gitalk-container').dataset.gitalk)
                    var gitalk = new Gitalk({
                        clientID: string.client_id,
                        clientSecret: string.client_secret,
                        repo: string.repo,
                        owner: string.owner,
                        admin: string.admin,
                        id: document.getElementById('gitalk-container').dataset.date,
                        distractionFreeMode: string.distractionFreeMode
                    })
                    gitalk.render('gitalk-container')
                } else commentinit()
            },200)
        }
        commentinit()

配 置

1.去新建 OAuth App 完成注册
2.在主题配置文件 _config.yaml 中添加

gitment:
  enable: true
  id: ''
  owner: Tong-H # 你的 github 用户名，可以不用太在意大小写
  repo: Tong-H.github.io #存储评论的 repo
  client_id: 5658f62c9837c979f96f #新建 OAuth App 时的 Client ID
  client_secret: 36813d127f4f0918cd30231a403e09d81015e014 #新建 OAuth App 时的 Client secret

3.新建一个 comment 组件，看了一些博客，大部分都是用的 ejs，我用的是 Pug，这个区别不大
*注意，网上有很多文章这段代码都是不可用的，会出现初始化不了的情况，这里贴出的是可用的
*引入两个文件，一个 css 和 一个 js
*使用 dataset 将 hexo 的变量传递给页面
*新建 gitment 对象的时候要注意使用 setTimeout 轮询查看 gitment 是否存在文件加载是否完成

block prepend cssFile
    link(rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css")

#comment
    // 使用 data
    #gitment_container(data-gitment=JSON.stringify(theme.gitment) data-title=page.title)
    script(src="https://imsun.github.io/gitment/dist/gitment.browser.js")
    script.
        function commentinit() {
            setTimeout(()=>{
                if (this.Gitment) {
                    let string = JSON.parse(document.getElementById('gitment_container').dataset.gitment)
                    var gitment = new Gitment({
                        id: document.getElementById('gitment_container').dataset.title,
                        owner: string.owner,
                        repo: string.repo,
                        oauth: {
                            client_id: string.client_id,
                            client_secret: string.client_secret,
                        },
                    })
                    gitment.render('gitment_container')
                } else commentinit()
            },200)
        }
        commentinit()

Comments Not Initialized

需要你先登录下初始化，不要在本地 localhost 登录，因为localhost：4000 和你注册时填写的 Authorization Callback URL 的域名不同，点击登录会跳转到 你的 Authorization Callback URL 页面

当然你也可以再去新建一个 OAuth Application 填 http://localhost:4000/ 也可以

每新建一个文章都需要去初始化，相当于重新开一个 issue

初始化时在评论框点击登录，但是没有跳到授权页面

查看页面 login 按钮的 a 标签的 href 是这样的

Login

其中 redirect_uri 是当前页面的 url，url 的域名和你注册时填写的 Authorization Callback URL 的域名一定要一致，我检查才发现我填的时 http://tong-h.github.io, 但实际请求的却是https

参考文章

添加Gitment评论系统踩过的坑 http://xichen.pub/2018/01/31/2018-01-31-gitment/
Hexo博客框架下Gitment取代多说评论 https://zonghongyan.github.io/2017/06/29/201706292034/