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

文章目录

  • 原文:https://blog.c12th.cn/archives/4.html
  • 前言
  • 解决方法
    • 主题 4.3.0 及以上
    • 主题 4.2.0 及以上
      • 方法之一
    • 主题 4.2.0 以下
      • 方法一 (不推荐)
      • 方法二 (推荐)
  • 补充

原文: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 可一鍵配置 cdnjsunpkg 这一设定,也就是说我们除了可以调回本地外, 还能直接换源 ,换源会比本地调用要快很多。
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
  1. 修改 [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
  1. 由于 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/[email protected]/css/all.min.css        # unpkg
  fontawesome: https://npm.elemecdn.com/@fortawesome/[email protected]/css/all.min.css	# 部分会屏蔽

补充

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


你可能感兴趣的:(实用小技巧,分享,经验分享,其他)