【网站搭建】Docsify+Gittalk的配置过程记录分享。原创！

Gittalk 配置

这个不一定最先配置，我也不建议你最先配置这个，这个最好最后配置。

我把这个的配置写在第一条，是因为我在这折腾了很久，就是因为网上抄来抄去的答案，除了迷惑我难以给我提供帮助。

摆脱，缺斤少两的答案为什么抄来抄去？我也不喜欢别人转载我的文章，如果我日后那天发现了Bug更新了，转载我文章的人肯定不会跟着更新……然后……

我的配置经验是根据自己情况写的，受时间(不同时间来配置，也许使用版本不同)等复杂因素，不一定适合每个人，所以再看本文时，最重要的是关注问题的分析思路。

第一个是引入的问题。

官方用的公共CDN有时候会被墙，导致访问失败，所以我更换了为了如下：

<!-- 评论-->
<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
    <script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
    <script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>

然后就是配置问题

不着急啊，咱们一个一个来看

首先是要填写的配置项

const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',      // The repository of store comments,
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

这个里面的配置项，怎么填，网上一大把，你就搜docsify配置gittalk，文章开始全都是教你配置的，所以，自己去百度。下图是[网上随便搜的一篇配置教程](Gitalk 与 docsify 的结合 - 知乎 (zhihu.com))

我的填写如下：

var gitalk = new Gitalk({
    clientID: '申请到的ID',
    clientSecret: '申请到的密钥',
    repo: '仓库名称(存放评论的仓库名称)',
    owner: 'Github用户名',
    admin: ['Github用户名，必须要用这个用户来初始化评论的。'],
    id: location.pathname,
    // facebook-like distraction free mode
    distractionFreeMode: false,
})

这个配置可能存在全部页面的评论都相同的情况，后面再解决。

基本网上的配置教程就这样了，然后就去讲启用过程的问题了。

摆脱，认真看看代码

var gitalk = ……

设置了变量，又不用，那不是闲的吗。看官方文档

还差个绑定页面元素初始化成评论区对吧。

这时候问题来了。我docsify在index.html的那个地方写<div id="gitalk-container"></div>

上图被我注释掉的就是我之前写的位置。这不成啊，显示有很大的问题。

于是我查审元素，定位到了文章区域，是不是应该插入到文章末尾？

页面上的元素都是加载出来的，你最开始没有，index.html里面没有这些元素对吧

你上哪添加去？

于是我就想到了用js添加元素

<script>
    window.onload = function () {
        var gitalk = new Gitalk({
            clientID: 'id',
            clientSecret: '密钥',
            repo: 'note',
            owner: 'mllt992',
            admin: ['mllt992'],
            id: location.pathname,
            // facebook-like distraction free mode
            distractionFreeMode: false,
        })
        var ele = document.getElementsByClassName('toc-nav')[0]
        var newele = document.createElement('div')
        newele.id="gitalk-container"
        ele.parentNode.insertBefore(newele, undefined)
        gitalk.render("gitalk-container")
    }
</script>

我简单跟你说一下这个js的写法，你不会没关系，理解我说的就行。