介绍

  1. 本篇文章主要是针对Butterfly主题自带样式（含部分魔改样式），魔改样式查看：Butterfly主题魔改样式查阅(魔改篇)
  2. 确保Butterfly主题是最新版、否则部分样式可能没有、DIY样式有源码查看选项
  3. 部分DIY 外挂标签教程 ：Tag外挂标签
  4. 我的魔改CSS: https://cdn.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/css/zykjcss.css
  5. Butterfly主题外挂标签教程：Butterfly主题外挂标签

Front-matter

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

  • Page Front-matter 用于 页面 配置
  • Post Front-matter 用于 文章页 配置

Page Front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:
limit:
  type:
  value:
---
参数解释
title【必需】页面标题
date【必需】页面创建日期
type【必需】标签、分类和友情链接三个页面需要配置
updated【可选】页面更新日期
description【可选】页面描述
keywords【可选】页面关键字
comments【可选】显示页面评论模块 (默认 true)
top_img【可选】页面顶部图片
mathjax【可选】显示 mathjax (当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex【可选】显示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside【可选】显示侧边栏 (默认 true)
aplayer【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开 (true/false) (默认为设置中 highlight_shrink 的配置)
random【可选】配置友情链接是否随机排序（默认为 false）
limit【可选】配置说说显示数量
limit.type【可选】配置说说显示数量的类型 （date 或者 num）
limit.value【可选】配置说说显示数量的值

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
24
25
26
27
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
abcjs:
noticeOutdate:
---
写法解释
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)
abcjs【可选】加载 abcjs (当设置 abcjs 的 per_page: false 时，才需要配置，默认 false )
noticeOutdate【可选】文章过期提醒 (默认为设置中 noticeOutdate 的 enable 配置)

markdown

markdown语法

标题

由于标题渲染会影响文章这里简单写一下。

要创建标题，请#在单词或短语的前面添加数字符号（）。您使用的数字符号的数量应与标题级别相对应。例如，要创建标题级别三（<h3>），请使用三个数字符号（例如### My Header）。

1
2
3
4
5
6
7
8
Markdown	         HTML	                          渲染输出

# Heading level 1	 <h1>Heading level 1</h1>	  标题级别1
## Heading level 2	 <h2>Heading level 2</h2>	  标题级别2
### Heading level 3	 <h3>Heading level 3</h3>	  标题级别3
#### Heading level 4	 <h4>Heading level 4</h4>	  标题级别4
##### Heading level 5	 <h5>Heading level 5</h5>	  标题级别5
###### Heading level 6	 <h6>Heading level 6</h6>	  标题级别6

着重

您可以通过使文本变为粗体或斜体来增加着重，

粗体

通过两个** 或者__。

I just love bold text.

I just love bold text.

1
2
3
I just love **bold text**.

I just love __bold text__.

斜体

通过两个* 或者_。

Italicized text is the cat’s meow.

Italicized text is the cat’s meow.

1
2
3
Italicized text is the *cat's meow*.

Italicized text is the _cat's meow_.

粗体和斜体

通过两个*** 或者___。

This text is really important.

This text is really important.

1
2
3
This text is ***really important***.

This text is ___really important___.

块引用

通过>。

Dorothy followed her through many of the beautiful rooms in her castle.

1
> Dorothy followed her through many of the beautiful rooms in her castle.

嵌套块引用: 通过个>>。

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

1
2
3
> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

清单

有序列表

通过数字+.。

默认

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

缩进

  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item
1
2
3
4
5
6
7
8
9
10
11
1. First item
2. Second item
3. Third item
4. Fourth item

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item

无序列表

通过-、*、+。

普通

  • First item
  • Second item
  • Third item
  • Fourth item

缩进

  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item
1
2
3
4
5
6
7
8
9
10
11
- First item
- Second item
- Third item
- Fourth item

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

高亮

1
通过 ``

高亮内容

代码块

1
通过 ``` ```
1
code

水平线

通过---、+++、___、***

删除线

通过两个~~

删除线

链接

通过[]()

我的博客

