起因

最近很无奈懒猫,要不就是懒猫的博客音乐的js出现问题,导致博客音乐不能用;
要不就是整个博客的js出现问题,导致博客图片,样式等都没法加载出来 🤕
我一开始都还没注意,一直开着梯子,要就是缓存在,直到懒猫的另外一台没梯子访问时才发现,cdn.jsdelivr.net这个家伙国内有罢工了,字体资源、CSS 和 JS 文件都无法访问,挂梯子后页面恢复正常。
果然别人的总是有风险,一想到只要别人想,随时修改js代码也很危险,几不稳定,又不安全,所以懒猫整体给它了换了。

一推js,css 404 触目惊心啊

过程查找解决方案

jsDelivr 是一款开源的免费公共 CDN,可以加速对 npm、GitHub 和 WordPress 上面静态资源的访问。
通过 jsDelivr 引用网站所需的 CSS 和 JS 文件,可以避免直接向服务器请求资源,利用 CDN 加速网站的访问。
然而,可能是 jsDelivr 提供的加速功能被一些用户拿来分发不和谐的内容等原因,2021 年 12 月 20 日,jsDelivr 在大陆的 CDN 节点被关闭,ICP 备案被注销,2022 年 4 月 28 日遭到 DNS 污染,自此大陆无法正常访问 jsDelivr,导致大批网站工作失常。
jsDelivr 进出大陆的始末sDelivr域名遭到DNS污染。

搜到的解决方法有三种:

  1. 使用 cdn.jsdelivr.net 未受污染的子域:

    • 由 Fastly 提供 fastly.jsdelivr.net
    • 由 gcore 提供 gcore.jsdelivr.net
    • 由 CloudFlare 提供 CloudFlare.jsdelivr.net
  2. 使用国内的静态库:

    • 七牛云和掘金的静态资源 cdn.staticfile.org
    • 字节跳动静态资源公共库 cdn.bytedance.com
    • 360 前端静态资源库 cdn.baomitu.com
  3. 挂梯子一个个下载到本地放到自己的cdn或网站上请求访问。

实际使用后方案

  1. 第一个方案说实话换了是可以用,但还是要挂梯子,基本还回到了原点,或许也是因为某些原因展示国内没法访问,即便这样懒猫认为不怎么样实际问题根本没得到解决。(不举荐

  2. 使用了国内的静态库,不错都有访问很快,都是大公司还是可以信的,但是懒猫没选,主要相关的js,css,font存放名称都有了调整,导致懒猫也要对很多文件的js,css,font进行域名调整,但框架又是统一访问,通过变量加载导致懒猫要更改博客底层,虽然可以改单没必要不是吗!!!(可以解决,但对懒猫当前不太友好,但东西其实还在被人手上)

    举例子:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    **国外的**
    https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css
    https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js
    https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js
    # 搜索相关
    https://cdn.jsdelivr.net/npm/art-template@4.13.2/lib/template-web.min.js
    https://cdn.jsdelivr.net/npm/fuse.js@6.4.6/dist/fuse.min.js
    # 页面相关
    https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js
    https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js
    https://cdn.jsdelivr.net/npm/prismjs@1.23.0/components/prism-core.min.js
    https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    **国内的**
    https://cdn.staticfile.org/KaTeX/0.15.6/katex.min.css
    https://cdn.staticfile.org/KaTeX/0.15.6/katex.min.js
    https://cdn.staticfile.org/KaTeX/0.15.6/contrib/auto-render.min.js
    # 搜索相关
    https://cdn.staticfile.org/art-template/4.13.2/lib/template-web.min.js
    https://cdn.staticfile.org/fuse.js/6.6.2/fuse.min.js
    # 页面相关
    https://cdn.staticfile.org/medium-zoom/1.0.6/medium-zoom.min.js
    https://cdn.staticfile.org/lazysizes/5.3.2/lazysizes.min.js
    https://cdn.staticfile.org/prism/1.28.0/components/prism-core.min.js
    https://cdn.staticfile.org/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js

    差距还是很大的,同时框架又是统一访问,通过变量加载:

  3. 挂梯子一个个下载到本地放到自己的cdn或网站上请求访问。(懒猫的选择)

这样对懒猫最初的安全,得到保证,在网络还是现实,不管需不要都要给自己留一手不是吗。懒猫在梯子的帮住下,一点点下载到自己访问域名下,虽然也是很大工作量(10分钟),但是懒猫还是很开心的。再也不会被拿捏不是吗。
当然还有很重要的一点js没有额外的请求其他js,这点很重要各位小伙伴吗,如果你们要下到自己本地首先看看js中是否有其他请求,要会很麻烦下了也没用的哦!

至此博客又能在不挂梯子的情况下正常显示✌。如果有更好的方法(例如字体方面的)还请小伙们指点