关于 Note 模块 - 标签外挂

Note 语法

从 next 移植而来,并进行了美化
在你的 Butterfly 主题的配置文件中找到或是添加这一段:

1
2
3
4
5
6
7
8
9
10
11
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or
style: flat
icons: true #是否开启图片
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

默认模板:

1
2
3
{% note [class] [no-icon] [style] %}
你的内容
{% endnote %}
中括号内容说明
名称 用法
class 【可选】标识,不同的标识有不同的配色
( default / primary / success / info / warning / danger )
no-icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style
(simple/modern/flat/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 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 提示块

隐藏标签

隐藏文字的按钮 hideInline

代码格式如下,仅限隐藏文字,content 不能包含英文逗号,可用 ‚ 代替逗号:

1
{% hideInline content,display,bg,color %}
模块 功能
content 要隐藏的文本内容
display 展示前按钮显示的文字(可选)
bg 按钮的背景颜色(可选)
color 按钮显示的文字的颜色(可选)
举个例子:
代码:
1
2
3
座右铭座右铭!! {% hideInline 今日事,今日毕,别点我,#FF7242,#fff %}
<p></p>
平平无奇。。。 {% hideInline 上面太花里胡哨了,上面真秀 %}
效果: 座右铭座右铭!! 今日事,今日毕

平平无奇。。。 上面太花里胡哨了

隐藏内容的区块 hideBlock

这个也是提供一个 按钮 ,而它可以隐藏 文字图片代码块 等,dispaly 不能包含英文逗号,可用 &sbquo; 代替:

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
模块 功能
content 要隐藏的内容
display 展示前按钮显示的文字(可选)
bg 按钮的背景颜色(可选)
color 按钮显示的文字的颜色(可选)
举个例子:
代码:
1
2
3
4
5
6
7
8
座右铭座右铭!! 
{% hideBlock 别点我,#FF7242,#fff %}
何其荣幸 何德何能
{% endhideBlock %}
平平无奇。。。
{% hideBlock 上面真秀 %}
上面太花里胡哨了
{% endhideBlock %}
效果:

座右铭座右铭!!

何其荣幸 何德何能

平平无奇。。。

上面太花里胡哨了

折叠框 hideToggle

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

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}
模块 功能
content 要隐藏的内容
display 展开前框中显示的文字(可选)
bg 框的背景颜色(可选)
color 框显示的文字的颜色(可选)
举个例子:
代码:
1
2
3
4
5
{% hideToggle Wecome to my Blog %}
欢迎欢迎欢迎
调皮豆干 の 博客
https://blog.catrol.cn
{% endhideToggle %}
效果:

Wecome to my Blog

欢迎欢迎欢迎
调皮豆干 の 博客
https://blog.catrol.cn

功能标签

mermaid 标签

mermaid 标签不允许嵌套于一些隐藏属性的标签外挂
例如: tag-hide 內的标签外挂和 tabs 标签外挂,也不能压缩代码
这会导致 mermaid 图示无法正常显示,使用时请留意。
使用 mermaid 标签可以绘制 Flowchart(流程图)Sequence diagram(时序图 )Class Diagram(类别图)State Diagram(状态图)Gantt(甘特图)Pie Chart(圆形图),具体可以查看 mermaid 文档
在 Butterfly 的主题配置文档中找到并修改或添加块:

1
2
3
4
mermaid:
enable: true
# built-in themes: default/forest/dark/neutral
theme: default

使用时写法如下:

1
2
3
{% mermaid %}
內容
{% endmermaid %}

举个例子:

1
2
3
4
5
6
7
8
{% mermaid %}
pie
title 项目语言比重
"Java" : 42.96
"C#" : 50.05
"Python" : 10.01
"Javascript" : 5
{% endmermaid %}

效果:

pie title 项目语言比重 "Java" : 42.96 "C#" : 50.05 "Python" : 10.01 "Javascript" : 5

Tabs 标签页标签

不多说,直接上效果:

代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

This is Tab 1.

This is Tab 2.

This is Tab 3.

代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

This is Tab 1.

This is Tab 2.

This is Tab 3.

代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

This is Tab 1.

This is Tab 2.

This is Tab 3.

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

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

<!-- tab 身份证@fas fa-address-card -->
**名字+icon**
<!-- endtab -->
{% endtabs %}
效果:

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

按钮标签 链接按钮标签

模板
1
{% 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
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,block %}
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,block center larger %}
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,block right outline larger %}
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,larger %}
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,blue larger %}
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,pink larger %}
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,red larger %}
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,outline purple larger %}
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,outline orange larger %}
{% btn 'https://blog.catrol.cn',调皮豆干,far fa-hand-point-right,outline green larger %}

效果: 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干

未完待续…