Ghost

Ghost添加 gittalk 评论插件

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

nozuonohigh

Oct 23, 2019 • 3 min read

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>

保存文件，将压缩包另存一个名字（否则提示不能覆盖默认的主题），重新上传覆盖即可，效果如下：

非常完美！

Ghost添加 gittalk 评论插件

nozuonohigh

背景

安装 gittalk

参考文档：

Sign up for more like this.