关于 Note 模块 - 标签外挂 Note 语法 从 next 移植而来,并进行了美化 在你的 Butterfly 主题的配置文件中找到
或是添加
这一段:
1 2 3 4 5 6 7 8 9 10 11 note: style: flat icons: true border_radius: 3 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 %}
效果:
隐藏标签 隐藏文字的按钮 hideInline 代码格式如下,仅限隐藏文字,content 不能包含英文逗号,可用 ‚
代替逗号:
1 {% hideInline content,display,bg,color %}
模块
功能
content
要隐藏的文本内容
display
展示前按钮显示的文字(可选)
bg
按钮的背景颜色(可选)
color
按钮显示的文字的颜色(可选)
举个例子:
代码:
1 2 3 座右铭座右铭!! {% hideInline 今日事,今日毕,别点我,#FF7242,#fff %} <p > </p > 平平无奇。。。 {% hideInline 上面太花里胡哨了,上面真秀 %}
效果:
座右铭座右铭!! 别点我
今日事,今日毕
平平无奇。。。 上面真秀
上面太花里胡哨了
隐藏内容的区块 hideBlock 这个也是提供一个 按钮
,而它可以隐藏 文字
、图片
、代码块
等,dispaly 不能包含英文逗号,可用 ‚
代替:
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 %}
效果:
功能标签 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 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 标签页标签 不多说,直接上效果:
Demo1 - `默认`方式 Demo2 - 预设选择 `tabs` Demo3 - 没有预设 Demo4 - 自定义 Tab 名 icon
代码:
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 %}
效果:
代码:
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 %}
效果:
代码:
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 %}
效果:
代码:
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 %}
效果:
按钮标签 链接按钮标签 模板
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 %}
效果:
调皮豆干
调皮豆干
调皮豆干
调皮豆干
调皮豆干
调皮豆干
调皮豆干
调皮豆干
调皮豆干
调皮豆干
未完待续…