Hexo博客进阶:为Next主题添加Valine评论系统
文章目录
- 前言
- 根据读者反馈,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 作为数据存储的,所以需要注册一个账号,注册完成后,我们找到创建应用
在这里填写你的应用名称,名称可以自己定义,然后下面选择开发版
点击创建
。
然后点击应用进入设置。
在设置页,我们首先点击存储,查看是否有Comment
和 Counter
,没有则创建,权限设为无限制。
]
然后点击设置 > 安全中心 ,将除了数据存储的服务全部关闭。
最后点击应用 Key 取得我们 AppKey
和 App 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评论系统相关推荐
- Hexo yilia 主题添加 valine 评论系统
本文仅讨论在 yila 中所增加或修改的代码,有关 leancloud 的申请及配置,请参考我所参考的两篇博文: <Hexo yilia主题 添加valine评论系统> <Valin ...
- Hexo博客搭建之Next主题添加搜索服务
随着时间的推移,我们博客站点上的文章会越来越多,因此在站点中增加一个文本搜索服务是非常有必要的.本文介绍一种添加站内搜索服务的方法,站点配置基于 Hexo5.4.2 博客和 Next 主题. Algo ...
- hexo添加valine评论系统 (yilia主题)
hexo-yilia添加valine评论系统 配置步骤 一.创建应用 二.yilia下的配置文件 三.到此整个评论系统创建完成啦,看一下结果!如果遇到一些问题还可以参见[yilia增加valine]( ...
- 为 Hexo 博客添加 valine 评论系统
注册 LeanCloud 由于 valine 评论系统是放在 LeanCloud 上的,因此需要先打开 https://www.leancloud.cn/ 网址注册一个 LeanCloud 账号. 注 ...
- Hexo博客yilia主题添加Gitment评论系统
gitment是imsun利用github上的issues做的评论系统,我这里大力推荐,原因有三: 注册简单,只要填写APP名和主页地址 实现方便,只要简单的配置 没有广告,这个很重要 注册OAuth ...
- Hexo博客Next6.0版本主题配置(背景图片加载、侧边栏社交小图标设置、设置网站图标)
随机背景图片加载 原理 自动更换背景是修改添加背景的css样式实现 图片来源 https://source.unsplash.com/ 修改背景样式 修改themes\next\source\css\ ...
- hexo博客优化之实现来必力评论功能
说明 目前博客站点使用的评论功能,多说,网易云跟贴都已经下线.Disqus也被挡在墙外,友言貌似也不行. 可用的评论系统大概有: - HyperComments:https://www.hyperco ...
- Hexo博客 Next更换修改主题样式 不生效的解决
在对下面的Next主题样式修改时候,博客站点可能无法正常生效. # Schemes scheme: Muse #scheme: Mist #scheme: Pisces #scheme: Gemini ...
- hexo博客yilia主题添加复制代码块功能
博客中的复制代码块功能还是挺实用的,本文参考自 这个博客,感谢并膜拜这位大佬,该博客应该是yilia主题添加复制代码块功能的首创,详细记录了整个过程,看起来比较繁琐(无贬义),所以我单独整理一份最终版 ...
最新文章
- 重载自增++和自减--运算符
- 那么辛苦努力的工作,却换来了一身的不是
- js 中的new Image
- 为什么将 0.1f 改为 0 会使性能降低 10 倍?
- a7100换电池_动动手你也行 篇十四:冲动是魔鬼——单反电池换芯失败记
- 【图】IPAVS多媒体网络×××
- python安装后在哪里找_python安装后的目录在哪里
- ASP.NET Core 认证与授权[1]:初识认证
- CentOS7安装Python3.4 ,让Python2和3共存
- 国民财商教育白皮书(2021年)
- Pandas系列(六)SettingWithCopyWarning报警
- Jquery Sparklines ref
- R数据处理包plyr:超越apply函数族的向量化运算
- react-redux的todolist(b站笔记)-(四)
- Swift 实践之UIWebView
- C语言 打印数组为什么要用循环
- win10计算机磁盘图标,Win10系统硬盘图标怎么更换?Win10系统自定义硬盘图标的方法...
- DirectX11教程5-贴图
- 个人网站如何开通收款功能申请支付接口?
- 读取文件时内容乱码解决方法