1
[我的博客](https://zykj.js.org)

图片

通过![图片描述](图片链接)

头像

1
![头像](https://gcore.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/img/avatar.png)

表格

SyntaxDescription
HeaderTitle
ParagraphText
1
2
3
4
| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

任务清单

任务列表使您可以创建带有复选框的项目列表。在支持任务列表的Markdown应用程序中，复选框将显示在内容旁边。要创建任务列表，请在任务列表项之前添加破折号（-）和方括号，并[ ]在其前面加上一个空格（）。要选择一个复选框，请x在方括号（[x]）之间添加in 。

  • Write the press release
  • Update the website
  • Contact the media
1
2
3
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Note

示例

simple样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

modern样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

flat样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

disabled样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

no-icon样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

使用方法

标签、自定义标签

更多内容查看：https://butterfly.js.org/posts/4aa8abbe/#Note-Bootstrap-Callout

1
2
3
{% note 样式参数 %}
文本内容
{% endnote %}

标签、自定义标签

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）

自定义icon

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

modern 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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 %}

自定义 icon

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

Label

示例

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

使用方法

标签

1
2
3
4
{% label text color %}

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

Tag-hide

示例

哪个英文字母最酷？ 因为西装裤(C装酷)

门里站着一个人? 闪

[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":"","title":""}]
查看代码
1
print("Hello World")

使用方法

Inline

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

Block

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

Toggle

( display 不能包含英文逗号，可用 &sbquo;)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Inline

  • content: 文本内容

  • display: 按钮显示的文字 (可选)

  • bg: 按钮的背景颜色 (可选)

  • color: 按钮文字的颜色 (可选)

Block

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

Inline

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

门里站着一个人? {% hideInline 闪 %}

Block

1
2
3
4
5
6
{% hideBlock 查看答案 %}
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
{% endgallery %}
{% endhideBlock %}

Toggle

1
2
3
4
5
{% hideToggle 查看代码 %}

print("Hello World")

{% endhideToggle %}

Button

示例

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

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

使用方法

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

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

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

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

Tabs

注意:这是Butterfly主题自带样式

示例

This is Tab 1.

This is Tab 2.

This is Tab 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% 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 curnett 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 curnett 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.

文档教程：https://butterfly.js.org/posts/4aa8abbe/#Tabs

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
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

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

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

注意:这是Butterfly主题自带样式

示例

Group Image Gallery
动漫

我喜欢的动漫

Group Image Gallery
明日方舟

我喜欢的手游

[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":"","title":""}]

使用方法

Gallery相册图库

1
2
3
4
5
<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相册

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}

Gallery相册图库

1
2
3
4
<div class="gallery-group-main">
{% galleryGroup '动漫' '我喜欢的动漫' '/Gallery/anime' https://api.paugram.com/wallpaper/?source=sina&category=us %}
{% galleryGroup '明日方舟' '我喜欢的手游' '/game/arknights/' https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/game/arknights.jpg %}
</div>

Gallery相册

1
2
3
4
5
6
7
8
9
10
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}

inlineImg

注意:这是Butterfly主题自带样式

https://butterfly.js.org/posts/4aa8abbe/#inlineImg

示例

你看我长得漂亮不

我觉得很漂亮

使用方法

主题中的图片都是默认以块级元素显示，如果你想以内联元素显示，可以使用这个标签外挂。

1
2
3
4
{% inlineImg [src] [height] %}

[src]      :    图片链接
[height]   ：   图片高度限制【可选】
1
2
3
4
5
你看我长得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 50px %}

timeline

注意:这是Butterfly主题自带样式

https://butterfly.js.org/posts/4aa8abbe/#timeline

示例

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

使用方法

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}
名称用法
title标题/时间线
colortimeline 颜色
default(留空) / blue / pink / red / purple / orange / green
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
{% timeline 2022 %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,blue %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,pink %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,red %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,purple %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,orange %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,green %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

注意:这是Butterfly主题自带样式

https://butterfly.js.org/posts/4aa8abbe/#flink

示例

友情链接
那些人，那些事
ZYKJ's Blog
ZYKJ's Blog
做个普普通通的人.
Hexo
Hexo
快速、简单且强大的网誌框架
网站
值得推荐的网站
Youtube
Youtube
视频网站
Weibo
Weibo
中国最大社交分享平台
Twitter
Twitter
社交分享平台

使用方法

可在任何界面插入类似友情链接列表效果

内容格式与友情链接界面一样，支持 yml 格式

1
2
3
{% flink %}
xxxxxx
{% endflink %}
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
{% flink %}
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: ZYKJ's Blog
      link: https://zykj.js.org
      avatar: https://cdn.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/img/avatar.png
      descr: 做个普普通通的人.
    - name: Hexo
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台
{% endflink %}

Mermaid

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

使用方法

在_config.Butterfly.yml开启Mermaid功能

1
2
3
4
5
6
7
8
9
10
# Mermaid
# https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # Write Mermaid diagrams using code blocks
  code_write: false
  # built-in themes: default / forest / dark / neutral
  theme:
    light: default
    dark: dark

写法：

1
2
3
{% mermaid '[config]' %}
内容
{% endmermaid %}
参数解释
config【可选】mermaid 图表配置, 以 JSON 格式书写，具体配置参数请参考mermaid 文档
1
2
3
4
5
6
7
8
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}

