JsDeliver又双叒叕炸啦！

最近一段时间JsDeliver的CDN有毒吧，导致我博客样式经常加载不出来，或者很慢很卡。我可是打算用这个博客养老的啊，我是不是得把引用的文件一个个下载到本地，万一哪天它彻底芭比Q了呢……

原来它炸了，它挂了，它凉了，它被墙了！

DarkAthena（2022-03-08）：众所周知,在去年年底,知名的免费cdn服务提供商jsdelivr由于大陆域名备案的问题,没有国内的CDN加速了,目前都只能解析到海外,不但速度慢,还会偶发性无法连接到服务器。因此国内超多网站都受到了影响。

匿名用户（2022-05-20）：虽然很遗憾，但是可以确定目前是被墙了。查一下会发现在去年年底备案被吊销，在4月底出现了dns被污染后又被取消的情况，然后在四天前再次有人发现dns被污染。（本来想说点其他的啥的，但是感觉说啥都没意义，所以删掉了）

无语和生气解决不了任何问题，来吧，开干，说怎么补救？

我能想到的有两种解决方法：

  1. 资源本地化：从jsdelivr获取的文件都下载到服务器本地
  2. 资源替换：把CDN更换为其他能用的 jsdelivr 链接地址

两种方法选择其一即可。

一、资源本地化

看到一篇DarkAthena的博文是用Python批量下载文件，我也不会用啊，还是得手动一个个下载。用 VScode 搜索，好家伙，有40多个jsdelivr外链，但考虑到这种方法安全稳定，我最终还是选择的这种方法。

  1. 打开 themes/butterfly/source/ 文件夹下，新建一个CDN文件夹。
  2. 备份主题配置文件 themes/butterfly/_config.yml 防止意外情况
  3. 打开特殊网络，科学上网你懂得，不然可能访问不到文件
  4. 打开 _config.yml 拉到最下面CDN配置区，把每一个jsdelivr外链都复制到浏览器打开并保存。在保存时候可以根据作者的功能注释创建几个子文件夹，不至于接下来要下载的JS和CSS等文件全都处于CDN文件夹中，分不清谁是谁。比如我的CDN文件夹结构这样划分的： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    - CDN
        - aplayer
        - background_effect
        - comments
        - count
        - effect
        - fontawesome
        - justifiedGallery
        - math
        - photo
        - pjax
        - Prism.js
        - search
        - share
        - snackbar
  5. 现在注释掉 _config.yml 原来的在线引用链接，并用相对定位的方式替换为咱刚刚下载的本地文件，比如原来是： 
    1
    2
    3
    4
    5
    # search
    local_search: /js/search/local-search.js
    algolia_js: /js/search/algolia.js
    algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js
    algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
    修改完后变成了： 
    1
    2
    3
    4
    5
    6
    7
    # search
    local_search: /js/search/local-search.js
    algolia_js: /js/search/algolia.js
    algolia_search: /CDN/search/instantsearch.min.js
    algolia_search_css: /CDN/search/instantsearch.min.css
    # algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js
    # algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
    至于为什么不把已经没用的jsdeliver链接删除，而是注释掉，个人习惯，你想删也可以，做好备份就行了。

全部下载并替换完之后，在博客打开F12控制台查看报错，是否有漏掉的未引用文件，一个个下载到本地即可。

四十多条引用链接全部保存为本地资源后，再也不应担心CDN问题啦~

由于修改了配置文件，别忘了hexo clean然后重新编译！

二、资源替换

  • 由于cdn.jsdelivr.net挂了，目前能用的jsdelivr链接有： 
    1
    2
    gcore.jsdelivr.net
    fastly.jsdelivr.net

在主题配置文件 themes/butterfly/_config.yml 的最下面是配置CDN的地方。

新版butterfly cdn配置页面，在 _config.yml 底部的 option 区域，由于我搭建博客比较早（主题版本是3.8.3），和目前比较新的版本的可能有些不同之处。以下是部分可替换的CDN，测试能正常访问后根据需求选择性替换即可。（替换前先看看能否访问）

  • 带npm的链接自己用下面链接替换即可

    1
    2
    3
    4
    https://npm.elemecdn.com
    https://unpkg.com/
    演示:https://unpkg.com/@waline/client@v2/dist/waline.js
    记住/后不带npm/

  • jquery

    1
    https://npm.elemecdn.com/jquery@3.2.1/dist/jquery.min.js

  • pjax

    1
    https://npm.elemecdn.com/pjax/pjax.min.js

  • waline

    1
    2
    https://unpkg.com/@waline/client@v2/dist/waline.js
    https://unpkg.com/@waline/client@v2/dist/waline.css

  • fontawesome

    1
    https://use.fontawesome.com/releases/v6.0.0/css/all.css

  • fancybox

    1
    https://npm.elemecdn.com/@fancyapps/ui/dist/fancybox.css

参考内容：

DarkAthena（2022-03-08）：有不少程序员习惯使用国外的免费服务,比如github和本文中提到的jsdelivr,大家也应该已经发现了这两个东西在国内已经是属于间歇性抽风的状态了。当前国际形势越来越紧张,把东西放在国外的服务器上所要承担的风险越来越大,也应该要考虑将国外服务器上的东西迁移回本国了,否则哪天一个制裁,轻则断连,中则账号拉黑,重则把你数据直接删了也说不定。