Hexo中butterfly主题下的fontawesome图标加载缓慢及显示方框问题的解决方案
背景
最近, 由于托管到jsdeliver网站的全球免费的静态资源域名cdn.jsdelivr.net在国内突然访问被限速(甚至某些地区打不开)。
造成在cdn.jsdelivr.net托管的css、js等文件也无法流畅访问, 进一步造成了 hexo博客框架下butterfly主题加载缓慢甚至有的内容无法正常加载。如下图:
对本博客最直接的影响就是, 加载时间延长, 很多主题内容无法流畅显示, 比如: cdn.jsdelivr.net下托管的fontawesome图标无法正常显示(显示方框很长时间后,才能加载出正常对应的图标)。
那么本文就以fontawesome图标为例, 讨论此类情况的整体解决方案, 其他类似问题都可参考本文解决。
解决方案
整体有两种方案
1、切换其他部署有所需目标资源的域名地址
优点: 省事儿, 省流量
缺点: 受外部影响
操作过程:
以fontawesome图标资源为例,其默认地址如图
先找到一个可以代替此地址的,部署有fontawesome的域名地址
自己找,本站不提供
将获得的地址,配置到
主题bufferfly下的_config.yml
文件中的对应位置,如下图所示。图中使用地址的是第二种本地部署方案,地址为本站服务器的本地地址,仅供本站站内使用,未公开(其他人即使在路径前面加上本站域名使用也只能加载到all.min.css下的方框)
保存配置文件后, 重新部署博客即可。
2、将此静态资源部署到本地
优点: 稳定,不受外部影响
缺点: 费事儿, 费流量
操作过程:
以fontawesome图标为例, 其默认地址如下图:
我们需要获得图中所画的静态资源, 下载到本地, 部署到博客中去
用npm来下载这个静态资源, 在终端中执行命令:
npm i @fortawesome/fontawesome-free
, 下载后的文件默认保存在对应工程的node_modules文件夹下。如下图:当然, 你也可以直接从jsdelivr或github等地址下载, 不过本文以npm为例, 用其他方式下载的, 请在下载后找到你所下载的资源文件,方便下一步
将下载的资源文件放到’hexo博客’或’butterfly主题’的
source目录下的任意位置
(本文以butterfly主题的source/img目录为例,如下图所示)当然,您可以选择符合要求的其他位置,
本人选主题目录是因为不想把这些静态资源本身加入到版本管理中(项目中hexo博客的source目录以及package.json文件未加入.gitignore忽略,而主题bufferfly的source目录在忽略范围内; 并且由于通过npm下载后已经在package.json文件中保存了下载地址,也就是说这个静态资源已经通过npm间接的管理到了我的主分支里,在其他机器上时,我只需要'拉取仓库'并'npm i'后, 将node_modules下的这个资源, 重新地复制粘贴一下就好了)
将最终的路径地址,配置到
主题bufferfly下的_config.yml
文件中的对应位置,如下图所示。保存配置文件后, 重新部署博客即可。
到此为止, 没意外的话, 您的问题已经解决了, 可以关闭此页面
如果您使用了版本管理器, 那么请注意 ignore 文件的忽略作用, 保证您的这次修复, 在您的存储库上进行了同步
解决过程
此部分为啰嗦闲话, 跳过即可
以fontawesome图标为例, 叙述从定位到解决的实际过程
定位问题
定位html元素, 发现其图标配置依赖的css文件
查找到使用了此css文件的js文件
打开此连接, 发现国内加载速度很慢,仅打开all.min.css就超过了10秒, 其父路径的其他依赖文件更是缓慢到了数分钟才能加载出来。而通过手上的境外服务器访问该地址几乎都是秒开。
(初步定位到了原因)
这个地址肯定要换, 本着尽量避免改动主题代码的原则(毕竟在主题源文件中改了哪个0文件,就得把改的这个文件纳入版本控制以备我多设备写博客时部署博客的一致性以及博客持久化的需求), 就先去翻看了butterfly的官方文档, 发现其配置文件_config.yml中果然暴露的有修改cdn地址的配置项(一下省了很多事儿)。
然后思考解决方案, 首先想得就是找个有同样资源的免费地址代替(通过搜索找到了几个, 虽然速度都明显加快很多, 但和之后的本地部署相比速度还是略慢, 且考虑到外部依赖的不稳定性, 故最终放弃了此方案), 然后就部署到本地, 并在对比后选择了本地部署方式
最后将整个过程整理分享于本文。(我平时不写博客框架相关的笔记, 是因为博客框架下的东西, 按框架下的文档来几乎不会遇到什么问题, 没必要画蛇添足。 这次书写此文的原因是, 刚好朋友也遇到了同样问题, 让我解决后分享下方案, 于是有了此文)