banner

如何在 Hexo 中的 NexT 主题下添加 leancloud 评论功能 字数统计功能

添加 leancloud 评论功能

NexT 主题从 6.0 版本开始,便集成了 leancloud 的评论系统,只需要简单的配置,就可以使用了,非常方便。

注册 leancloud 账号

官网链接:
国内版:https://leancloud.cn
国际版:https://leancloud.app

重要!!!
先说下这两个版本的区别:
国内版从2019年10月1号开始需要绑定域名,而且需要备案信息,否则功能将被禁用 ( 自有服务器且已完成备案的选手请忽略本条信息 )
国际版则没有这些限制,界面也有中文版,也暂时未发现请求延迟的弊端。
官方通知地址: https://leancloudblog.com/mandatory-domain-config/

在 leancloud 中创建应用

nBnRHS.webp

如果只是评论功能的话 开发版(免费版) 就可以满足全部需求了

添加评论数据类

创建完成后点击进入应用

nBuUvq.webp

选择 存储 中的 创建 Class

nBuOMt.webp

在 创建 Class 中 ,Class 名称 必须!!! 设置为 Counter ,权限选择无限制,防止遇到无法写入的问题
阅读量 数据类就配置完成了

nBMEpd.webp

同理,在 创建 Class 中 ,Class 名称 必须!!! 设置为 Comment ,权限选择无限制,防止遇到无法写入的问题
评论 数据类就配置完成了

在 NexT 中配置参数

nBMjUS.webp

在 设置 - 应用 key 中 将 AppId AppKey 分别复制,填入 themes/next/_config.yml 中对应位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Valine
# You can get your appid and appkey from https://leancloud.cn
# For more information: https://valine.js.org, https://github.com/xCss/Valine
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: xxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxx
appkey: xxxxxxxxxxxxxxxxxxxxxxxx
notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: (o´・ェ・`o)说点什么咯 # 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
visitor: true # 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
#post_meta_order: 0

这个为 评论+阅读量 的配置 ( visitor: true )

1
2
3
4
5
6
7
8
9
10
11
# Show number of visitors to each article.
# You can visit https://leancloud.cn to get AppID and AppKey.
leancloud_visitors:
enable: false
app_id: xxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxx
app_key: xxxxxxxxxxxxxxxxxxxxxxxx
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: true
betterPerformance: false

这个仅有 阅读量 功能
二选一开启即可

基本配置这样就已经算完成了。

为 leancloud 添加安全域名

仅做完上述操作,虽然功能已经可以实现了,但是并不安全,任何人都可以使用你的参数获取数据
这时候就需要为 leancloud 添加安全域名,只有允许的域名请求,才会返回数据

nB1UBt.webp

回到 leancloud 的设置中,在 Web 安全域名 中添加你博客的域名

完成!

添加 本文字数 与 阅读时长

同样,从 NexT 6.0 开始,集成了此功能,但是我们需要先安装依赖

安装依赖

1
$ git clone https://github.com/theme-next/hexo-symbols-count-time.git node_modules/hexo-symbols-count-time

在你的博客根目录下执行,注意是根目录,不是主题目录

添加配置

1
2
3
4
5
6
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: false

在 博客根目录 也就是 Hexo 的 config.yml 中添加 symbols_count_time 的配置

1
2
3
4
5
6
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275

然后,在 theme/next/config.yml 中,打开开关,即可

重新生成页面,就能看到 字数与时长 统计了

完成!