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

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/)