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

评论