美文网首页Hexo
Hexo 集成 Valine 评论系统

Hexo 集成 Valine 评论系统

作者: 虹猫日志 | 来源:发表于2020-01-28 18:29 被阅读0次

    第一步:注册Leancloud,获取 AppID 和 AppKey

    推荐使用国际版,点击进入Leancloud官网

    1. 注册完成后需要先创建应用。单击创建应用,如下图:
    创建应用
    1. 创建完成后,打开应用,点击左边的存储,查看是否有CommentCounter,如没有则创建,权限设为所有用户。创建完成后,如下图:
    创建类

    如没有创建,那么在显示 post 页面时,请求 LeanCloud 的 api 接口,可能会返回 error code=101

    1. 点击设置 → 安全中心 ,将除了数据存储的服务全部关闭,并绑定web安全域名,防止恶意调用。
    安全设置
    1. 最后点击 应用 Keys,获取到 AppIDAppkey

    第二步:在Hexo Next主题中配置

    1. 打开 https://www.jsdelivr.com/package/npm/valine 获取最新 valine.min.js 的cdn地址:
    获取valine地址
    1. 找到主题配置文件,搜索valine,添加cdn链接,大致位置如下图:
    添加cdn
    1. 还是主题配置文件中,填写appidappkeyvaline参数(语言必须小写):
    参数配置

    第三步:测试valine评论

    在本地博客根目录执行hexo clean && hexo s --debug重启博客后,浏览器访问任意文章进行留言如下图:

    界面 测试成功

    感兴趣的可以点击此处查看如何设置头像

    评论的数据存在leancloud应用中,如下图:

    数据

    注意事项

    在 Hexo 博客中,评论的功能在所有页面都默认开启,但是有的时候我们在页面上不需要显示评论功能,例如分类,标记页面我们并不需要评论功能。

    Front-matter 中通过comments属性设置truefalse控制该页面或者是文章的评论功能是否打开,如下:

    ---
    title: Tags
    date: 2019-12-19 16:10:19
    type: "tags"
    comments: false
    ---
    

    相关文章

      网友评论

        本文标题:Hexo 集成 Valine 评论系统

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