在利用 hexo 和 Github Page 搭建好博客后，会发现系统提供的主题都是一样的，看着感觉不太舒服，这时候我们可以选择自己利用 JavaScript、css 等对博客的板块进行设计（自己做别人眼中的大佬~），也可以在 Github上搜索一些大佬们设计的主题，然后 clone 下来进行使用。
下面就来介绍一下利用 Butterfly 主题来继续完成博客的搭建。
稳定版【建议】
在博客根目录里
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
测试版
测试版可能存在 Bugs
最新的内容可在这里下载
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
稳定版【建议】
在博客根目录里
git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly
测试版
测试版可能存在 Bugs
最新的内容可在这里下载
git clone -b dev https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly
此方法只支持 Hexo 5.0.0以上版本
在博客根目录里
npm i hexo-theme-butterfly
升级方法：在博客根目录下，运行npm update hexo-theme-butterfly
修改站点配置文件_config.yml，把主题改为butterfly
此时在设置完主题后还是会因为缺少插件而打不开，这时我们要进行下载。
npm install hexo-renderer-pug hexo-renderer-stylus --save
标签外挂是 Hexo 独有的功能，并不是标准的 Markdown 格式。
{% note [class] [no-icon] [style] %} Any content (support inline tags too.io). {% endnote %}
名称
用法
class
【可选】标识（default / primary / success / info / warning / danger）
no-icon
【可选】不显示 icon
style
【可选】可以覆盖配置中的 style（simple / modern / flat / disabled）
simple
{% note modern %} 默认 提示块标签 {% endnote %} {% note default simple %} default 提示块标签 {% endnote %} {% note primary simple %} primary 提示块标签 {% endnote %} {% note success simple %} success 提示块标签 {% endnote %} {% note info simple %} info 提示块标签 {% endnote %} {% note warning simple %} warning 提示块标签 {% endnote %} {% note danger simple %} danger 提示块标签 {% endnote %}
modern
{% note modern %} 默认 提示块标签 {% endnote %} {% note default modern %} default 提示块标签 {% endnote %} {% note primary modern %} primary 提示块标签 {% endnote %} {% note success modern %} success 提示块标签 {% endnote %} {% note info modern %} info 提示块标签 {% endnote %} {% note warning modern %} warning 提示块标签 {% endnote %} {% note danger modern %} danger 提示块标签 {% endnote %}
flat
{% note flat %} 默认 提示块标签 {% endnote %} {% note default flat %} default 提示块标签 {% endnote %} {% note primary flat %} primary 提示块标签 {% endnote %} {% note success flat %} success 提示块标签 {% endnote %} {% note info flat %} info 提示块标签 {% endnote %} {% note warning flat %} warning 提示块标签 {% endnote %} {% note danger flat %} danger 提示块标签 {% endnote %}
disabled
{% note disabled %} 默认 提示块标签 {% endnote %} {% note default disabled %} default 提示块标签 {% endnote %} {% note primary disabled %} primary 提示块标签 {% endnote %} {% note success disabled %} success 提示块标签 {% endnote %} {% note info disabled %} info 提示块标签 {% endnote %} {% note warning disabled %} warning 提示块标签 {% endnote %} {% note danger disabled %} danger 提示块标签 {% endnote %}
no-icon
{% note no-icon %} 默认 提示块标签 {% endnote %} {% note default no-icon %} default 提示块标签 {% endnote %} {% note primary no-icon %} primary 提示块标签 {% endnote %} {% note success no-icon %} success 提示块标签 {% endnote %} {% note info no-icon %} info 提示块标签 {% endnote %} {% note warning no-icon %} warning 提示块标签 {% endnote %} {% note danger no-icon %} danger 提示块标签 {% endnote %}
{% note [color] [icon] [style] %} Any content (support inline tags too.io). {% endnote %}
名称
用法
color
【可选】颜色(default / blue / pink / red / purple / orange / green)
icon
【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style
【可选】可以覆盖配置中的 style（simple / modern / flat / disabled）
simple
{% note 'fab fa-cc-visa' simple %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' simple %} 新年快乐哦~ {% endnote %} {% note pink 'fas fa-car-crash' simple %} 司机一滴酒，亲人两行泪 {% endnote %} {% note red 'fas fa-fan' simple%} 大风车吱呀吱哟哟地转 {% endnote %} {% note orange 'fas fa-battery-half' simple %} 电量低，请充电 {% endnote %} {% note purple 'far fa-hand-scissors' simple %} 石头剪刀布 {% endnote %} {% note green 'fab fa-internet-explorer' simple %} 前端最讨厌的浏览器 {% endnote %}
modern
{% note 'fab fa-cc-visa' modern %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' modern %} 新年快乐哦~ {% endnote %} {% note pink 'fas fa-car-crash' modern %} 司机一滴酒，亲人两行泪 {% endnote %} {% note red 'fas fa-fan' modern %} 大风车吱呀吱哟哟地转 {% endnote %} {% note orange 'fas fa-battery-half' modern %} 电量低，请充电 {% endnote %} {% note purple 'far fa-hand-scissors' modern %} 石头剪刀布 {% endnote %} {% note green 'fab fa-internet-explorer' modern %} 前端最讨厌的浏览器 {% endnote %}
flat
{% note 'fab fa-cc-visa' flat %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' flat %} 新年快乐哦~ {% endnote %} {% note pink 'fas fa-car-crash' flat %} 司机一滴酒，亲人两行泪 {% endnote %} {% note red 'fas fa-fan' flat %} 大风车吱呀吱哟哟地转 {% endnote %} {% note orange 'fas fa-battery-half' flat %} 电量低，请充电 {% endnote %} {% note purple 'far fa-hand-scissors' flat %} 石头剪刀布 {% endnote %} {% note green 'fab fa-internet-explorer' flat %} 前端最讨厌的浏览器 {% endnote %}
disabled
{% note 'fab fa-cc-visa' disabled %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' disabled %} 新年快乐哦~ {% endnote %} {% note pink 'fas fa-car-crash' disabled %} 司机一滴酒，亲人两行泪 {% endnote %} {% note red 'fas fa-fan' disabled %} 大风车吱呀吱哟哟地转 {% endnote %} {% note orange 'fas fa-battery-half' disabled %} 电量低，请充电 {% endnote %} {% note purple 'far fa-hand-scissors' disabled %} 石头剪刀布 {% endnote %} {% note green 'fab fa-internet-explorer' disabled %} 前端最讨厌的浏览器 {% endnote %}
<div class ="gallery-group-main" > {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} </div >
name：相册图库名字
description：相册图库描述
link：链接到对应相册图库的地址
img-url：相册图库封面的地址
{% gallery %} markdown 图片格式 {% endgallery %}
tag-hide 内的标签外挂 content 内都不建议有 h1 - h6 等标题。因为 Toc 会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致 To 的滚动出现异常。
inline在文本里面添加按钮隐藏内容，只限文字(content不能包含英文逗号，可用‚)
{% hideInline content,display,bg,color %}
content：文本内容
display：按钮显示的文字(可选)
bg：按钮的背景颜色(可选)
color：按钮文字的颜色(可选)
block独立的 block 隐藏内容，可以隐藏很多内容，包括图片，代码块等等(display 不能包含英文逗号，可用‚)
{% hideBlock display,bg,color %} content {% endhideBlock %}
content：文本内容
display：按钮显示的文字(可选)
bg：按钮的背景颜色(可选)
color：按钮文字的颜色(可选)
如果需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。(display 不能包含英文逗号，可用‚)
{% hideToggle display,bg,color %} content {% endhideToggle %}
content：文本内容
display：按钮显示的文字(可选)
bg：按钮的背景颜色(可选)
color：按钮文字的颜色(可选)
mermaid 标签不允许嵌套于 tag-hide 内的标签外挂和 tabs 标签外挂标签外挂，会影响显示。
使用 mermaid 标签可以绘制 Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看mermaid文档
修改主题配置文件
mermaid: enable: true theme: default
{% mermaid %} 内容 {% endmermaid %}
{% tabs Unique name, [index] %} <!-- tab [Tab caption] [@icon] --> Any content (support inline tags too). <!-- endtab --> {% endtabs %} Unique name : Unique name of tabs block tag without comma. Will be used in #id's as prefix for each tab with their index numbers. If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes. Only for current url of post/page must be unique! [index] : Index number of active tab. If not specified, first tab (1) will be selected. If index is -1, no tab will be selected. It's will be something like spoiler. Optional parameter. [Tab caption] : Caption of current tab. If not caption specified, unique name with tab index suffix will be used as caption of tab. If not caption specified, but specified icon, caption will empty. Optional parameter. [@icon] : FontAwesome icon name (full-name, look like 'fas fa-font') Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'. Optional parameter.
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %} [url] : 链接 [text] : 按钮文字 [icon] : [可选] 图标 [color] : [可选] 按钮背景顔色(默认style时） 按钮字体和边框顔色(outline时) default/blue/pink/red/purple/orange/green [style] : [可选] 按钮样式 默认实心 outline/留空 [layout] : [可选] 按钮佈局 默认为line block/留空 [position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边 center/right/留空 [size] : [可选] 按钮大小 larger/留空
注意：如果使用 On parent hover 需要向父级元素添加 class 名 faa-parent animated-hover，其余两个不需要。另外可以通过添加faa-fast动画加速，faa-slow动画减速！！
添加方式很简单，引入一个 css 库：https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css
