Ghost添加 gittalk 评论插件

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

Ghost添加 gittalk 评论插件

Update @20191023

背景

博客运行有一段时间了,但是一直没有添加评论功能,也不知道大家看了有没有帮助,还有没有人跟我反馈问题,因此需要上线这一功能。

对比了诸多插件,发现 gittalk 最简单,最美观,也最好配置。

gittalk 是一个将 github issue 拿来当评论的插件。

要使用它,需要在 github 创建一个 OAuth Application,并将认证信息填写到 gittalk 相应的位置。

  • 申请 OAuth Apps
    访问 https://github.com/settings/developers , 点击 New OAuth App 创建一个认证应用,参考如下方式填写:

    创建成功后会生成一个 Client IDClient 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>
    

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

    非常完美!

参考文档: