使用Valine给hexo加上评论功能

上次我们把hexo博客系统搭建好了,以后写文章只要

1
2
3
4
hexo new post name
vim name
hexo g
hexo d

就可以把文章发布到我们的网站上。
今天我们来给它加上评论功能。hexo支持的评论系统有很多,next主题下目前能用的就有

  • Disqus
  • 畅言
  • Valine
  • Gitment
  • LiveRe来必力

五种评论系统。我采用了Valine,该系统简洁快速,搭建过程也只是简单的几次操作就能完成。而且Valine支持匿名评论,不需要注册登录账号。下面来介绍我的搭建过程。

注册LeanCloud

由于Valine使用了LeanCloud作为后台数据库,因此你需要在LeanCloud上创建一个应用作为数据云存储库。LeanCloud的注册很简单,免费的应用完全满足个人博客的需要。并且LeanCloud提供了三个节点服务器,分别是华北、华东、美国。当你的服务器在国外时,为了加快评论读写速度,可以选择美国节点。
选择好LeanCloud的服务器节点后,就开始创建应用了,点击 <创建应用> 按钮,在弹出的对话框中选择免费的版本(有需要的话请选择收费版)。完成后你就可以看到一个创建好的应用

进入应用的设置界面,进入应用key,可以看到 APP ID 和 APP Key,记录这两个值,一会要写到hexo的配置文件。
在设置界面进入安全中心,因为我们博客系统只需要评论数据的存储,所以最好关闭其他的服务,只保留数据存储开启。

在Web安全域名中写入你的网站域名,这样可以防止非设置域名的网站向LeanCloud数据库写入数据。
至此,Valine需要的云存储数据库就设置好了

配置hexo

在next主题文件夹写的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: DBPxxxxxxxxxxxxxxxx-xxxxxxxx # your leancloud application appid
appkey: HLxxxxxxxxxxxxxxx # your leancloud application appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: true # Verification code
placeholder: "你有什么想说的吗?" # comment box placeholder
avatar: wavatar # gravatar style
guest_info: nick,mail # custom comment header
pageSize: 10 # pagination size
visitor: false

配置完成后就重新生成一下网页文件试试吧 ^_^

效果预览

评论区的效果大致是这样的

评论数据全都保存在LeanCloud的存储库中

虽然很不要脸,但是还请您多多打赏 ^_^