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

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

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

注意

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

详细的部署方式可参考我的文章 Hexo博客进阶:为-Next-主题添加-Waline-评论系统

1.为什么选择Valine

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

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

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

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

然后点击应用进入设置。

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

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

最后点击应用 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.js
valine: 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 version
appid: # Your leancloud application appid #LeanClound获得的appid
appkey: # Your leancloud application appkey #LeanClound获得的appkey
notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki # 邮件提醒
verify: false # Verification code
placeholder: 欢迎畅所欲言 # Comment box placeholder
avatar: mm # Gravatar style #默认头像设置
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: 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.html
comment_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