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 是这样的

<a class="gitment-editor-login-link" href="https://github.com/login/oauth/authorize?scope=public_repo&amp;redirect_uri=https%3A%2F%2Ftong-h.github.io%2F2019%2F08%2F05%2Fhexo_theme%2F&amp;client_id=5658f62c9837c979f96f&amp;client_secret=36813d127f4f0918cd30231a403e09d81015e014">Login</a>

其中 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/

推荐阅读更多精彩内容