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 中，打开开关，即可

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

完成！