修复Hexo图片弹出框Fancybox和评论插件Valine

文章目录

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：

<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 属性。

    $(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加载依赖的其它文件。

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

路径配置

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

// 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配置就可以用来加载这些非规范的模块。例如：

require.config({
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

加载其他文件

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

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的配套插件，下下篇博文讲）。

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