浮生一梦 / 2023.01.19

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

Tags： #软件  #Hexo  #问题 
Created： 
Updated：

参考链接

解决方法

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

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

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

view

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

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

leancloud

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

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

解决过程

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

个人以为是有什么讲究

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

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

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

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

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

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

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

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

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

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

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

有读取id、key，serverUrl，而我serverUrl没有填写

image-20230120123222426

这里也吐槽下，id和key不填写会抛出异常，serverUrl却不会

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

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

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

……

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

silhouette_stairs_sun_213031_1280x720