解决Butterfly主题图标不显示问题

原文：https://blog.c12th.cn/archives/4.html

前言

五天前 jsdelivr 突然不能用了，导致一些借助cdn加速的资源也用不了了，现在 jsdelivr 也是属于不稳定的状态。 这几天感觉 jsdelivr 变稳定了？ 我尝试过换cdn，但除了图标外其他都能正常使用，唯独图标不能正常显示。 这里分享下解决方法。

主题作者在 4.3.0 版本发布了可以换源的方法！ 这里分享从 4.2.0 以下 && 4.2.0 及以上 版本的解决方法

---

解决方法

主题 4.3.0 及以上

• 作者在 4.3.0 版本发布了 CDN 可一鍵配置 cdnjs 或 unpkg 这一设定，也就是说我们除了可以调回本地外， 还能直接换源 ，换源会比本地调用要快很多。

CDN:
  # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev version can only choose. ( dev版的主題只能設置為 local )
  internal_provider: local

  # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # when set it to local, you need to install hexo-butterfly-extjs
  third_party_provider: jsdelivr

这里还是推荐用 unpkg 的加速源

主题 4.2.0 及以上

• 主题作者在 4.2.0 版本发布了 cdn 可一鍵設置 本地文件/可單獨配置主題文件，第三方文件的 cdn 这一设定，也就是说我们在 cdn 无法使用 的情况下可以调回本地。

方法之一

1. 下载 插件

npm install hexo-butterfly-extjs

2. 修改 [Blogroot]\themes\butterfly\ _config.yml 配置文件 即可

-   third_party_provider: jsdelivr 
+   third_party_provider: local

主题 4.2.0 以下

• 由于 4.2.0 以下 版本无法调回本地，这里使用 cdnjs 。(由于 cdnjs.cloudflare.com 被影响了，需要用加速，所以直接参考 方法二 )

方法一 (不推荐)

1. 查找当前主题使用 fontawesome 的版本号，在 cdnjs 里 搜索

2. 如：我当前主题 3.7.0 ，用的是 fontawesome 6.1.1 的版本，替换链接 即可 (如不清楚当前主题使用哪个版本，需下载 fontawesome 原文件查看，请自行挖掘如何下载)

-   fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
+   fontawesome: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css

3. 由于 cdnjs.cloudflare.com 被影响了，需要用加速才能使用 ， 加速方法参考下面链接 ， 能访问 Github 就能使用，非魔法

• 如何优雅的加速Github 不是我没发是没过审

方法二 (推荐)

• 从原链接可以看出，除了用 jsdelivr 的加速源，还能使用 unpkg 的加速源

1. 在 fontawesome 的 npm仓库 里 查找对应版本

2. 三选一 (当前主题 3.7.0 ，用的是 fontawesome 6.1.1 的版本)

  fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css   # jsdelivr
  fontawesome: https://unpkg.com/@fortawesome/fontawesome-free@6.1.1/css/all.min.css        # unpkg
  fontawesome: https://npm.elemecdn.com/@fortawesome/fontawesome-free@6.1.1/css/all.min.css	# 部分会屏蔽

---

补充

其实还可以 自行搭建cdn ，另外还有别的方法没有使用过，可自行尝试挖掘。

---