美文网首页
为Hexo添加评论系统

为Hexo添加评论系统

作者: Raydom | 来源:发表于2018-02-09 10:45 被阅读0次

    刚刚试着使用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,然后就能看到你的appidappkey了:

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

    相关文章

      网友评论

          本文标题:为Hexo添加评论系统

          本文链接:https://www.haomeiwen.com/subject/furftftx.html