Hexo_解决Fluid主题阅读次数不显示问题

参考链接

解决方法

讲讲配置Fluid主题阅读次数不显示问题遇到的坑
阅读了几篇链接,按照设置方法都不能显示

一方面大多数用的主题是Next
而查找Fluid、阅读次数关键字的相关文章,也均漏掉了设置API的问题
可能采用的是之前版本,而个人采用的是最新版部署
官方文档也没有讲解要部署 API,算是个小坑

有些问题还是得自己摸索、思考
正确步骤,跟着以下设置即可

view

  • 定位 post.meta.views
    • 开关打开(设置为 true
    • 存储数据采用 leancloud 或者 busuanzi

版本不同,注释可能不同,可以用关键字搜索下,或看下官方文档
像之前版本注释叫阅读次数目前叫浏览量记数,但views关键字没变
查找定位关键字views

leancloud

  • 定位关键字:leancloud,依次填入 leancloud 的配置信息
  • app_id
  • app_key
  • server_url

注:app_idapp_keyserver_url都在 leancloud 的设置-应用凭证中获取
必须要填写server_url,否则不会显示
这也是其他博主没有讲到的地方
image-20230120115723385

解决过程

一开始设置,怎么设置都没有显示

个人以为是有什么讲究

有逛了几篇博客,人家的阅读数量也没有显示

其中包括一篇教人设置阅读数量的博主,而且采用的也是fluid主题

这就好比教人的师傅,自己却没有展示的怪异

就在想中国这方面是否更新什么政策限制了….

但想想廖雪峰的网站也有阅读量统计,而且正常显示

所以应该是我想多了,那些博主应该是没设置或者没维护的问题

也算阅读的不仔细吧,leancloud的设置,有看到server_url
因为官方和其他博主都没有讲要设置,所以没深究
另一方面,以为官方把 API 封装写好了,只用提供 idkey 就可以了

设置后不行,一开始没理会(没有头绪,就放过了),但后面还是反过来折腾下
查找相关资料了,受启发可以看调试,就尝试下自己解决
打开控制台,如果不设置server_url,会产生如下报错

image-20230120120943751
发现是leancloud.js的问题,165行的return抛出的异常

1
2
3
4
5
6
7
8
9
10
11
12
function fetchData(api_server) {
var Counter = (method, url, data) => {
return fetch(`${api_server}/1.1${url}`, {
method,
headers: {
'X-LC-Id' : appId,
'X-LC-Key' : appKey,
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
};

由于以为是官方已经封装好了api链接,所以这里虽然有写api_server,但还没意识到是没有填入的问题
所以以下解决问题方向开始跑偏

去查看源文件,打开leancloud.js,浏览到一半

发现页面的浏览数是通过leancloud-page-views-container节点修改

页面检查了下,发现设置为不显示

按我的理解,因为api已经封装好了

而且阅读数量即使为0,也应该正常显示

image-20230120121959184

然后就去阅读模板文件meta-top.ejs,找到对应代码

image-20230120122401674

由于不懂ejs,但其实跟js很像,所以大致还是看的懂

这里是去读取设置的配置信息,根据配置信息,决定采用busuanzi还是leancloud的数据显示

但不明白为什么样式设置为不显示,所以以为是这里产生的Bug

一开始想改这里,但觉得的主题的开发者水平比我高那么多,应该不会犯这种错误

我关注的一个博主:也谈钱

讲过一个观点

如果两个人一个水平高、一个水平低,观点相反,谁正确的概率大?

高水平的那个。

当自己的答案和高水平人的答案相反时,果断放弃自己的答案,选择那个自己最初认为是错误的、来自高水平人的答案。

所以我觉得应该是我漏掉了什么,回过头看leancloud.js

继续往下翻看,找到问题所在

有读取idkeyserverUrl,而我serverUrl没有填写

image-20230120123222426

这里也吐槽下,idkey不填写会抛出异常,serverUrl却不会

其实中途还以为是封装的api地址错误

想着去修改api地址,因为跟api地址不同………..

理解是api请求地址+id+key,然后因为以为是封装好的,所以要修改js里面,而没意识到外面没填写

……

问题解决,总的来说,还是多查找资料、多思考

silhouette_stairs_sun_213031_1280x720


Hexo_解决Fluid主题阅读次数不显示问题
https://linguoguang.com/2023/01/19/Hexo_解决Fluid主题阅读次数不显示问题/
作者
linguoguang
发布于
2023年1月19日
许可协议