06_Hexo-elemecdn Accelerate Butterfly Third-party Resources

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.

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 effect~~ Butterfly 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