学习next主题的拓展用法
按钮
{% button 地址, 文字, 图标 [额外效果], [悬浮提示]] %}
{% btn 地址, 文字, 图标 [额外效果], [悬浮提示] %}
{% button http://baidu.com, 百度 %}
{% btn #, 按钮 %}
百度
按钮
{% btn #, 带悬浮提示按钮,, 提示 %}
带悬浮提示按钮
{% btn #,, home %}
{% btn #, 有字有图标有提示按钮, home fa-fw, 提示 %}
有字有图标有提示按钮
{% btn #, 🚗, home fa-5x %}
{% btn #, 🚗, home fa-4x %}
{% btn #, 🚗, home fa-3x %}
{% btn #, 🚗, home fa-2x %}
{% btn #, 🚗, home fa-lg %}
{% btn #, 🚗, home %}
🚗
🚗
🚗
🚗
🚗
🚗
<div class="text-center"><div>{% btn #,, heading %}{% btn #,, fab fa-edge %}{% btn #,, times %}{% btn #,, circle-notch %}</div>
<div>{% btn #,, italic %}{% btn #,, fab fa-scribd %}</div>
</div>
<div class="text-center">{% btn #, 上一章, arrow-left fa-fw fa-lg, 上一章 (Full Image) %} {% btn #, 下一章, arrow-right fa-fw fa-lg, 下一章 (Label) %}</div>
<div class="text-center">{% btn https://github.com, GitHub, fab fa-github fa-fw fa-lg, GitHub %}</div>
图片组
对照示意图即可
{% grouppicture 3-3 %}
![](/images/next.svg)
![](/images/next.svg)
![](/images/next.svg)
{% endgrouppicture %}
{% gp 5-2 %}
![](/images/next.svg)
![](/images/next.svg)
![](/images/next.svg)
![](/images/next.svg)
![](/images/next.svg)
{% endgp %}
中心引用
{% centerquote %}引用的内容{% endcenterquote %}
{% cq %}天大寒,砚冰坚,手指不可屈伸{% endcq %}
天大寒,砚冰坚,手指不可屈伸
视频
{% video 地址 %}
{% video https://threejs.org/examples/textures/sintel.ogv %}
彩色标签
{% label info@info %} <br>
{% label danger@danger %} <br>
{% label default@default %} <br>
{% label primary@primary %} <br>
{% label success@success %} <br>
{% label warning@warning %}
info danger
default
primary
success
warning
链接栅格
{% linkgrid [图片] [标题] [内容] %}{% endlinkgrid %}
{% lg [图片] [标题] [内容] %}{% endlg %}
{% lg %}
pomin | https://github.com/pomin-163 | ...... | /images/m.png
{% endlg %}
{% pdf 地址 [高度] %}
{% pdf /pdf/0.pdf 300px %}
标签
{% tabs 唯一标识符, [标签个数] %}
<!-- tab [标签标题] [@图标] -->
内容
<!-- endtab -->
{% endtabs %}
{% tabs Tags %}
<!-- tab -->
**This is Tab 1.**
1. One
2. Two
3. Three
Indented code block:
nano /etc
Tagged code block:
{% code %}
code tag
code tag
code tag
{% endcode %}
{% note default %}
Note default tag.
{% endnote %}
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
* Five
* Six
* Seven
{% note primary %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% endnote %}
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
{% subtabs Sub Tabs %}
<!-- tab -->
**This is Sub Tab 1.**
{% note success %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% note warning %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% endnote %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% endnote %}
<!-- endtab -->
<!-- tab -->
**This is Sub Tab 2.**
{% note success %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% note danger %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% endnote %}
{% endnote %}
<!-- endtab -->
<!-- tab -->
**This is Sub Tab 3.**
{% subtabs Sub-Sub Tabs %}
<!-- tab -->
**This is Sub-Sub Tab 1 of Sub Tab 3.**
{% note success %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% endnote %}
<!-- endtab -->
<!-- tab -->
**This is Sub-Sub Tab 2 of Sub Tab 3.**
{% note success %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% note warning %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% endnote %}
{% endnote %}
<!-- endtab -->
<!-- tab -->
**This is Sub-Sub Tab 3 of Sub Tab 3.**
{% note success %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% note warning %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% note danger %}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
{% endnote %}
{% endnote %}
{% endnote %}
<!-- endtab -->
{% endsubtabs %}
<!-- endtab -->
{% endsubtabs %}
<!-- endtab -->
{% endtabs %}
This is Tab 1.
- One
- Two
- Three
Indented code block:
nano /etc
Tagged code block:
code tag
code tag
code tag
Note default tag.
This is Tab 2.
- Five
- Six
- Seven
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
This is Tab 3.
This is Sub Tab 1.
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
This is Sub Tab 2.
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
This is Sub Tab 3.
This is Sub-Sub Tab 1 of Sub Tab 3.
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
This is Sub-Sub Tab 2 of Sub Tab 3.
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
This is Sub-Sub Tab 3 of Sub Tab 3.
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
图表
具体要阅读文档:https://github.com/mermaid-js/mermaid
{% mermaid type %}
{% endmermaid %}
{% mermaid graph TD %}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{% endmermaid %}
graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]
{% 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!
{% mermaid gantt %}
dateFormat YYYY-MM-DD
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 dateFormat YYYY-MM-DD 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
{% 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() }
{% mermaid stateDiagram %}
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{% endmermaid %}
stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
{% mermaid pie %}
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{% endmermaid %}
pie "Dogs" : 386 "Cats" : 85 "Rats" : 15
{% 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
批注
{% note [主题] [no-icon] [折叠后内容] %}
内容
{% endnote %}
主题包含:default | primary | success | info | warning | danger.
{% note %}
没有主题的批注
{% endnote %}
没有主题的批注
{% note default %}
#### 默认主题
......
{% endnote %}
{% note primary %}
#### Primary主题
......
{% endnote %}
{% note info %}
#### Info主题
......
{% endnote %}
{% note success %}
#### Success主题
......
{% endnote %}
{% note warning %}
#### Warning主题
......
{% endnote %}
{% note danger %}
#### Danger主题
......
{% endnote %}
{% note info no-icon %}
#### 没有图标的批注
......
{% endnote %}
{% note primary 这是折叠的内容 %}
#### 被折叠隐藏的内容
......
{% endnote %}
{% note success %}
#### 代码块批注
{% code %}
console.log('hello world');
{% endcode %}
{% endnote %}
#### 表格批注
{% note default %}
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}