本文参照了Fomalhaut🥝大佬的魔改教程

魔改在这我只展示我本人正在应用的魔改，如果对其他的感兴趣，去看看Fomalhaut🥝大佬的魔改教程

如有侵权，联系删除

Hexo-butterfly美化基础教程(一)

Hexo-butterfly美化基础教程(二)

Hexo-butterfly魔改教程(一)

Hexo-butterfly魔改教程(二)

Hexo-butterfly魔改教程(三)

0x01前言

在我入坑butterfly的时候已经是更新到了4.13.0而网上很多大佬的文章是更适配4.5.0版本的。正如akilar大佬说的butterfly的作者Jerry经常直接修改源码，所以导致了很多魔改出现不适配的情况，但是我不学前端啊所以很多根本看不懂，期待有其他大佬能出最新教程吧！！！

0x02配置文件CDN替换

主题默认的CDN有：local、cdnjs、jsdelivr、unpkg等，但是速度偶读比较一般，要想提高部分标准静态资源的响应速度，走CDN是最好的办法，最好是在国内的CDN。

修改教程，我分享一下我目前在用的方案：

修改主题配置文件_config.butterfly.yml的CDN配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
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: cdnjs

  # 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:

  option:
    # main_css:
    # main:
    # utils:
    # translate: https://cdn1.tianli0.top/npm/js-heo@1.0.6/translate/tw_cn.js
    # local_search:
    # algolia_js: 
    algolia_search_v4: https://cdn.staticfile.org/algoliasearch/4.14.3/algoliasearch-lite.umd.min.js
    instantsearch_v4: https://cdn.staticfile.org/instantsearch.js/4.49.2/instantsearch.production.min.js
    pjax: https://lib.baomitu.com/pjax/0.2.8/pjax.min.js
    # 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
    # blueimp_md5:
    # 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
    twikoo: https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js
    # waline_js: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/waline/1.5.4/Waline.min.js
    # waline_css:
    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
    # mathjax: https://cdn.staticfile.org/mathjax/3.2.2/es5/mml-chtml.min.js
    # katex: https://lib.baomitu.com/KaTeX/latest/katex.min.css
    # katex_copytex:
    # mermaid:
    # canvas_ribbon:
    # canvas_fluttering_ribbon:
    # canvas_nest:
    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
    # pangu:
    fancybox_css_v4: https://cdn.staticfile.org/fancyapps-ui/4.0.31/fancybox.min.css
    fancybox_v4: https://cdn.staticfile.org/fancyapps-ui/4.0.31/fancybox.umd.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
    # activate_power_mode:
    # fireworks:
    # click_heart:
    # ClickShowText:
    fontawesomeV6: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
    # flickr_justified_gallery_js: https://cdn.staticfile.org/flickr-justified-gallery/2.1.2/fjGallery.min.js
    # flickr_justified_gallery_css: https://cdn.staticfile.org/flickr-justified-gallery/2.1.2/fjGallery.min.css
    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://cdn1.tianli0.top/npm/js-heo@1.0.12/metingjs/Meting.min.js
    # prismjs_js: https://cdn1.tianli0.top/npm/prismjs@1.1.0/prism.js
    # prismjs_lineNumber_js: https://cdn1.tianli0.top/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
    # prismjs_autoloader: https://cdn1.tianli0.top/npm/prismjs/plugins/autoloader/prism-autoloader.min.js

0x03butterfly部分文字颜色替换教程

这里我提供博主链接想改的话可以去看看

Butterfly主题修改颜色

0x04Twikoo评论系统部署(Vercel方式)

详见:Fomalhaut🥝博客魔改五

参考文字教程：

视频教程：

0x04网站性能优化

其实因为是用的阿里云全家桶，所以很多优化方案都可以直接在aliyun上实现

详见:Fomalhaut🥝网站性能优化的一些小技巧