几行代码让你家Ghost支持Gitalk评论系统

Code 代码

/ ghost

• 2020年2月5日

Ghost官方没有宣称支持Gitalk评论系统，而实际上集成非常简单，只需要以下几行代码。

不了解Gitalk的可以看看：Gitalk demo & Gitalk github

准备工作：

github帐户，没有可创建；
github repository，用于保存评论（issues），没有可创建；
github application授权，没有可创建。

进到Ghost后台 > Settings > Code injection，在Site Header增加以下代码，懂基本HTML和CSS的都应该可以看懂。

<!-- gitalk -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

再到Site Footer，增加以下代码：

<!-- gitalk -->
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script type="text/javascript">
    var gitalkDiv = document.createElement("div");
    gitalkDiv.setAttribute("id", "gitalk-container");
    document.querySelector('.l-post-content').appendChild(gitalkDiv)
    
    var gitalk = new Gitalk({
      clientID: 'GitHub Application Client ID',
      clientSecret: 'GitHub Application Client Secret',
      repo: 'GitHub repo名称，如：hello-world.github.io',
      owner: '自己Github用户名',
      admin: ['自己Github用户名'],
      id: location.pathname,      // Ensure uniqueness and length less than 50
      distractionFreeMode: false  // Facebook-like distraction free mode
    })
    
    gitalk.render('gitalk-container')
</script>

大功告成！