本篇文章仅介绍简单的使用,详情请参照官方文档

写在最前面

在利用 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 pull

稳定版【建议】

在博客根目录里

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

升级方法:在主题目录下,运行git pull

此方法只支持 Hexo 5.0.0以上版本

在博客根目录里

npm i hexo-theme-butterfly

升级方法:在博客根目录下,运行npm update hexo-theme-butterfly

应用主题

    修改站点配置文件_config.yml,把主题改为butterfly

theme: butterfly

插件安装

此时在设置完主题后还是会因为缺少插件而打不开,这时我们要进行下载。

npm install hexo-renderer-pug hexo-renderer-stylus --save

主题升级

请参照官方文档中的做法

相关配置

请参照官方文档中的做法

标签外挂(Tag Plugins)

标签外挂是 Hexo 独有的功能,并不是标准的 Markdown 格式。
以下的写法,只适用于 Butterfly 主题,用在其它主题上不会有效果,甚至可能会报错。使用前请留意!

Note (Bootstrap Callout)

{% 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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

{% 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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

{% 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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

{% 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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

{% 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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

{% 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

你是刷 Visa 还是 UnionPay

新年快乐哦~

司机一滴酒,亲人两行泪

大风车吱呀吱哟哟地转

电量低,请充电

石头剪刀布

前端最讨厌的浏览器

{% 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

你是刷 Visa 还是 UnionPay

新年快乐哦~

司机一滴酒,亲人两行泪

大风车吱呀吱哟哟地转

电量低,请充电

石头剪刀布

前端最讨厌的浏览器

{% 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

你是刷 Visa 还是 UnionPay

新年快乐哦~

司机一滴酒,亲人两行泪

大风车吱呀吱哟哟地转

电量低,请充电

石头剪刀布

前端最讨厌的浏览器

{% 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

你是刷 Visa 还是 UnionPay

新年快乐哦~

司机一滴酒,亲人两行泪

大风车吱呀吱哟哟地转

电量低,请充电

石头剪刀布

前端最讨厌的浏览器

{% 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 %}

Gallery相册图库

<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相册

{% gallery %}
markdown 图片格式
{% endgallery %}

tag-hide(隐藏文字)

tag-hide 内的标签外挂 content 内都不建议有 h1 - h6 等标题。因为 Toc 会把隐藏内容标题也显示出来,而且当滚动屏幕时,如果隐藏内容没有显示出来,会导致 To 的滚动出现异常。

inline在文本里面添加按钮隐藏内容,只限文字(content不能包含英文逗号,可用&sbquo;)

{% hideInline content,display,bg,color %}
  • content:文本内容
  • display:按钮显示的文字(可选)
  • bg:按钮的背景颜色(可选)
  • color:按钮文字的颜色(可选)

block独立的 block 隐藏内容,可以隐藏很多内容,包括图片,代码块等等(display 不能包含英文逗号,可用&sbquo;)

{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content:文本内容
  • display:按钮显示的文字(可选)
  • bg:按钮的背景颜色(可选)
  • color:按钮文字的颜色(可选)

如果需要展示的内容太多,可以把它隐藏在收缩框里,需要时再把它展开。(display 不能包含英文逗号,可用&sbquo;)

{% hideToggle display,bg,color %}
content
{% endhideToggle %}
  • content:文本内容
  • display:按钮显示的文字(可选)
  • bg:按钮的背景颜色(可选)
  • color:按钮文字的颜色(可选)

mermaid

mermaid 标签不允许嵌套于 tag-hide 内的标签外挂和 tabs 标签外挂标签外挂,会影响显示。

使用 mermaid 标签可以绘制 Flowchart(流程图)、Sequence diagram(时序图 )、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和 Pie Chart(圆形图),具体可以查看mermaid文档

修改主题配置文件

mermaid:
enable: true
# built-in themes: default/forest/dark/neutral
theme: default
{% mermaid %}
内容
{% endmermaid %}

Tabs

{% 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.

Button

{% 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/留空

hexo的自带标签外挂

请参照Hexo官方文档中的做法

动画图标

注意:如果使用 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
然后在 DOM 元素的类名添加相应的动画即可。

On DOM load On hover On parent hover
faa-wrench animated faa-wrench animated-hover faa-wrench
faa-ring animated faa-ring animated-hover faa-ring
faa-horizontal animated faa-horizontal animated-hover faa-horizontal
faa-vertical animated faa-vertical animated-hover faa-vertical
faa-flash animated faa-flash animated-hover faa-flash
faa-bounce animated faa-bounce animated-hover faa-bounce
faa-spin animated faa-spin animated-hover faa-spin
faa-float animated faa-float animated-hover faa-float
faa-pulse animated faa-pulse animated-hover faa-pulse
faa-shake animated faa-shake animated-hover faa-shake
faa-tada animated faa-tada animated-hover faa-tada
faa-passing animated faa-passing animated-hover faa-passing
faa-passing-reverse animated faa-passing-reverse animated-hover faa-passing-reverse
faa-burst animated faa-burst animated-hover faa-burst
faa-falling animated faa-falling animated-hover faa-falling
faa-rising animated faa-rising animated-hover faa-rising