將 Ghost 加入 Gitalk 評論功能

Gitalk是一個基於 Github Issue 和 Preact 開發的評論套件，但是 Ghost 官方支援套件並沒有支援該評論系統，但是套用起來沒有想像中這麼麻煩。

教學

你先要有一個 Github 帳號，沒有就快去辦一個吧。

並且建立一個 Public 的 repo

再來需要新建一個 Github application 授權(https://github.com/settings/applications/new)

到 Ghost 後台 -> Code injection 中。

在 Site Header 填入：

<!-- gitalk -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.6.2/gitalk.min.css">

在 Site Footer 填入：

<!-- gitalk -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.6.2/gitalk.min.js"></script>
<script type="text/javascript">
    var gitalkDiv = document.createElement("div");
    gitalkDiv.setAttribute("id", "gitalk-container");
    // 這個 `.post-comments` 請按照自己套用的 ghost-theme 修改
    document.querySelector('.post-comments').appendChild(gitalkDiv)
    
    var gitalk = new Gitalk({
      clientID: 'GitHub Application Client ID',
      clientSecret: 'GitHub Application Client Secret',
      repo: 'GitHub repo name',
      owner: '自己的 Github user name',
      admin: ['自己的 Github user name'],
      // Ensure uniqueness and length less than 50
      id: location.pathname,
      // Facebook-like distraction free mode
      distractionFreeMode: false
    })
    
    gitalk.render('gitalk-container')
</script>

Troubleshooting

Gitalk Error: Validation Failed. 442

主要是 Github 的更新有 Issue 字數限制，利用 `location.pathname` 的方式建立 issue tag 很容易超過 50 字的上限。

因此可以使用 md5 將網址 hash 過就能縮短字數。

<!-- gitalk -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.6.2/gitalk.min.js"></script>
<!-- md5.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.13.0/js/md5.min.js"></script>

<script type="text/javascript">
    var gitalkDiv = document.createElement("div");
    gitalkDiv.setAttribute("id", "gitalk-container");
    // 這個 `.post-comments` 請按照自己套用的 ghost-theme 修改
    document.querySelector('.post-comments').appendChild(gitalkDiv)
    
    var gitalk = new Gitalk({
      clientID: 'GitHub Application Client ID',
      clientSecret: 'GitHub Application Client Secret',
      repo: 'GitHub repo name',
      owner: '自己的 Github user name',
      admin: ['自己的 Github user name'],
      // Ensure uniqueness and length less than 50
      id: md5(location.pathname),
      // Facebook-like distraction free mode
      distractionFreeMode: false
    })
    
    gitalk.render('gitalk-container')
</script>

這樣就大功告成啦

相關資料

• Gitalk (https://gitalk.github.io/)
• Gitalk Error: Validation Failed. 442 報錯解決方法(https://calpa.me/2018/03/10/gitalk-error-validation-failed-442-solution/)