几行代码让你家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>

大功告成!

gitalk

标签

Jerry

大道至简,行者无疆。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.