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>

大功告成!

gitalk
Jerry

Jerry

大道至简,行者无疆。

Leave a Reply

Optimized by WPJAM Basic