记录 tags 用法

发表于 分类于 阅读次数： Valine：
本文字数： 5.2k 阅读时长 ≈ 5 分钟

Next主题使用的内置tag，官方都已经写好js

我们只要根据官方教程调用，就可以实现多样式、多功能的效果。

设置

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
# 配置文件
# ---------------------------------------------------------------
# Tags Settings
# See: https://theme-next.js.org/docs/tag-plugins/
# ---------------------------------------------------------------

# Note tag (bootstrap callout)
note:
# Note tag style values:
# - simple bootstrap callout old alert style. Default.
# - modern bootstrap 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: flat
icons: false
# 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

# Tabs tag
tabs:
transition:
tabs: false
labels: true

# PDF tag
# NexT will try to load pdf files natively, if failed, pdf.js will be used.
# So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# Dependencies: https://github.com/next-theme/theme-next-pdf
pdf:
enable: false
# Default height
height: 500px

# Mermaid tag
mermaid:
enable: false
# Available themes: default | dark | forest | neutral
theme: forest

使用

看官方文档。

Note

配置

1
2
3
4
5
6
7
8
9
10
11
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: modern
icons: true
# 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

用法

1
2
3
4
{% note default %}
##### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}
Default Header

Welcome to Hexo!

1
2
3
4
{% note primary %}
##### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
Primary Header

Welcome to Hexo!

1
2
3
4
{% note info %}
##### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
Info Header

Welcome to Hexo!

1
2
3
4
{% note success %}
##### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
Success Header

Welcome to Hexo!

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

Welcome to Hexo!

利用 Note 标签还可实现代码块的折叠，用法如下：

1
2
3
4
5
{% note info no-icon 点击显 / 隐代码 %}
```
这是代码块
```
{% endnote %}

点击显 / 隐代码

1
这是代码块

Tabs

配置

1
2
3
4
tabs:
transition:
tabs: false
labels: true

用法

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs First unique name %}
<!-- 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.

可以嵌套使用

Mermaid

配置

1
2
3
4
5
# Mermaid tag
mermaid:
enable: true
# Available themes: default | dark | forest | neutral
theme: forest

使用

1
2
{% mermaid type %}
{% endmermaid %}
1
2
3
4
5
6
{% mermaid graph TD %}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{% endmermaid %}
1
2
3
4
5
6
7
{% mermaid graph TD %}
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssss<br />ssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
{% endmermaid %}

有错误，不用

cq && centerquote

1
2
3
4
5
{% cq %}
**文本居中**
引用样式
cq 与 centerquote 等价
{% endcq %}

文本居中
引用样式
cq与centerquote等价

Label

1
2
3
4
5
6
7
# 内置label标签。
{% label default@default %}
{% label primary@primary %}
{% label success@success %}
{% label info@info %}
{% label warning@warning %}
{% label danger@danger %}
default primary success info warning danger
### [button && btn](https://theme-next.js.org/docs/tag-plugins/button.html)

内置button标签。btn与button等价。

1
{% btn https://www.baidu.com, 百度首页, download fa-lg fa-fw %}

grouppicture

1
2
3
4
5
6
7
8
{% grouppicture 6-6 %}
![](https://theme-next.js.org/images/next.svg)
![](https://theme-next.js.org/images/next.svg)
![](https://theme-next.js.org/images/next.svg)
![](https://theme-next.js.org/images/next.svg)
![](https://theme-next.js.org/images/next.svg)
![](https://theme-next.js.org/images/next.svg)
{% endgrouppicture %}
1
2
3
4
5
6
7
{% linkgrid %}
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | https://i.loli.net/2021/03/02/QLOMIVmSPA8C36a.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | https://i.loli.net/2021/03/02/QLOMIVmSPA8C36a.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | https://i.loli.net/2021/03/02/QLOMIVmSPA8C36a.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | https://i.loli.net/2021/03/02/QLOMIVmSPA8C36a.png
% Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | https://i.loli.net/2021/03/02/QLOMIVmSPA8C36a.png
{% endlinkgrid %}

Theme NexT

Stay Simple. Stay NexT.

Theme NexT

Stay Simple. Stay NexT.

Theme NexT

Stay Simple. Stay NexT.

Theme NexT

Stay Simple. Stay NexT.

参考文章