还原问题

今天将博客的域名更换为 eternlty.top 后 ，用电脑预览时突然发现 Fancybox 的 css 样式显示异常，如图所示：

问题还原

当时的主题配置：

分析问题

通过开发者工具得知是网络的403问题。

开发者工具

解决问题

方案一（最漫长）

因为我是在博客迁移完成后才发现这个问题的，所以我先去查看了一下之前的配置，发现之前的配置是这样的：

1
2
3
4
5
option:
    fontawesome: https://registry.npmmirror.com/@fortawesome/fontawesome-free/6.7.2/files/css/all.min.css
    twikoo: https://registry.npmmirror.com/twikoo/latest/files/dist/twikoo.all.min.js
    fancybox: https://registry.npmmirror.com/@fancyapps/ui/latest/files/dist/fancybox/fancybox.umd.js
    fancybox_css: https://registry.npmmirror.com/@fancyapps/ui/latest/files/dist/fancybox/fancybox.css
  • 我先后尝试了以下两种方案，但都在电脑上生效，手机上未生效。
  • 最后我尝试 清理浏览器缓存，问题解决。

方案二（最快速）

给链接加上版本号

1
2
fancybox: https://registry.npmmirror.com/@fancyapps/ui/6.0.24/files/dist/fancybox/fancybox.umd.js
fancybox_css: https://registry.npmmirror.com/@fancyapps/ui/6.0.24/files/dist/fancybox/fancybox.css

是不是感觉很奇怪？我也不清楚怎么回事，但是我发现如果不加上版本号，就会出现403问题。

方案三（最直接）

删除引用的 cdn，使用默认cdn或更换其他cdn（如jsdelivr）。

1
2
3
4
5
option:
    fontawesome: https://registry.npmmirror.com/@fortawesome/fontawesome-free/6.7.2/files/css/all.min.css
    twikoo: https://registry.npmmirror.com/twikoo/latest/files/dist/twikoo.all.min.js
    #fancybox: https://registry.npmmirror.com/@fancyapps/ui/latest/files/dist/fancybox/fancybox.umd.js
    #fancybox_css: https://registry.npmmirror.com/@fancyapps/ui/latest/files/dist/fancybox/fancybox.css

结语

  • 如果执行了以上方案均未解决问题，建议使用多台设备进行测试。比如邀请你的同学帮帮忙，看看是否也会出现问题。
  • 若同学都没有问题，那么可能是你浏览器的问题，建议使用最新版本的浏览器。
  • 手机测试时最好使用自带的浏览器，而不是微信内嵌的浏览器