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 StackOverflow. # - disabled disable all CSS styles import of note tag. style:simple icons:false 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
<divclass="gallery-group-main"> {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} </div>
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 current 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 current 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.
Demo-默认选择第一项
1 2 3 4 5 6 7 8 9 10 11 12 13
{% tabs Top Stars %} <!-- tab --> Top 1 Simple <!-- endtab -->
<!-- tab --> Top 2 Zywoo <!-- endtab -->
<!-- tab --> Top 3 Niko <!-- endtab --> {% endtabs %}
Top 1 Simple
Top 2 Zywoo
Top 3 Niko
Demo-指定选择的项
1 2 3 4 5 6 7 8 9 10 11 12 13
{% tabs Top Stars, 3 %} <!-- tab --> Top 1 Simple <!-- endtab -->
<!-- tab --> Top 2 Zywoo <!-- endtab -->
<!-- tab --> Top 3 Niko <!-- endtab --> {% endtabs %}
Top 1 Simple
Top 2 Zywoo
Top 3 Niko
Demo-不选中
1 2 3 4 5 6 7 8 9 10 11 12 13
{% tabs Top Stars, -1 %} <!-- tab --> Top 1 Simple <!-- endtab -->
<!-- tab --> Top 2 Zywoo <!-- endtab -->
<!-- tab --> Top 3 Niko <!-- endtab --> {% endtabs %}
This is my website, click the button {% btn '#',Butterfly %} This is my website, click the button {% btn '#',Butterfly,far fa-hand-point-right %} This is my website, click the button {% btn '#',Butterfly,,outline %} This is my website, click the button {% btn '#',Butterfly,far fa-hand-point-right,outline %} This is my website, click the button {% btn '#',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
Demo
1 2 3
{% btn '#',Butterfly,far fa-hand-point-right,block %} {% btn '#',Butterfly,far fa-hand-point-right,block center larger %} {% btn '#',Butterfly,far fa-hand-point-right,block right outline larger %}
{% mermaid %} flowchart LR A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2] {% endmermaid %}
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Demo-时序图
1 2 3 4 5 6 7 8 9 10 11
{% mermaid %} sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! {% endmermaid %}
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Demo-甘特图
1 2 3 4 5 6 7 8 9 10
{% mermaid %} gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d {% endmermaid %}
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
Demo-类图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
{% mermaid %} classDiagram Class01 <|-- AveryLongClass : Cool <<Interface>> Class01 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla class Class10 { <<service>> int id size() } {% endmermaid %}
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
Demo-状态图
1 2 3 4 5 6 7 8 9
{% mermaid %} stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] {% endmermaid %}
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Demo-饼图
1 2 3 4
pie "Dogs" : 386 "Cats" : 85 "Rats" : 15
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Demo-Git图
1 2 3 4 5 6 7 8 9 10 11
{% mermaid %} journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me {% endmermaid %}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
![[23年3月抢先版] DIYer‘s Home 冲击最佳装机月](https://s2.loli.net/2022/06/18/HxoXm2wUsZBnubR.jpg?_r_=53050829-465c-6fbd-0462-f2b1314a8e84)
