Hexo+ Next主题 增加Valine评论 | 天一阁

Hexo+ Next主题 增加Valine评论

想在自己的Hexo博客上加个评论功能。Hexo是个基于node.js静态博客系统,可以利用github page发布个人博客。这类博客系统添加评论系统,都是通过增加一个js代码,将评论信息提交到后台存储起来。(怎么调动回来的??)

网上搜了一下,发现有很多的备选方案,选择了最简单的Valine。还有gitcomment是基于github issue系统保存评论数据,但需要github账号登录。(github issue怎么用??Oauth是什么?)

Valine需要在LeanCloud上注册一个账号,所有的数据会保存在LeanCloud上。

在什么地方添加Valine的js代码呢?网上很多文章是说新版的NeXT已经添加了Valine的功能,只要修改配置就可以了,但是想多了解一些Hexo和Next主题的内部机制,所以想自己动手修改。代码看的很费劲,Hexo基于node.js用到了很多Node提供的全局对象,而且又做了很多的概念抽象,代码看起来一点都不容易。主题的代码也是懵逼,里面全是.swig结尾的文件,后来才知道是一个模板引擎的文件后缀。

最后终于找到一篇文章说,主题渲染的入口是_layout.swig文件,Hexo会根据source目录下的所有md文件,使用特定的模板进行渲染,默认使用post.swig文件进行渲染。所谓渲染,我的理解就是进行各种生成和替换,最终生成一个静态HTML。

1
2
3
4
5
6
7
8
9
10
new Valine({
el: '#comment' ,
notify:false,
verify:false,
appId: '这里填上面获得的appid',
appKey: '这里填上面获得的appkey',
placeholder: 'just go go',
path:window.location.pathname,
avatar:'mm'
});

就是把这样一短代码加入到post.swig中,就可以展示评论输入框了。调试的时候差了一点,还需要去LeanCloud上建一个Comment类,这时Valine就可以提交代码了。