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

效果： 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干 调皮豆干

未完待续…