Hexo博客LeanCloud Valine引入av-min.js失败
由于之前的Hexo博客主题(Matery)过于花哨,并且开发者已经不再维护,因此准备迁移到新的主题上(Butterfly),由于每个主题的配置文件都不同,因此除了纯文本内容,其他全部需要重新配置,包括导致所有博客的更新时间都被覆盖为最新日期、所有文章的阅读数全部清空等。
在配置到评论系统Valine
时,发现无法读取LeanCloud
中的Comments
,并且也无法正常显示评论数。本文分享一种解决问题的思路,可能不一定与大家的情况完全相同,可以作为参考。
发现问题
之前一直是使用的Valine的评论组件,因此在更换主题后需要保留之前的数据,在主题的_config.yml
中设置相关配置后,发现前端的评论数一直在加载,并且文章页无法显示之前应该存在的评论内容。
根据这样的错误情况,定位到应该是Valine组件的问题,首先想到的是权限问题无法访问LeanCloud。但是在检查配置文件中的appId
和appKey
之后,发现权限应该是没有问题的,并且LeanCloud中的内容也是存在的。
然后根据评论数一直在Loading的情况,去看了一下网页控制台,果然发现了错误。
报错文件是Valine.min.js
,果然是Valine的问题。然后根据报错内容,发现应该是无法请求这个av-min.js
文件。通过自己访问,即使是使用了魔法,也确实不存在该文件。
既然定位到了问题所在,接下来我们要去源码中更具体地定位到底哪里出了问题。
在项目中直接全局搜索Valine.min.js
看到这个Valine.min.js
是外部引入的,直接控制台-network中找到他的请求地址
我们手动访问一下这个文件,搜索av-min.js
成功定位到了错误的点。
那么整个过程已经很清楚了,Butterfly引用了外部的一个Valine.min.js
文件,在这个js中又引用了外部的av-min.js
文件,但是这个文件并不存在,因此整个加载过程也会出错。
解决问题
既然已经成功定位到了这个错误,那么如何修复的思路也很明显了。
Butterfly主题提供了一个CDN配置项,可以直接引用外部js,因此我们可以自己托管一个Valine.min.js
,把里面的av-min.js
路径进行修改,能够支持国内网络环境稳定访问的。
把我们刚才访问的Valine.min.js
下载到本地,搜索并修改其中av-min.js
的路径为一个可访问的路径,然后托管到云端
直接修改_config.yml -> CDN -> option
中的valine
配置项为自己托管的Valine.min.js
到此已经基本解决这个问题了,但是在实践过程中博客页会出现“401”错误。
这个需要修改配置项中的serverURLs
为LeanCloud
的RestAPI
即可