文章目录

  • 前言
    • 根据读者反馈,Valine 评论系统在 Next 主题高版本 (7.+) 以上没有内置,且 Valine 已经很久没有更新维护了。如果想要配置体验 Valine 的,建议使用 Next 主题低版本。 或者使用更加人性化且带后端的 [Waline](https://waline.js.org/)
  • 1.为什么选择Valine
  • 2. 第一步,注册LeanClound,获取APP ID 和 APP Key
  • 3. 在Hexo Next主题中配置
  • 4. 其他设置
    • 4.1 指定文章(页面)评论功能是否开启
    • 4.2 自定义头像

前言

在前面的文章中,我们基本把Hexo博客的框架搭建好了和实现了主题的部分美化,接下来我开始慢慢介绍一些进阶设定。

这次是Hexo 在Next主题下配置Valine评论系统

根据读者反馈,Valine 评论系统在 Next 主题高版本 (7.+) 以上没有内置,且 Valine 已经很久没有更新维护了。如果想要配置体验 Valine 的,建议使用 Next 主题低版本。 或者使用更加人性化且带后端的 Waline

1.为什么选择Valine

在笔者进行评论系统选择时,我觉得我的需求就是方便,简洁,最重要一点是要支持Markdown ,对比之下,最终选定了这款Valine,当然,如果你不喜欢这样简洁的,可以参考 Hexo(NexT 主题)评论系统哪个好?

2. 第一步,注册LeanClound,获取APP ID 和 APP Key

Valine 是基于 LeanCloud 作为数据存储的,所以需要注册一个账号,注册完成后,我们找到创建应用

在这里填写你的应用名称,名称可以自己定义,然后下面选择开发版 点击创建

然后点击应用进入设置。

在设置页,我们首先点击存储,查看是否有CommentCounter,没有则创建,权限设为无限制。

]

然后点击设置 > 安全中心 ,将除了数据存储的服务全部关闭。

最后点击应用 Key 取得我们 AppKeyApp id

3. 在Hexo Next主题中配置

首先打开 https://www.jsdelivr.com/package/npm/valine 获取最新的 valine.min.js 的cdn地址:

然后我们修改主题配置文件,配置CDN:

# valine# See: https://github.com/xCss/Valine# Example:# valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js# valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.4/Valine.min.jsvaline: https://cdn.jsdelivr.net/npm/valine@1.3.9/dist/Valine.min.js

再打开配置Valine功能:

# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:# 功能开关enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk versionappid:  # Your leancloud application appid #LeanClound获得的appidappkey:  # Your leancloud application appkey #LeanClound获得的appkeynotify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki # 邮件提醒verify: false # Verification code placeholder: 欢迎畅所欲言 # Comment box placeholderavatar: mm # Gravatar style #默认头像设置guest_info: nick,mail,link # Custom comment headerpageSize: 10 # Pagination sizelanguage: zh-cn # Language, available values: en, zh-cn # 语言,设为zh-cn# 是否开启当前文章阅读量统计visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.htmlcomment_count: true # If false, comment count will only be displayed in post page, not in home page

4. 其他设置

4.1 指定文章(页面)评论功能是否开启

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

我们可以在 Front-matter 中通过comments属性设置true或false控制该页面或者是文章的评论功能是否打开,如我设置标签页面的评论功能关闭:

title: 标签
date: 2019-07-18 15:16:50
type: "tags"
comments: false

4.2 自定义头像

参考:https://valine.js.org/avatar.html