Chartjs

另一种方式添加图表

除了计算机编程外，我想不出还有其他让我感兴趣的工作。
我可以无中生有地创造出精美的范式和结构，
在此过程中也解决了无数的小谜团。
I can’t think of any other job other than computer programming that interests me.
I can create beautiful paradigms and structures out of nothing,
Countless small mysteries are also solved in the process.

使用方法

在_config.Butterfly.yml开启Chartjs功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# chartjs
# 参见 https://www.chartjs.org/docs/latest/
chartjs:
  enable: true
  # 除非你了解它们的工作原理，否则不要修改。
  # 默认设置仅在未指定 MD 语法时使用。
  # 图表的字体颜色
  fontColor:
    light: "rgba(0, 0, 0, 0.8)"
    dark: "rgba(255, 255, 255, 0.8)"
  # 图表的边框颜色
  borderColor:
    light: "rgba(0, 0, 0, 0.1)"
    dark: "rgba(255, 255, 255, 0.2)"
  # 雷达图和极区图的刻度标签背景颜色
  scale_ticks_backdropColor:
    light: "transparent"
    dark: "transparent"
参数解释
enable是否启用 chartjs
fontColor图表的字体颜色
borderColor图表的边框颜色
scale_ticks_backdropColor雷达和极区图表的刻度标签的背景颜色

写法：

1
2
3
4
5
6
{% chartjs [width, abreast, chartId] %}
<!-- chart -->
<!-- endchart -->
<!-- desc -->
<!-- enddesc -->
{% endchartjs %}
参数解释
width【可选】图表宽度
abreast【可选】是否并排显示，当你写了 , 使用并排模式，图标和描述将并排显示。abreast 为 true 时，需要配置 width 的值
chartid【可选】图表 ID
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
{% chartjs 40,true %}
<!-- chart -->
{
    "type": "pie",
    "data": {
        "labels": [
            "编程",
            "音乐",
            "阅读",
            "游戏",
            "健身",
            "旅游"
        ],
        "datasets": [
            {
                "label": "喜爱指数",
                "data": [
                    30,
                    24,
                    19,
                    14,
                    9,
                    4
                ],
                "backgroundColor": {
                    "dark-mode": [
                        "rgba(255, 99, 132, 0.5)",
                        "rgba(54, 162, 235, 0.5)",
                        "rgba(255, 206, 86, 0.5)",
                        "rgba(75, 192, 192, 0.5)",
                        "rgba(153, 102, 255, 0.5)",
                        "rgba(255, 159, 64, 0.5)"
                    ],
                    "light-mode": [
                        "rgba(255, 99, 132, 0.2)",
                        "rgba(54, 162, 235, 0.2)",
                        "rgba(255, 206, 86, 0.2)",
                        "rgba(75, 192, 192, 0.2)",
                        "rgba(153, 102, 255, 0.2)",
                        "rgba(255, 159, 64, 0.2)"
                    ]
                },
                "borderColor": {
                    "dark-mode": [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)"
                    ],
                    "light-mode": [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)"
                    ]
                }
            }
        ]
    },
    "options": {
        "plugins": {
            "legend": {
                "labels": {
                    "color": {
                        "dark-mode": "rgba(255, 255, 255, 0.8)",
                        "light-mode": "rgba(0, 0, 0, 0.8)"
                    }
                }
            }
        }
    }
}
<!-- endchart -->
<!-- desc -->
除了**计算机编程**外，我想不出还有其他让我感兴趣的工作。
我可以无中生有地创造出**精美的范式**和**结构**，
在此过程中也解决了无数的小谜团。
<span style="font-size:0.8em;color: var(--sep-secondtext);">I can't think of any other job other than **computer programming** that interests me.
I can create **beautiful paradigms** and **structures** out of nothing,
Countless small mysteries are also solved in the process.</span>
<!-- enddesc -->
{% endchartjs %}
📑 Butterfly主题魔改样式查阅(魔改篇)