配置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，简单地说，就是相同的页面的两个链接，比如这两个链接

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

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

livere.swig

...
window.livereOptions = {
    refer: '{{ page.path }}'
};
...

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

分享功能

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

阅读量统计

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

其他配置

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

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