文章目录
  1. 1. $(…).fancybox is not a function
  2. 2. RequireJS
    1. 2.1. 入口文件
    2. 2.2. 路径配置
    3. 2.3. shim
    4. 2.4. 加载其他文件
  3. 3. av-min.js
  4. 4. 删除无用的配置和引用

由于发现之前 Hexo利用阅读更多的功能引流到微信公众号 文章里提到的阅读更多插件在本地ok,但是在部署以后却没法正常运作,于是乎就开始F12的Debug旅程。这期间发现了无数问题,耗时半天多,怎一个惨字了得。接下来,让我们接下来几篇博文一一讲述 😢

F12让我发现了很多报错,最神奇的是居然报了 av-min.js 找不到,以及 $(...).fancybox is not a function 这两个错误。

$(…).fancybox is not a function

这就很意外了,因为最近除了增加阅读更多的功能,Hexo博客本身我是几乎没有做改动的。但是我也不确定是什么时候出现的问题,所以第一想法是希望能找到有关的修改。

通过查询git日志,也没有什么有价值的线索。只能开始转向别的线路,看试错+分析能不能奏效。

期间测试了如果用 RequireJS 来处理加载的依赖,会不会容易找到问题所在。但实际情况是,处理到一半,发现改动的地方实在太多,工作量性价比太低了,最后放弃引入requirejs。但这一尝试却让我意外地确定了引入CDN托管的 fancybox v3.5.7 是真的可以正常加载。

那么接下来就是换掉原来本地引用的fancybox库,并修改相关的运行代码,测试一下是否正常工作。

CDN地址,来自BootCDN:

1
2
<link href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

然后我自己的主题没有在渲染的时候添加标签,是使用js后处理的图片弹出框。于是去掉了早期版本所使用的js调用,而是给标签加上 data-fancybox 属性。

1
2
3
4
5
6
7
8
9
    $(this).find('.fancybox').each(function(){
- $(this).attr('rel', 'article' + i);
+ $(this).attr('data-fancybox', 'article' + i);
});
});
- if($.fancybox){
- $('.fancybox').fancybox();
- }
});

测试一切正常,Next。

RequireJS

第一次真正使用 RequireJS 是在王老师团队里做区块链应用前端时,因为当时太懒不想学vue(说实在的,也是因为学了AngularJS以后,面目全非的2.0出来让我对这些迭代太快的新物种有所畏惧),就退而求其次,在原生js技术上引入一些小东西来构建自己更能把控的框架。而其中用来解决引用依赖的问题,就是 RequireJS 了。

RequireJS 依赖于一个重要的概念,AMD。对于浏览器,同步加载是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于”假死”状态。因此,浏览器端的模块,不能采用”同步加载”(synchronous),只能采用”异步加载”(asynchronous)。这就是AMD(Asynchronous Module Definition)规范诞生的背景。

入口文件

require.js在加载的时候会检查data-main属性,当RequireJS自身加载执行后,就会再次异步加载data-main属性指向的main.js。这个main.js是当前网页所有逻辑的入口,理想情况下,整个网页只需要这一个script标记,利用RequireJS加载依赖的其它文件。

1
<script data-main="scripts/main" src="js/require.js"></script>

路径配置

我比较惯于使用 require.config 进行统一配置,这样方便管理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// main.js
require.config({
paths:{
'moduleA':'lib/moduleA.min' // 注意,不要带.js后缀
}
})
require(['moduleA'], function(a){ // 这里表示function里的方法依赖于moudleA,并输出为变量a
console.log(a);
});

//moduleA-min.js
define(function(){
return "I am A.";
})

shim

有一些依赖于jQuery的插件本身是不符合AMD规范的,而shim配置就可以用来加载这些非规范的模块。例如:

1
2
3
4
5
6
7
8
9
10
11
require.config({
    shim: {
      'underscore':{
        exports: '_'
      },
      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }
    }
  });

加载其他文件

通过插件的支持,requirejs还可以做到一些其他的事情,例如加载文本类文件:

1
2
3
4
5
require(["some/module", "text!some/index.html", "text!some/style.css"],
function(module, html, css) {
console.log(...)
}
);

当然,最后我并没有用到 RequireJS。我的主题是依赖于 Jacman 大改的,而它又是依赖于早期的 Pacman 主题,除了模板十分零碎以外,脚本也按功能拆成很独立的文件,使得按requirejs加载的方式来处理会很麻烦。

av-min.js

刚看到报了 av-min.js 找不到的时候,我完全是懵的。因为实在不记得为什么会引用了 av-min.js 这个文件。当然,简单搜索项目,我就知道原来这是 Valine 所用到的 LeanCloud 基础库。

Valine 是一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统。搭建方便,无需梯子,而且小用量免费,实在是Hexo博客的不二之选。

如果没记错,10月份我还收到一条评论的邮件,但是此后就没有了。搜索了一下,是因为LeanCloud资源托管的域名和路径规则都变了,所以按理说引用这个新地址就可以了:

https://unpkg.com/leancloud-storage@4.12.2/dist/av-live-query-min.js

但是以防万一,我还是将文件下载下来,和Valine的文件一起放到了本地。网上可以直接搜索到,或者通过上面这个地址下载。我也在 二机联盟-知识星球 存了一份。

删除无用的配置和引用

当然,清理了一下,发现还有很多代码和引用都没用了,该删的都删了,他们都有可能拖慢访问速度。

例如,disqus(墙外无法访问)、duoshuo(已经倒了)、Baidu Image Plus(已经下线)、Baidu Share(后来处理了一下,能用了,下一篇博文说)、Live2D widget(修复了一下,不然很多报错,也没有再使用hexo的配套插件,下下篇博文讲)。

最后看着干净的控制台输出和网络请求,终于安心了🧐

♦ 本文固定连接:https://www.gsgundam.com/2022/2022-12-14-z23-fix-hexo-error-fancybox-valine/

♦ 转载请注明:GSGundam 2022年12月14日发布于 GSGUNDAM砍柴工

♦ 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。

♦ 原创不易,如果页面上有适合你的广告,不妨点击一下看看,支持作者。(广告来源:Google Adsense)