Hexo 集成 Valine 评论系统

第一步:注册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博客框架+Next主题搭建而来的,之前也使用过CSDN、博客园等,最后都放弃了,因为一...
    zwb_jianshu阅读 913评论 1 5
  • 我的个人博客就是使用Hexo博客框架+Next主题搭建而来的,之前也使用过CSDN、博客园等,最后都放弃了,因为一...
    Sanarous阅读 4,202评论 8 22
  • 个人网站:https://sunfove.xyz,欢迎交流 Hexo Hexo 是一个快速、简洁且高效的博客框架。...
    sunfove阅读 2,115评论 5 12
  • 之前折腾了一下静态博客的搭建,现在记录一下。 选用Hexo搭建静态博客的原因:快速、简洁且高效的博客框架。部署简单...
    墨痕未干阅读 552评论 0 1
  • Theme-BMW 中文文档 主题地址: Hexo: https://github.com/dongyuanxin...
    随遇而安_27e7阅读 672评论 0 1
  • 程朱理学认为:真理存在于事物本身。要认知真理,须做到格物致知,也就是通过推究某种事物的终极原理,求得全部事物乃至宇...
    我是豆苗爸阅读 13,059评论 0 8
  • 儿子的新作品 当你带着欣赏的眼神 他便会时常出现惊喜哦! 良性互动成就亲密的亲子关系
    静谧A阅读 241评论 1 5
  • Adapter(适配器模式) 适配器模式用于填补现有程序和所需程序之间的差异 Adapter模式有以下两种 类适配...
    MWY阅读 656评论 3 6
  • 持续精进14/21 精进人:唐菁菁 见:回顾梦想清单,闭上眼睛就能想象到,自己未来是个什么样子 感:自从开始日精进...
    唐清风_0812阅读 36评论 0 0
  • 庄生晓梦迷蝴蝶,茫茫不辨生与蝶。 星藏云匿夜已矣,晓月如境光如雪。 星云既没不长在,月圆极时还复缺。 幸我此身...
    Ean_易安阅读 2,387评论 69 74