Gitalk - 一款非常极客的评论插件

前言

一提到多说,相信不少博主可能会不假思索的跟你说很多它自带的许多特性以及与博客的无缝接入.除了他的访客功能之外,还提供了很多的自定义样式和描述语,这在这样一个众口难调的时代实在是少见.对于多说的感受,往往有这样的感觉-失去的时候才懂得珍惜.本文在和介绍你如何使用Gitalk之外,从外观上尽量将这款评论插件改成多说差不多的样式.

Gitalk的使用

自从多说评论插件在2017年6月宣布停止维护之后,也许会有很多博主会苦于意识找不到合适的评论插件取代它.加之国内其他的评论插件往往需要提供网站备案才允许接入,这无形中也提高了接入门槛.索性,很多的极客爱好者纷纷推出自己的评论插件.比如今天我们即将推荐的一款评论插件Gitalk.

原理

Gitalk 是一款利用GitHub API,基于GitHub issue和preact开发的评论插件.说的直白点,Gitalk实际上是将我们在博客上的评论通过一定的方式上传到GitHub的某个项目的issue上的.就是GitHub的某个项目帮我们托管博客的评论信息.我们的博客可以不必非要托管在GitHub上.刚好博主将自己的静态博客托管在GitHub上.所以说,Gitalk是Github Pages的评论插件神器.

安装

因为博主这边使用的是hexo的yelee主题,其他主题做法应该也差不多.以下将以yelee主题为例介绍.

创建

在Github个人设置下选择开发者设置,新建一个开发者授权应用.
主页地址和回调地址这里统一填写博客主页地址即可,注册成功之后将获取得到相应的Client ID和Client Secret.
Gitalk将利用这两个参数获取用户的授权,并将评论信息提交到GitHub的项目下.

配置

因为博客之前尝试过国内的其他评论插件,所以在配置的使用一般按照不同的类型通过开关的形式加以调整.

gitalk:
  on: true
  owner: //GitHub账号用户名
  repo: //托管的项目,之后的评论将留在该项目的issue上.
  clientID: //上一步创建的授权应用获取到的
  clientSecret: //同上
  admin: //GitHub账号用户名
  distractionFreeMode: //开启无干扰模式

在主题下的配置文件上按照上面的提示配置好信息之后,就可以在指定需要的地方引用该插件了.

引用

在主题目录下指定目录下(主题yelee专门创建一个统一存放评论页面的文件夹)创建一个gitalk的页面.

<div id="gitalk-container"></div>
<link rel='stylesheet' href="https://unpkg.com/gitalk/dist/gitalk.css">
<link rel='stylesheet' href="//blog.terrancy.com/resources/gitalk/comment.css"/>
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script src="https://cdn.staticfile.org/blueimp-md5/2.7.0/js/md5.min.js"></script>
<script type="text/javascript">
    var gitalk = new Gitalk({
      clientID:  '<%=clientID%>',
      clientSecret: '<%=clientSecret%>',
      id: md5(location.pathname),
      repo: '<%=repo%>',
      owner: '<%=owner%>',
      admin: '<%=admin%>',
      distractionFreeMode: <%=distractionFreeMode%>,
    })
    gitalk.render('gitalk-container')
</script>

这里面最主要的是引用了两个链接,通过配置文件的相应参数将渲染到gitalk-container这个id的div上.
值得注意的是,这里通过配置信息的id参数来区分每个页面信息,官网上要求id赋值在32位以内.这里使用md5加密将长度控制在32位.
按照上面的几个步骤操作之后基本上已经可以正常显示了,这里有个小细节就是需要用GitHub账号在这个插件上登入授权即可在GitHub上的指定的项目生成相应的issue.

多说化

以上对Gitalk的安装使用已经详细介绍过了,安装之后总体表现算是中规中矩.以下针对一些个人不满意的地方结合多说的自定义样式做些优化.

评论高亮

当鼠标光标在评论框时,页面会出现一个带有半透明的浮层并且评论框高亮.这种效果见仁见智,个人感觉不太好看.直接将其去除.就是样式重写覆盖.

/** 评论边框 **/
.gt-container .gt-comment-admin .gt-comment-content {
  background-color:rgba(255, 255, 255, 0);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.gt-container.gt-input-focused{
    background-color:rgba(255, 255, 255, 0);
}
.gt-container.gt-input-focused::after{
    background-color:rgba(255, 255, 255, 0);
}
/** 预览模式 **/
.gt-container .gt-header-preview {
    background-color:rgba(255, 255, 255, 0);
    font-family: inherit;
}

背景图片

之前在使用多说的时候就曾在评论框内添加背景图片,有种怀旧感.

/** 扑街 **/
#gitalk-container .gt-header-comment .gt-header-textarea{
  height: 96px !important;
  background: url(//blog.terrancy.com/resources/duoshuo/pujie.png) right no-repeat;
  font-family: inherit;
}

图像旋转

鼠标悬浮在头像上时,头像会自动由正方形旋转成圆形.这部分使用之前多说样式.

#ds-recent-comments .gt-avatar img {
  width: 54px;
  height: 54px;
  border-radius: 27px;
  -webkit-border-radius: 27px;
  -moz-border-radius: 27px;
  box-shadow: inset 0 -1px 0 #3333sf;
  -webkit-box-shadow: inset 0 -1px 0 #3333sf;
  -webkit-transition: 0.4s;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
  -moz-transition: -moz-transform 0.4s ease-out;
}
#ds-recent-comments .gt-avatar img:hover {
  box-shadow: 0 0 10px #fff;
  rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 0 10px #fff;
  rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
  transform: rotateZ(360deg);
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
}

放慢了步伐,只为跑得更远~