hexo - Next 主题添加评论功能

Hexo 的 Next 主题继承了多种评论系统,我在这里介绍两种个人觉得不错的评论系统:Valine 和 gitment

Valine 评论系统

使用 Valine 评论系统,这款系统不需要登录便可以登录,没有后端,Next 主题最新已经支持安装

  • 基于 Leancloud 的系统
  • 支持 MarkDown 语法
  • 无后端实现,快速高效

配置

注册 LeanCloud

因为 Valine 是基于 LeanCloud 系统的,所以先在 LeanCloud 中注册账号

LeanCloud官网登录入口

注册登陆后,访问控制台,创建应用,选择开发版,创建好之后就生成了 App IDApp Key

设置 Next 主题

在主题的配置文件中,修改关于 valine 的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true # 是否开启
appid: # 上一步获取的 App ID
appkey: # 上一步获取的 App Key
notify: false # 新留言是否需要通知 https://github.com/xCss/Valine/wiki
verify: false # 是否需要验证,验证比较反人类建议false关闭
placeholder: 请在此输入您的留言 # 默认留言框内的文字
avatar: mm # 默认头像
guest_info: nick,mail # 默认留言框的头部需要访问者输入的信息
pageSize: 10 # pagination size #默认单页的留言条数

重新部署

评论管理

如果想要管理评论,进入 leancloud 官网,找到 控制台->存储->commet 中进行管理

Gitment 评论系统

gitment,它是基于 github 开发的,是依靠于 GitHub Issues 的评论系统,Next 主题最新已经支持安装

前提:更新 Next 主题(5.1.2 主题)

注册OAuth application

  1. 在 github 中进行注册,进入 https://github.com/settings/profile

  2. 点击左侧 Developer settings

  3. Register a new application

    1
    2
    3
    4
    Application name:	#应用名称
    Homepage URL: #网站URL(填自己的博客主页地址)
    Application description #描述
    Authorization callback URL: #网站URL(填自己的博客主页地址)
  1. 注册完成之后,会得到:Client IDClient Secret

新建存放博客评论仓库

可以在 github 中建一个项目,专门用来存储你的博客评论

配置 next 主题文件

编辑主题配置文件:themes\next\ _config.yml,找到有关 gitment 的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
gitment:   
enable: true
mint: true
count: true
lazy: false #评论懒加载,如果true,则默认不展示评论,点击按钮查看评论
cleanly: false
language:
github_user: #github名称
github_repo: BlogComments #上一步新建存放评论的仓库名
client_id: b8bad0exxxx #上面注册 OAuth Application 的 Client ID
client_secret: bcee560xxxxxx #上面注册 OAuth Application 申请的 Client Secret
proxy_gateway:
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint

初始化

在设置完成之后,hexo 重新部署

每篇文章都要点击初始化评论按钮

评论

评论显示在新建存放评论的仓库中的 issue

关闭某个页面的评论

在页面的 Front-matter 中添加 comments 字段,设为 false

比如标签页不想要评论,则在标签页面中做以下设置

1
2
3
4
5
title: 标签
date: 2015-12-16 17:05:24
type: "tags"
comments: false
---