学习next主题的拓展用法

发表于 更新于 分类于 ， Changyan： 本文字数： 8.2k 阅读时长 ≈ 7 分钟

按钮

{% 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>
GitHub

图片组

对照示意图即可

Group Picture Layout
Group Picture Layout

{% 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 %}

pomin

......

PDF

{% 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.

  1. One
  2. Two
  3. 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 %}

默认主题

......

Primary主题

......

Info主题

......

Success主题

......

Warning主题

......

Danger主题

......

{% note info no-icon %}
#### 没有图标的批注
......
{% endnote %}

没有图标的批注

......

{% note primary 这是折叠的内容 %}
#### 被折叠隐藏的内容
......
{% endnote %}

这是折叠的内容

被折叠隐藏的内容

......

{% note success %}
#### 代码块批注
{% code %}
console.log('hello world');
{% endcode %}
{% endnote %}

代码块批注

console.log('hello world');
#### 表格批注
{% note default %}
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}

表格批注

1 2
3 4
5 6
7 8