配置Hexo时遇到的一些问题

前几天还在说,使用Hexo搭建博客比较顺利,没什么大坑,后来就接二连三的遇到各种问题。

其实这些问题也不全是Hexo的原因,这些问题在搭建一个静态博客的时候都有可能遇到,不过还是能拿来讲讲,以供参考。Hexo的配置确实非常容易,这一点不可否认。只需要安装好Node.js以及其他必要的依赖,按照官网提供的文档一步一步做就行了。我把博客部署在GitHub Pages上,这样就省去了自己搭建服务器的成本,为了加快访问GitHub的速度,我配置了CDN和对象存储的优化,这在后续的博客中也会慢慢介绍。

评论系统

评论系统是我碰到的最大的一个问题,我在上一篇文章中提到我使用了Disqus来做评论系统,但我后来才发现原来Disqus在国内并不能访问。这就很尴尬了,网上也有一些通过代理来访问Disqus的解决方案,比如disqus-proxy提供了一个通过判断是否能连接Disqus来显示原页面或者是简易评论框的方法,但是简易评论框过于简单,而且只能够匿名评论,样式也不够美观,当然我也懒得改CSS。此外disqus-php-api直接仿照原生的Disqus做了一个评论框,所有操作通过调用API实现,这种方法相对完善,但API支持的操作终究有限,评论框的功能相比原生还是少了一些,比如点赞,第三方登录之类的功能都无法完成,所以之后我就放弃了Disqus,寻求其他的评论系统。

畅言

畅言是目前国内为数不多的评论系统提供商了,几年前的一些比较著名的评论系统,比如多说、网易云跟帖、友言之类的在近两年都关闭了,看来国内的评论系统很不好过呀。然而畅言需要网站备案才可用,备案又是一件特别麻烦的事情,所以只能排除这个方案了。

Disqus

Disqus是国外最流行的评论系统了,但可惜在国内无法访问。另外Disqus支持的第三方登录都是一些国外的SNS比如Facebook, Twitter之类的,国内的SNS均不支持。另外,支持匿名评论也是Disqus的一个优点。

除了依赖第三方提供的评论系统之外,我还看到了很多很有创意的评论系统解决方案。

gitment

gitment的想法很有创意,它通过GitHub提供的API把每篇文章的评论对应到某一个repo的一个issue上,这样当用户评论的时候会自动在对应的issue中插入一条对应的记录。由于GitHub的issue系统本身支持Markdown,而且还支持emoji的投票,因此评论系统还原生实现了富文本和点赞/反对这一类的功能。唯一的缺点就是用户必须拥有GitHub账户并登录后才能评论,但考虑到很多技术博客的受众对象,这条限制在很多情况下是可以接受的。

Valine

Valine实现了一个纯前端的评论系统,后端基于Leancloud,Leancloud提供BaaS后端服务,直接提供RESTful的数据存储API,因此可以直接在前端进行数据的CURD操作。稍微了解了一下,BaaS似乎是近年才流行起来的一种开发模式,看了一下这篇文章,感觉挺有意思,有空可以介绍一下。

Livere

上面的这些评论系统就简单的介绍了一下。这些方案都有自己的优点,但我最后使用了LiveRe第三方评论系统,来自韩国公司。配置比较简单,功能也没有Disqus那么丰富,但它有两个最大的优点。第一,它支持国内的各大SNS网站登录。第二,它可以在国内流畅访问。

所以我最后就采用LiveRe了,在网站上注册后并新建一个,然后Install一个City版评论系统就行了,记录下提供的livere_uid。受到Hexo-Next主题的加持,只要把livere_uid在配置页面填好就完成了。这期间我还发现了一个关于链接标识名的bug,简单地说,就是相同的页面的两个链接,比如这两个链接

1
2
www.example.com/my-article/
www.example.com/my-article/index.html

在正常情况下,它们应当指向同一个页面,但由于LiveRe直接读取页面URL作为其评论的标识符,这两个链接被当作不同的页面,所以会导致显示了不同的评论。参考了LiveRe的文档后,发现LiveRe提供了window.livereOptions中的refer来手动指定标识符,因此只要在初始化评论框的时候设定好参数即可。

livere.swig
1
2
3
4
5
...
window.livereOptions = {
refer: '{{ page.path }}'
};
...

顺便写了个PR #395交了上去,开发者很快就通过了,看起来会在下一个版本(6.5.0)中修复这个问题。

分享功能

分享功能我在之前也已经集成过很多次了,原来用的比较多的是addthis,这在theme主题中也集成了,但集成的不是很好,没办法将分享按钮以inline的形式插入在文章中,只能放置在边框中。在PC上的效果还好,但在移动端会严重遮挡浏览区域。好在theme主题中也集成了needmoreshare2的插件支持,所以直接用就行了。当中一些样式有点奇怪,所以顺便改了一下#11.

阅读量统计

阅读量统计是一个很脆弱的实现,因为这个功能只是简单的在每次打开的时候+1,也不会过滤重复什么的。这里也有几种方法,比如Google的Firebase提供了云端的数据库,然而在国内依然无法访问。所以最后还是采用了LeanCloud的云端数据库方案,不够安全,但只是作为一个简单的统计阅读量的功能来讲,勉强也可以接受了。

其他配置

其他还有一些比较简单的配置,比如添加Google Analytics用来统计,以及增加一些js插件扩展,包括fancyboxpace等等,这些插件大都是给网站加一些特技,变得更加酷炫而已,方法也都比较简单,这里就不再赘述了。

以上是我在配置Hexo时的一些经验分享,如果有任何问题欢迎在下方留言。此外,我还对博客做了一些访问速度的优化,这会在之后的文章中另作介绍。