06_Hexo-elemecdn 加速 Butterfly 第三者リソース

2023/01/09 更新#

今日は Butterfly ドキュメントでカスタム CDN の設定項目が紹介されているのを見つけました。簡単な設定で要件を満たすことができますので、以前書いたものは 蛇足 です。参考価値はあまり高くありません。

公式サンプルの cdn.staticfile.org CDN 加速は七牛クラウドによって提供されており、技術コミュニティの掘金がサポートしています。直接入力して使用できます。

個人の例は以下の通りです（テーマ設定ファイル）

# CDN
# 以下の設定は、動作を理解している場合を除き、変更しないでください
# 非必要請不要修改
CDN:
  # 内部スクリプトのCDNプロバイダー (テーマ内部 js の cdn 設定)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev版はlocalにしか設定できません。
  internal_provider: local

  # サードパーティスクリプトのCDNプロバイダー (第三方 js の cdn 設定)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # localに設定した場合、hexo-butterfly-extjsをインストールする必要があります。
  # third_party_provider: jsdelivr
  third_party_provider: custom

  # CDNにバージョン番号を追加する、trueまたはfalse  
  version: false

  # カスタムフォーマット
  # 例: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  custom_format: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}

elemecdn を使用したい場合、custom_format の設定項目はどう書けばいいのか私もわかりません。https://npm.elemecdn.com/${name}${verType}/${file} または https://npm.elemecdn.com/${cdnjs_name}/${version}/${min_cdnjs_file} と書いても失敗しました。

elemecdn を使用したい場合、Butterfly ドキュメントでフォーマットが示されています：

以下の手順は古くなっています

前言#

ブログが異常に読み込まれ、f12 で https://unpkg.com/swiper/swiper-bundle.min.js （主な原因）と https://unpkg.com/@fancyapps/ui/dist/fancybox.umd.js が 520 を返しているのを発見しました（520 は、ソースサーバーが CDN に空白、未知、または予期しない応答を返すときに発生します）、通常は 200 を返します。

これを基に CDN を変更するアイデアが生まれました。butterfly 公式チュートリアルでは local/jsdelivr/unpkg/cdnjs/custom などの選択肢が紹介されていますが、どれも求めているものではありませんでした。他の人が使用している Element CDN を見て、学んでみました。

手順#

参考記事：butterfly 公式チュートリアル #CDN、安知魚 - 利用可能な cdn 整理、張洪 Heo - Butterfly CDN リンク変更ガイド

ソースコードを変更します：

themes/butterfly/scripts/events/cdn.js を変更し、elemecdn フィールドを追加します。
```
     elemecdn: `https://npm.elemecdn.com/${name}${verType}/${file}`,
```
_config.butterfly.yml を変更し、CDN.third_party_provider を設定します。

f12 でネットワークを確認したところ、置き換え後に異常はありませんでした。

張洪 Heo：Butterfly CDN リンク変更ガイドに従って、必要に応じて cdn リンクを置き換えます（~~変数名に注意が必要です。例えば、butterfly v4.4.0 の fontawesome は fontawesomeV6 と書く必要があるようです~~ Butterfly v4.8.0 では変数名が fontawesome に変更されています）。

CDN:
  option:
    # 張洪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   # 与主题原文件不符
    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