Hexo Butterfly主题 配置CDN

闲着没事按 F12 看了眼自己的站,发现居然依赖了这么多个外部网站

作为一个会把 Mathjax2.7.7 整个打包带走放在站里的人,这种事怎么能忍呢?

今天就简单记录一下我是怎么搞的,试了下可以看到现在只会调用自带的文件了

问了下大肥鱼,我这种方法其实就是 self-hosting,把所需的各种文件随着站点一起部署。

首先你需要有一个好的 Hexo 使用习惯,这里以 Butterfly 主题为例。

比如所有的配置应该在根目录下的 _config.butterfly.yml 文件进行配置,

最好再把主题目录下的配置文件直接清空,我不知道删除会不会有影响没试过。

比如在根目录的 source 文件夹下建一个存储自己所需文件的目录,我这里建的是 sourve/qwq 。

然后在根目录的 _config.yml 里面配置一下,如下(可参考 Hexo 添加 README 和 robots.txt 等文件)

skip_render: ["qwq/**/*", "README.md", "robots.txt", "CNAME"]

言归正传,我是在 qwq 目录下建了一个 qwq/cdn 的目录,在里面存储各种东西。

这里我们以 fancybox 这个插件或者说功能为例,当然你得配置里开了这个功能才行

在你的网站页面(建议无痕浏览)按 F12 看一下,忘截图了,应该默认调用了 jsdeliver 的 CDN

然后我们去找到 fancybox 的网站,这里就是上面那个链接直接点就行了,找到它的 github 仓库

或者你仔细看了一眼的话,它其实写了怎么配置,不过先把 github 上最新的 release 下载下来

我下载下来的是一个叫 ui-6.1.15.zip 的文件,解压以后改个名字叫 FancyappsUI

接着在 _config.butterfly.yml 文件最后面的 CDN 配置里加上这样的段落

fancybox: /qwq/cdn/FancyappsUI/dist/fancybox/fancybox.umd.js
fancybox_css: /qwq/cdn/FancyappsUI/dist/fancybox/fancybox.css

嗯,然后就搞定了,我不知道哪些文件没用哪些文件有用那就整个打包好了

不过这么搞的缺点在于,生成文件的时候会跳一大堆输出,看起来比较麻烦

如果搞不懂就去翻我 github 仓库吧,看看我扔了什么 CDN 文件上去