hexo+Butterfly搭建

花了一天的时间重新搭建了一个Butterfly主题的基于hexo和github page的静态博客。
现在这篇博客是搭建完成后发表的第一篇，主要用来回顾下坑，还有练习下语法啥的。

网上的教程很多，推荐一个亲身照着搭建然后成功的教程.hexo搭建教程

hexo搭建好后可以现在本地先开启服务跑一下，相关的命令可以参考hexo官网。hexo文档。

Butterfly主题安装比较轻松，直接照着文档安装就好了。butterfly主题文档

注意!搭建完成后需要在config.yml中配置好url，url:”https://xxx.github.io/"。
你的github仓库名为 “xxx.github.io “。

Butterfly相关

Butterfly主题跟其他主题不同的就是配色比较柔和，并且写markdown时需要用到一些标签外挂 。在这里就先列下表。这篇博客也试验了一些。

Note (Bootstrap Callout)

1
2
3
{% 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

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
{% note simple %}
默认 提示块标籤
{% 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 %}

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

modern

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

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

flat

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

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

disabled

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

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

no-icon

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

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

1
2
3
{% 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

modern

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

flat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' flat%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

disabled

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' disabled %}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

no-icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue no-icon %}
2021年快到了....
{% endnote %}
{% note pink no-icon %}
小心开车 安全至上
{% endnote %}
{% note red no-icon %}
这是三片呢？还是四片？
{% endnote %}
{% note orange no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple no-icon %}
剪刀石头布
{% endnote %}
{% note green no-icon %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

tag-hide

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标籤外挂。

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

1
{% hideInline content,display,bg,color %}

*content: 文本内容
*display: 按钮显示的文字(可选)
*bg: 按钮的背景颜色(可选)
*color: 按钮文字的颜色(可选)

Demo

1
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

哪个英文字母最酷？ 因为西装裤(C装酷)
按钮显示的文字在第几个 第三个
答案显示在第几个 第二个

block独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等

( display 不能包含英文逗号，可用‚)

Demo

1
2
3
4
查看答案
{% hideBlock 查看答案 %}
傻子，怎么可能有答案
{% endhideBlock %}

查看答案

傻子，怎么可能有答案

1
Hello World

如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。

( display 不能包含英文逗号，可用‚)

Demo

1
2
3
4
5
6
7
8
9
10
{% hideToggle Butterfly安装方法 %}
在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}
查看Butterfly安装方法

在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

Tabs

Demo-自定义Tab名 + 只有icon + icon和Tab名

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

Button

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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/留空

Demo

1
2
3
4
5
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}

This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

1
2
3
4
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block center larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block right outline larger %}

Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
8
9
10
<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

label

高亮所需的文字

1
{% label text color %}
参数 解释
text 文字
color 【可选】背景颜色，默认为 default default/blue/pink/red/purple/orange/green

Demo

1
2
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

差点忘记了，文章的开头相关配置还没搞。。

Front-matter

Front-matter 是 markdown 文件最上方以 — 分隔的区域，用于指定个别档案的变数。

  • Page Front-matter 用于页面配置
  • Post Front-matter 用于文章页配置
Page Front-matter
写法 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标籤、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块(默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katexe 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

这表格写的也太费劲了。。。

Post Front-matter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
title	【必需】文章标题
date	【必需】文章创建日期
updated	【可选】文章更新日期
tags	【可选】文章标籤
categories	【可选】文章分类
keywords	【可选】文章关键字
description	【可选】文章描述
top_img	【可选】文章顶部图片
cover	【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments	【可选】显示文章评论模块(默认 true)
toc	【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number	【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple	【可选】显示 toc 简洁模式
copyright	【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author	【可选】文章版权模块的文章作者
copyright_author_href	【可选】文章版权模块的文章作者链接
copyright_url	【可选】文章版权模块的文章连结链接
copyright_info	【可选】文章版权模块的版权声明文字
mathjax	【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex	【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer	【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink	【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside	【可选】显示侧边栏 (默认 true)

本文关于标签的案例等等基本参照Butterfly教程，可以点击小标题直接跳转到Butterfly相关文档。
先这么着吧，over