Hexo博客进阶:为Next主题添加Valine评论系统相关推荐

  1. Hexo yilia 主题添加 valine 评论系统

    本文仅讨论在 yila 中所增加或修改的代码,有关 leancloud 的申请及配置,请参考我所参考的两篇博文: <Hexo yilia主题 添加valine评论系统> <Valin ...

  2. Hexo博客搭建之Next主题添加搜索服务

    随着时间的推移,我们博客站点上的文章会越来越多,因此在站点中增加一个文本搜索服务是非常有必要的.本文介绍一种添加站内搜索服务的方法,站点配置基于 Hexo5.4.2 博客和 Next 主题. Algo ...

  3. hexo添加valine评论系统 (yilia主题)

    hexo-yilia添加valine评论系统 配置步骤 一.创建应用 二.yilia下的配置文件 三.到此整个评论系统创建完成啦,看一下结果!如果遇到一些问题还可以参见[yilia增加valine]( ...

  4. 为 Hexo 博客添加 valine 评论系统

    注册 LeanCloud 由于 valine 评论系统是放在 LeanCloud 上的,因此需要先打开 https://www.leancloud.cn/ 网址注册一个 LeanCloud 账号. 注 ...

  5. Hexo博客yilia主题添加Gitment评论系统

    gitment是imsun利用github上的issues做的评论系统,我这里大力推荐,原因有三: 注册简单,只要填写APP名和主页地址 实现方便,只要简单的配置 没有广告,这个很重要 注册OAuth ...

  6. Hexo博客Next6.0版本主题配置(背景图片加载、侧边栏社交小图标设置、设置网站图标)

    随机背景图片加载 原理 自动更换背景是修改添加背景的css样式实现 图片来源 https://source.unsplash.com/ 修改背景样式 修改themes\next\source\css\ ...

  7. hexo博客优化之实现来必力评论功能

    说明 目前博客站点使用的评论功能,多说,网易云跟贴都已经下线.Disqus也被挡在墙外,友言貌似也不行. 可用的评论系统大概有: - HyperComments:https://www.hyperco ...

  8. Hexo博客 Next更换修改主题样式 不生效的解决

    在对下面的Next主题样式修改时候,博客站点可能无法正常生效. # Schemes scheme: Muse #scheme: Mist #scheme: Pisces #scheme: Gemini ...

  9. hexo博客yilia主题添加复制代码块功能

    博客中的复制代码块功能还是挺实用的,本文参考自 这个博客,感谢并膜拜这位大佬,该博客应该是yilia主题添加复制代码块功能的首创,详细记录了整个过程,看起来比较繁琐(无贬义),所以我单独整理一份最终版 ...

最新文章

  1. 重载自增++和自减--运算符
  2. 那么辛苦努力的工作,却换来了一身的不是
  3. js 中的new Image
  4. 为什么将 0.1f 改为 0 会使性能降低 10 倍?
  5. a7100换电池_动动手你也行 篇十四:冲动是魔鬼——单反电池换芯失败记
  6. 【图】IPAVS多媒体网络×××
  7. python安装后在哪里找_python安装后的目录在哪里
  8. ASP.NET Core 认证与授权[1]:初识认证
  9. CentOS7安装Python3.4 ,让Python2和3共存
  10. 国民财商教育白皮书(2021年)
  11. Pandas系列(六)SettingWithCopyWarning报警
  12. Jquery Sparklines ref
  13. R数据处理包plyr:超越apply函数族的向量化运算
  14. react-redux的todolist(b站笔记)-(四)
  15. Swift 实践之UIWebView
  16. C语言 打印数组为什么要用循环
  17. win10计算机磁盘图标,Win10系统硬盘图标怎么更换?Win10系统自定义硬盘图标的方法...
  18. DirectX11教程5-贴图
  19. 个人网站如何开通收款功能申请支付接口?
  20. 读取文件时内容乱码解决方法

热门文章

  1. ggplot2不要图例_ggplot2隐藏图例
  2. 提高应用在 iOS App Store 中排名的 20 条技巧
  3. 汽车分析,随时间变化的燃油效率
  4. 【回答问题】ChatGPT上线了!给我推荐20个比较流行的图神经网络模型
  5. 二维数组与交错数组(转)
  6. 数字信号处理之-能量信号与功率信号
  7. LiveVideoStackCon 2018 打造多媒体人自己的盛宴
  8. 经验正交函数分解matlab,matlab物理场的正交分解
  9. Golang http短连接
  10. 分解时间序列(季节性数据)