Hexo-Next主题-相关配置

发表于 更新于 分类于 ， ， ， ， 阅读次数： 评论： 本文字数： 20k 阅读时长 ≈ 57 分钟

取消“全文预览”，启用“阅读全文”·

在md文章中任意位置插入

1
<!-- more -->

位于其下方的内容将不在首页“全文预览”，而是采用“阅读全文”的按钮打开文章，阅读全部内容。

居中标签·

详细用法请参考 Tag Plugins | NexT

此标记将生成一对引号，位于前后两行，并且引用的文本位于中间行并居中显示。使用居中引号时，如果我们有多行文本，并且每行都有不同的长度，则引号不会是对称的，因此建议在只有单行文本时使用。例如，在文章之前或所有文章之后做一个总结。

用法·

1
2
3
{% centerquote %}Something{% endcenterquote %}
或
{% cq %}Something{% endcq %}

代码优雅，核心简单

1
{% cq %}代码优雅，核心简单{% endcq %}

按钮标签·

详细用法请参考 Button | NexT

用法·

1
2
3
{% button url, text, icon [class], [title] %}
<!-- Tag Alias 标签别名 -->
{% btn url, text, icon [class], [title] %}
  • url：URL 的绝对或相对路径。
  • text：按钮文本。如果未指定图标，则为必需。
  • icon：Font Awesome 图标名称。如果未指定文本，则为必需。
  • [class]：可选参数。 Font Awesome 类： | | | | |fa-fw``fa-lg``fa-2x``fa-3x``fa-4x``fa-5x
  • [title]：可选参数。鼠标悬停时的工具提示。

例子·

​ 文本

