Ghost添加 gittalk 评论插件
Ghost blog 配置使用 gittalk 评论插件。

Update @20191023
背景
博客运行有一段时间了,但是一直没有添加评论功能,也不知道大家看了有没有帮助,还有没有人跟我反馈问题,因此需要上线这一功能。
对比了诸多插件,发现 gittalk 最简单,最美观,也最好配置。
gittalk 是一个将 github issue 拿来当评论的插件。
要使用它,需要在 github 创建一个 OAuth Application,并将认证信息填写到 gittalk 相应的位置。
-
申请 OAuth Apps
访问 https://github.com/settings/developers , 点击New OAuth App
创建一个认证应用,参考如下方式填写:
创建成功后会生成一个
Client ID
和Client Secret
,这两个值会用到 gittalk 中;
安装 gittalk
-
安装 gittalk
gittalk 安装简单,先在博客中引用它的 css 样式和 js 文件:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.min.js"></script> <!-- or --> <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"> <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
然后创建一个对应的容器来显示评论区域:
<div id="gitalk-container"></div> var gitalk = new Gitalk({ clientID: 'GitHub Application Client ID', clientSecret: 'GitHub Application Client Secret', repo: 'GitHub repo', owner: 'GitHub repo owner', admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'], id: location.pathname, // Ensure uniqueness and length less than 50 distractionFreeMode: false // Facebook-like distraction free mode }) gitalk.render('gitalk-container')
但是实际安装过程中遇到问题,我将上面两部分分别添加至 Ghost Admin 后台 settings -> code-injection 中的 Site Header 和 Site Footer 中,发现 gittalk 展示在了最底部,横宽竖窄,非常丑陋。
于是又找到了另外的方法,直接修改 ghost 主题并覆盖上传。
新的方案:
在 Ghos 后台下载 当前主题,解压文件,编辑post.hbs
文件,找到注释<section class="post-full-comments">
,添加如下部分:{{!-- <section class="post-full-comments"> If you want to embed comments, this is a good place to do it! </section> --}} <section class="post-full-comments"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.min.js"></script> <div id="gitalk-container"></div> <script> var gitalk = new Gitalk({ clientID: 'OAuth App Client ID', clientSecret: 'OAuth App Client Secret', repo: 'itsfun.github.io', owner: 'ykfq', admin: ['ykfq'], //owner或具有创建 issue 权限的用户 id: '{{comment_id}}', distractionFreeMode: false // Facebook-like distraction free mode }); gitalk.render('gitalk-container'); </script> </section>
保存文件,将压缩包另存一个名字(否则提示不能覆盖默认的主题),重新上传覆盖即可,效果如下:
非常完美!