FireFour's Studio.

从disqus到gitment-引入评论系统的爬坑之路

2018/05/15 Share

这几天一时兴起把快要遗忘的博客捡起来装修装修,然后想到要给博客的文章加个评论系统。调研了一下当下流行的评论系统发现我在用的这个hexo主题已经支持了畅言友言disqusgitment四个评论系统的集成配置,只需要简单填写一下ymal里面的相关配置信息就可以启用,非常方便。看了一下disqus,嗯,国外优秀产品,官网UI很有逼格,看起来应该是高大上的,那就决定是它了~

disqus从使用到放弃

disqus的注册相对比较简单,在选择用途的时候选择在自己的网站上使用disqus就可以,之后就是按照instruction一步一步走就可以了。配置完成后,把注册用户名填入我的主题目录下面的yaml配置文件里,然后hexo clean, hexo generate, hexo s打开本机端口预览,一气呵成,直接起飞~打开任意一篇博文后拉到最下面,评论框映入眼帘,舒服!

然后,想看看评论框对移动设备的自适应情况,打开手机safari登上我的博文拉到最底部,刷了半天,什…么…都…没…有!我在想是不是浏览器不兼容,然后尝试了在PC机上的edge和IE11,发现也都不能显示评论框。。。初步定为是disqus浏览器兼容性有问题,就搁置了几天。

过几天准备再找解决方案的时候想了一下,disqus这么大的国外受众不应该不支持这些主流浏览器啊,于是仔细想了一下,感觉有没有可能是你懂的的原因在国内无法访问,但是我在chrome里面访问我的博客switchyOmega的规则显示是直接访问没走代理啊。为了验证,我在手机上打开了代理,发现评论框竟然可以正常显示了,果然还是被墙了,所以表现出来是只有我PC机上的chrome可以正常访问,原因是chrome加载disqus的时候走的外链通过switchyOmega的过滤规则定向到了代理节点,然后主页面的其他DOM是直接加载得到。

好吧,折腾了半天,想了想,还是决定放弃disqus,换用一个国内外都兼容的评论系统。

gitment一探究竟

对比了一下其他竞品,多说关闭了,其他的几个评论系统国外访问不友好(虽然我的小博估计也没什么国外流量哈哈),但是突然发现了gitment这个神器,竟然是一个国内大佬以github issues为基础改的,感觉耳目一新,而且,虽然是只能用github账号登录评论,但是考虑到博客的受众,问题应该不大。于是,就开始用gitment替代disqus

初步搭建

具体的步骤这里就不做赘述了,把gitment作者的博客贴上来直接操作就可以。

  • 注册 OAuth Application
  • 引入 Gitment
    id: '页面 ID', // 可选。默认为 location.href
    owner: '你的 GitHub ID',
    repo: '存储评论的 repo',
    oauth: {
        client_id: '你的 client ID',
        client_secret: '你的 client secret',
    },
    
    原文中提到的四个配置项填好就可以,注意owner是github的昵称,repo是仓库名不是仓库的.git地址。剩下的两项填注册OAuth Application后生成的就可以。
  • 初始化评论

踩坑

实际部署的时候遇到了两个问题。

  • 部署后评论框上方出现Error: Not Fount

    这个问题主要原因是默认的id采用了文章标题,所以会过长导致对应的github issuetag过长(每篇文章的评论对应一个issue, issue有两个tag,一个是"gitment",另一个就是之前配置项中缺省不填的id)。解决方案也很简单,把之前四个配置项中默认注释掉的id: '页面 ID', // 可选。默认为 location.href解注,改为page.date,用日期作为id可以解决长度问题,修改后就不会报错了。

  • 点击Login登录github账号后重定向错误问题
    这个问题很可能都会遇到,如果没遇到可能是因为你无意识地避开了这个问题。用hexo new一个新文章的时候,hexo会把这篇文章的文件名作为该篇博文的url。文件名是不支持\ / : * ? " < > |等符号的,但是却可以支持中文标点符号。如果你在文件名中使用了中文标点,那么恭喜你,这个问题就出现了。url中包含中文标点没问题,浏览器也可以正常访问,但是gitment生成的重定向url会把中文标点自动改为英文标点保存在对应issue的第一条评论(这里的地址会作为重定向的地址),因此重定向以后地址不匹配从而报404错误,或者会跳回你在OAuth中填写的callback url,也就是博客首页。所以还是在hexo new文件名的时候避免使用中文标点为好,要想修正这个问题还需要在更正文件名后把github仓库里对应issue的第一条评论里面的url链接也替换为新的文章链接才可以。
CATALOG
  1. 1. disqus从使用到放弃
  2. 2. gitment一探究竟
    1. 2.1. 初步搭建
    2. 2.2. 踩坑