刚刚试着使用Hexo搭建了博客,本来想着只是为了自己做笔记方便。但后来又觉得,既然放到网上了,不能评论太难受了。
之前用wordpress时用过多说(已躺)、畅言等,但用起来总是某些方面不尽人意。
折腾了半天,最后选择了一款基于Leancloud的极简风评论系统诞生——Valine
。界面简洁、使用方便、无后台。。。好处就不多说了,自行体会。
引入js文件
在Hexo的themes目录下找到所使用的主题,找到partial目录下的comment.jade文件,先引入js包
我使用的主题用的jade模板,用ejs模板的需自行按照ejs语法添加
if theme.valine
script(src="//cdn1.lncld.net/static/js/3.5.0/av-min.js")
script(src='//unpkg.com/valine@1.1.9-beta3/dist/Valine.min.js')
配置 _config.yml 文件
if theme.valine
可以在主题的 _config.yml 文件中配置该字段设置是否开启valine
valine: true
获取appid和appkey
注册并登录 LeanCloud,进入控制台后点击左下角 创建应用 :
应用创建好以后,进入刚刚创建的应用,选择左下角的 设置
> 应用Key
,然后就能看到你的appid
和appkey
了:
为了您的数据安全,请注意设置自己的安全域名:
设置安全域名配置
在需要的添加评论的地方添加html(jade)代码
div(id="comment")
实例化调用
script.
new Valine({
// Valine 的初始化挂载器。可以是一个 CSS 选择器,也可以是一个实际的 HTML元素。
el: '#comment' ,
notify:false,
verify:false,
appId: 'appid',
appKey: 'appkey',
// 评论框占位符
placeholder: '看了这么久,你不想说两句吗?',
// 当前文章页路径,用于区分不同的文章页,以保证正确读取该文章页下的评论列表
path:window.location.pathname,
// 默认头像类型
avatar:'monsterid',
// 每页展示评论条数
pageSize: 10
});
Valine 使用的是Gravatar 作为评论列表头像
参数值(字符串) | 备注 |
---|---|
空字符串'' | Gravatar官方图形 |
mm | 神秘人(一个灰白头像) |
identicon | 抽象几何图形(根据邮箱或昵称生成) |
monsterid | 小怪物 |
wavatar | 用不同面孔和背景组合生成的头像(根据邮箱或昵称生成) |
retro | 八位像素复古头像(根据邮箱或昵称生成) |
hide | 不显示头像 |
因为Valine是根据页面的url来区分不同的文章页,以保证正确读取该文章页下的评论列表,如果文章的url修改了而被判断成新页面的情况。而Hexo通常是根据文章标题来生成url的,当修改文章标题是可能会导致url的变化而影响评论内容的显示。所以我们尽量不要url或固定url不会变。解决方法请查看:hexo链接持久化解决方法
网友评论