2023/01/09 Update#
Today I found that the Butterfly documentation introduces the configuration options for custom CDN, which can be completed with simple configuration, so what was written before is
superfluous
, and has little reference value.
![image-20230110005050004](/_next/image?url=https%3A%2F%2Fimage.cpen.top%2Fimage%2F202301100050094.png&w=3840&q=75)
The CDN acceleration of cdn.staticfile.org
in the official example is provided by Qiniu Cloud, supported by the technical community Juejin, and can be used directly.
Here is a personal example (theme configuration file):
# CDN
# Don't modify the following settings unless you know how they work
# Please do not modify unless necessary
CDN:
# The CDN provider of internal scripts (CDN configuration for internal js of the theme)
# option: local/jsdelivr/unpkg/cdnjs/custom
# Dev version can only choose. (The dev version of the theme can only be set to local)
internal_provider: local
# The CDN provider of third-party scripts (CDN configuration for third-party js)
# option: local/jsdelivr/unpkg/cdnjs/custom
# when set it to local, you need to install hexo-butterfly-extjs
# third_party_provider: jsdelivr
third_party_provider: custom
# Add version number to CDN, true or false
version: false
# Custom format
# For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
custom_format: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
If you want to use elemecdn, I'm not sure how to write the custom_format configuration item. I tried writing https://npm.elemecdn.com/${name}${verType}/${file}
or https://npm.elemecdn.com/${cdnjs_name}/${version}/${min_cdnjs_file}
but both failed.
If you want to use elemecdn, the Butterfly documentation provides the format:
The following steps are outdated
Introduction#
The blog loaded abnormally, and f12 found that https://unpkg.com/swiper/swiper-bundle.min.js (main reason) and https://unpkg.com/@fancyapps/ui/dist/fancybox.umd.js reported 520 (a 520 error occurs when the origin server returns a blank, unknown, or unexpected response to the CDN, which usually returns 200).
Based on this, I had the idea of switching CDN. The Butterfly official tutorial introduced options like local/jsdelivr/unpkg/cdnjs/custom, none of which were what I wanted, and I saw others using Element CDN, so I wanted to learn about it.
Steps#
Refer to the articles: Butterfly Official Tutorial #CDN, Anzhi Fish - Available CDN Compilation, Zhang Hong Heo - Butterfly CDN Link Change Guide
Modify the source code:
-
Modify themes/butterfly/scripts/events/cdn.js, add the elemecdn field.
elemecdn: `https://npm.elemecdn.com/${name}${verType}/${file}`,
-
Modify _config.butterfly.yml, CDN.third_party_provider.
I checked the network in f12, and there were no exceptions after the replacement.
-
According to Zhang Hong Heo: Butterfly CDN Link Change Guide, replace the CDN links as needed (
note the variable names, for example, butterfly v4.4.0 fontawesome is written as fontawesomeV6 to take effectButterfly v4.8.0 variable names have been changed to fontawesome).CDN: option: # Zhang Hong Heo https://blog.zhheo.com/p/790087d9.html jquery: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js pjax: https://npm.elemecdn.com/pjax@latest/pjax.min.js sharejs: https://lib.baomitu.com/social-share.js/1.0.16/js/social-share.min.js sharejs_css: https://lib.baomitu.com/social-share.js/1.0.16/css/share.min.css gitalk: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/gitalk/1.7.2/gitalk.min.js gitalk_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/gitalk/1.7.2/gitalk.min.css valine: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/valine/1.4.16/Valine.min.js disqusjs: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/disqusjs/1.3.0/disqus.js disqusjs_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/disqusjs/1.3.0/disqusjs.css waline: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/waline/1.5.4/Waline.min.js lazyload: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.iife.min.js instantpage: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js typed: https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/typed.js/2.0.12/typed.min.js # fancybox_css: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css # fancybox: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js medium_zoom: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/medium-zoom/1.0.6/medium-zoom.min.js snackbar_css: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css snackbar: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js fontawesome: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css # fontawesomeV6: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css # translate: https://npm.elemecdn.com/js-heo@1.0.6/translate/tw_cn.js # Not consistent with the original theme file aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css aplayer_js: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js meting_js: https://npm.elemecdn.com/js-heo@1.0.12/metingjs/Meting.min.js prismjs_js: https://npm.elemecdn.com/prismjs@1.1.0/prism.js prismjs_lineNumber_js: https://npm.elemecdn.com/prismjs/plugins/line-numbers/prism-line-numbers.min.js prismjs_autoloader: https://npm.elemecdn.com/prismjs/plugins/autoloader/prism-autoloader.min.js justifiedGallery_js: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js justifiedGallery_css: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.css #twikoo: https://npm.elemecdn.com/twikoo@1.6.8/dist/twikoo.all.min.js