1
{% button #按钮标签, 文本 %}

​ 文本与提示

1
{% btn #例子, 文本与提示,, 提示 %}

具有相对 URL 的按钮·

Previous Chapter Next Chapter
1
2
3
4
<div class="text-center">
{% btn #, Previous Chapter, arrow-left fa-fw fa-lg, Previous Chapter (Full Image) %}
{% btn #, Next Chapter, arrow-right fa-fw fa-lg, Next Chapter (Label) %}
</div>

图片组·

详细用法请参考 Group Pictures | NexT

用法·

1
2
3
{% grouppicture [number]-[layout] %}{% endgrouppicture %}
<!-- Tag Alias 标签别名 -->
{% gp [number]-[layout] %}{% endgp %}

  • [number]：*可选参数。*要添加到组图片中的图片总数。

  • [layout]：*可选参数。*布局的索引，可以根据下图获得。

例子·

例如，有3张图，先设置图片总数为3，再选用 “3张图布局” 中的第2种布局，代码如下：

1
2
3
4
5
{% grouppicture 3-2 %}
![](/images/next.svg)
![](/images/next.svg)
![](/images/next.svg)
{% endgrouppicture %}

标签（文本高亮）·

详细用法请参考 Label | NexT

用法·

1
{% label [class]@text %}
  • [class]：*可选参数。*支持的值：default | primary | success | info | warning | danger
    如果未指定，则将使用浏览器的默认样式，该样式在不同的浏览器中可能会有所不同。
  • text：可以指定带或不带空格

例子·

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

1
2
3
4
5
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

链接网格·

详细用法请参考 Link Grid | NexT

用法·

1
2
3
{% linkgrid [image] [delimiter] [comment] %}{% endlinkgrid %}
<!-- Tag Alias -->
{% lg [image] [delimiter] [comment] %}{% endlg %}
  • [image]：*可选参数。*默认图像网址。
  • [delimiter]：*可选参数。*如果给定了可选的分隔符参数，则将其解释为每行中项的分隔符。
  • [comment]：*可选参数。*如果给出了可选的注释参数，则将其解释为注释掉一行的符号。

图表、流程图（Mermaid）·

以类似于标记的方式从文本中生成图表和流程图

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

详细用法请参考 Mermaid | NexT ，GitHub： mermaid 官方中文介绍： mermaid/README.zh-CN.md

个人的第一印象：用法很复杂，在我看来还不如用其他软件绘图，然后导出图片，再传到博客上。

第一感觉：

  • 有点复杂
  • 非常清晰的格式化；
  • 无法直接被爬取 “流程图” ；
  • 显示清楚；
  • 代码党福音（不用考虑绘图的琐事）。

官方表述：

  • 减少绘图和编写文档的时间
  • 提高了内容的智能化和可重用性
  • 易于维护和更新

本博客已启用此功能，以后或许会用吧

用法·

1
2
3
4
```mermaid
type

```

或者

1
2
3
{% mermaid type %}

{% endmermaid %}

例子·

graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
1
2
3
4
5
6
7
```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
1
2
3
4
5
6
```mermaid
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```

批注（提示、注意）·

详细用法请参考 Note (Bootstrap Callout) | NexT

用法·

1
2
3
{% note [class] [no-icon] [summary] %}
Any content (support inline tags too).
{% endnote %}
  • [class]：*可选参数。*支持的值：default | primary | success | info | warning | danger.
  • [no-icon]：*可选参数。*禁用批注中的图标。
  • [summary]：可选参数。 可选的隐藏摘要。

所有参数都是可选的。

例子·

页眉·

（不带定义类样式）

1
2
3
4
{% note %}
#### 页眉
（不带定义类样式）
{% endnote %}

信息标题·

欢迎来到 Hexo!

1
2
3
4
{% note info %}
#### 信息标题
**欢迎来到** [Hexo!](https://hexo.io)
{% endnote %}

警告标头·

Welcome to Hexo!

1
2
3
4
{% note warning %}
#### 警告标头
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

危险标头·

Welcome to Hexo!

1
2
3
4
{% note danger %}
#### 危险标头
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

这是一个摘要

详细信息和摘要·

附注摘要：note primary This is a summary

1
2
3
4
{% note primary This is a summary %}
#### 详细信息和摘要
附注摘要：`note primary This is a summary`
{% endnote %}

批注中的代码块·

code block in note tag
code block in note tag
code block in note tag
1
2
3
4
5
6
7
8
{% note success %}
#### 批注中的代码块
{% code %}
code block in note tag
code block in note tag
code block in note tag
{% endcode %}
{% endnote %}

PDF支持·

详细用法请参考 PDF | NexT

这是一个插件，允许在博客页面中预览PDF文件。

如果浏览器本身支持嵌入式 PDF，NexT 将创建一个标签，并在您的网站上包含 PDF 文件。否则，它将创建一个标签并使用PDF.js通过@mozilla来呈现pdf文件。

选项卡·

详细用法请参考 Tabs | NexT

让选项卡的导航条嵌入内容之中，用以在同一行通过选项卡呈现不同的内容

用法·

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  • Unique name：选项卡块标记的唯一名称，不带逗号。
    将在#id用作每个选项卡及其索引号的前缀。
    如果名称中有空格，则对于生成#id所有空格都将替换为短划线。
    仅对于帖子/页面的当前网址必须是唯一的！
  • [index]：活动选项卡的索引号。
    如果未指定，将选择第一个选项卡 （1）。
    如果索引为 -1，则不会选择任何选项卡。这将是类似剧透的东西。
    可选参数。
  • [Tab caption]：当前选项卡的标题。
    如果未指定标题，则带有选项卡索引后缀的唯一名称将用作选项卡的标题。
    如果未指定标题，但指定了图标，则标题将为空。
    可选参数。
  • [@icon]：Font Awesome 图标名称。
    可以指定带或不带空格;例如，"Tab caption @icon"与"Tab caption@icon"相同。
    可选参数。

例子·

选中了第 3 个选项卡的选项卡·

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 Second unique name, 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 Third unique name, -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 Fourth unique name %}
<!-- tab 解决方案1@text-width -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab 解决方案2@font -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab 解决方案3@bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

标签永久链接测试·

名称中有空格，则对于生成#id所有空格都将替换为短划线。

链接至 > Tab one.
链接至 > Tab one 1.
链接至 > Tab one 2.
链接至 > Tab one 3.

链接至 > Tab two.
链接至 > Tab two 1.
链接至 > Tab two 2.
链接至 > Tab two 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

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
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
链接至 > [Tab one](#tab-one).
链接至 > [Tab one 1](#tab-one-1).
链接至 > [Tab one 2](#tab-one-2).
链接至 > [Tab one 3](#tab-one-3).

链接至 > [Tab two](#tab-two).
链接至 > [Tab two 1](#tab-two-1).
链接至 > [Tab two 2](#tab-two-2).
链接至 > [Tab two 3](#tab-two-3).

{% tabs Tab one %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% tabs Tab two %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- 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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

This is Sub Tab 2.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

This is Sub Tab 3.

This is Sub-Sub Tab 1 of Sub Tab 3.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

This is Sub-Sub Tab 2 of Sub Tab 3.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

This is Sub-Sub Tab 3 of Sub Tab 3.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
{% 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 %}
{% youtube Kt7u5kr_P5o %}
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**

{% subtabs Sub Tabs %}
<!-- tab -->
**This is Sub Tab 1.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

{% note warning %}
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
{% endnote %}

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub Tab 2.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

{% note danger %}
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% 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 %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub-Sub Tab 2 of Sub Tab 3.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

{% note warning %}
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}

{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub-Sub Tab 3 of Sub Tab 3.**

{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

{% note warning %}
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

{% note danger %}
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}

{% endnote %}

{% endnote %}
<!-- endtab -->
{% endsubtabs %}

<!-- endtab -->
{% endsubtabs %}

<!-- endtab -->
{% endtabs %}