为Hexo Next添加评论系统Gitalk

原本使用搜狐畅言,结果前段时间畅言开始投放广告,除非付费。所以就在寻求一个替代方案。结果发现这个gitalk还蛮合适的。具体怎么安装大体可以参考这篇文章,我重点说说一些优化内容。

将字体调小

因为next主题是小清新的,16px字号太粗犷了。修改方法:直接将gitalk.css中的16px全部替换成14px

github未登录时ie下默认头像错位

我的处理方法比较暴力,直接把头像隐藏,在下面的class下添加display: none;

1
2
3
4
5
.gt-container .gt-avatar-github {
width: 3em;
height: 3em;
display: none;
}

去除全屏遮罩

按照上面那篇文章配置完成后,点击输入框的时候,会有个全屏遮罩。跟next风格非常不搭。去除的方法是删除_config.yml里的配置项distractionFreeMode: true

去除多余的元素

从美观角度考虑,我修改了支持markdown的提示方式,把支持markdown直接放在输入框的placeholder里去。删除了做第一个评论的人的div。

  • gitalk.min.js里删除下面这句代码
1
b.default.createElement("a",{className:"gt-header-controls-tip",href:"https://guides.github.com/features/mastering-markdown/",target:"_blank"},b.default.createElement(L.default,{className:"gt-ico-tip",name:"tip",text:this.i18n.t("support-markdown")})),
  • gitalk.min.js里将"leave-a-comment":"说点什么"改为"leave-a-comment":"说点什么,支持 Markdown"
  • gitalk.min.js里删除下面这句代码
1
!f.length&&b.default.createElement("p",{className:"gt-comments-null"},this.i18n.t("first-comment-person")),

END

优化后的效果,直接看下方吧。