Hexo博客使用valine评论系统无效果及终极解决方案

AomanHao

发布于 2022-01-14 09:12:26

1K0

发布于 2022-01-14 09:12:26

文章被收录于专栏：ISP图像处理相关

注意事项

有一些博主valine评论系统无效果，有一些原因：

1、很大程度是因为next的版本升级导致某些参数设置不同 2、valine评论是基于LeanCloud，还有一个文章阅读次数功能也是用LeanCloud，两者会有一点冲突

之后会给出一些解决方案

评论系统选择

Hexo可用的评论系统有很多，如下：

来必力：https://livere.com （需要邮箱注册，加载慢，较卡顿）

畅言： http://changyan.kuaizhan.com （安装需要备案号）

Gitment： https://github.com/imsun/gitment （加载慢，有Bug）

Valine: https://github.com/xCss/Valine (简约，实用，使用Leancloud作为线上数据库）

评论系统配置过程

next 集成了 leancloud 。可以在leancloud进行账号注册。

1、注册LeanCloud

注册地址 https://leancloud.cn/

2、配置LeanCloud

创建一个新的应用

随便取个名字，自己看着取吧

应用创建完成，点开配置按钮

点击设置 > 应用Key 复制App ID 和 App Key

点击设置 > 安全中心 把自己博客网址添加到安全中心，保证数据的调用安全。

修改配置文件

在主题themes目录下有第三方提供的主题配置文件\themes\next\_config.yml 打开主题配置文件添加appid 和appkey:

# 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: 粘贴id
  appkey: 粘贴key
  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

阅读次数功能配置过程

创建阅读次数Class类

在应用里面创建名称为Counter的Class，名称必须为Counter

创建完成，效果如下：

修改配置文件

leancloud_visitors:
  enable: true
  appid: 粘贴id
  appkey: 粘贴key

评论系统无效原因及解决方案

1、next的版本不同导致某些参数设置不同

next为5.X版本的时候，配置文件themes\next\_config.yml的valine的id和key的书写方式为appid和appkey

valine:
  appid: 粘贴id
  appkey: 粘贴key

next为6.X版本的时候，配置文件themes\next\_config.yml的valine的id和key的书写方式为app_id和app_key

valine:
  app_id: 粘贴id
  app_key: 粘贴key

而Valine文件themes\next\layout\_third-party\comments\valine.swig内调用函数依旧为appid和appkey

    appId: '{{ theme.valine.appid }}',
    appKey: '{{ theme.valine.appkey }}',

参数设置不同解决方案

配置文件themes\next\_config.yml的valine的id和key的书写方式统一为为appid和appkey

2、valine评论和文章阅读次数功能均基于LeanCloud，两者有冲突

valine评论和文章阅读次数功能均基于LeanCloud，在配置文件themes\next\_config.yml中，valine的配置项和文章阅读次数的配置项均需要填写LeanCloud的id和key

valine:
  enable: true
  app_id: 粘贴id
  app_key: 粘贴key

leancloud_visitors:
  enable: true
  appid: 粘贴id
  appkey: 粘贴key

即valine评论和文章阅读功能不能同时为true，只能单选一个功能。

功能冲突解决方案

valine作者已经给出了方案，一个两种合一的配置

valine:
  ...
  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

相比之前的配置项多了visitor和comment_count两项参数。即要想拥有Valine评论与文章阅读次数可见，设置Valine:为true，leancloud_visitors:为false，配置如下：

# 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: 粘贴id
  appkey: 粘贴key 
  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
  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

leancloud_visitors:
  enable: false

Valine的CDN修改

官方自带的CDN加载慢，建议将CDN改成第三方CDNvaline:，修改如下

 # 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: //cdn.jsdelivr.net/npm/valine@1.3.4/dist/Valine.min.js

以上内容完成Valine评论的配置相关，都是自己踩的坑，合并了文章阅读次数的功能。