为Hexo添加评论系统

刚刚试着使用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/[email protected]/dist/Valine.min.js')

配置 _config.yml 文件

if theme.valine可以在主题的 _config.yml 文件中配置该字段设置是否开启valine

valine: true

获取appid和appkey

注册并登录 LeanCloud，进入控制台后点击左下角 创建应用 ：

创建应用

应用创建好以后，进入刚刚创建的应用，选择左下角的 设置 > 应用Key，然后就能看到你的appid和appkey了：

获取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链接持久化解决方法