Next 标签汇总

发表于 更新于 分类于 ， 阅读次数： 本文字数： 6.2k 阅读时长 ≈ 6 分钟

反观前几篇博客，内容单调，样式简单，一眼望过去，除了文字还是文字（好像也没啥问题）。但是我们可以通过 Next 主题内置或者第三方的标签插件让博客内容更好看，样式更加 花里胡哨 ^_^

开始

关于 Next 主题的内置标签，仅适用于 Next 主题，如果切换到其他主题，可能会出现不兼容的现象，所以根据自己需要与 Theme 进行编辑 Blog

由于 Next 主题内置标签有很多，很难将所有的标签都记录在这里（况且也不是所有的标签都能用得到），所以更多的标签介绍请查看官方文档：Tag Plugins | Hexo ；当然也有中文文档： 标签插件（Tag Plugins） | Hexo。

代码块

参考链接：标签插件（Tag Plugins） | Hexo

  • 用法
1
2
3
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}
  • 实例 — 附加说明与引用网址
1
2
3
4
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

引用

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

参考链接：Tag Plugins | NexT (theme-next.js.org)

  • 用法
1
2
3
{% centerquote %}Something{% endcenterquote %}
## 或者
{% cq %}Something{% endcq %}
  • 实例 — 居中引用
1
{% cq %} 居中引用 {% endcq %}

居中引用

视频

将 url 或者本地视频导入

参考链接：Tag Plugins | NexT (theme-next.js.org)

  • 用法
1
{% video url %}
  • 实例 — url / 本地插入视频
1
2
3
{% video https://example.com/sample.mp4 %}
{% video /path/to/your/video.mp4 %}
## 暂时没有找到合适的视频，如未插入视频

图片合集

可以对插入的图片按照规定的排版进行摆放。

参考链接：Group Pictures | NexT (theme-next.js.org)

  • 用法
1
2
3
4
5
{% grouppicture [number]-[layout] %}
{% endgrouppicture %}
## 或者
{% gp [number]-[layout] %}
{% endgp %}
  • [number]：可选参数。要添加到组图片中的图片总数。
  • [layout]：可选参数。布局的索引，可以根据下图获得。例如，如果要将第二个布局应用于 4 张图片，则使用
1
{% grouppicture 4-2 %}{% endgrouppicture %}

注意：请在安装了 Fancybox 插件的前提下使用这里的标签插件。

  • 实例 — 3 - 3
1
2
3
4
5
{% grouppicture 3-3 %}
![](/images/background.jpg)
![](/images/background1.jpg)
![](/images/background2.jpg)
{% endgrouppicture %}
  • 实例 — 4 - 2
1
2
3
4
5
6
{% grouppicture 4-2 %}
![](/images/background4.jpg)
![](/images/background5.jpg)
![](/images/background6.jpg)
![](/images/background7.jpg)
{% endgrouppicture %}

对文本进行标识

可以对一段文件进行颜色管理。

参考链接：Label | NexT (theme-next.js.org)

  • 用法
1
{% label [class]@text %}

  • [class]：可选参数。支持的值：| | | | | ；如果未指定，则将使用浏览器的默认样式，该样式在不同的浏览器中可能会有所不同

  • text：可以指定带或不带空格。

  • 实例

1
2
3
4
5
6
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.

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.

引导标注

Next 主题针对这一系列标签还有多个样式可供选择，需要在主题配置文件 _config.next.yml 中修改启用。

参考链接：Note (Bootstrap Callout) | NexT (theme-next.js.org)

  • _config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
# 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: simple
  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
{% note [class] [no-icon] [summary] %}
Any content (support inline tags too).
{% endnote %}

  • [class]：可选参数。支持的值：默认|主要|成功|信息|警告|危险。

  • [no-icon]：可选参数。禁用注释中的图标。

  • [summary]：可选参数。注释的可选摘要

注意：所有参数都是可选的。

  • 实例 — 页眉
1
2
3
4
{% note %}
#### Header
(without define class style)
{% endnote %}

页眉

(不带定义类样式)

  • 实例 — 其他标头
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
## 默认标头
{% note default %}
#### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}

## 主标头
{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

## 信息标头
{% note info %}
#### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

## 成功标头
{% note success %}
#### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

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

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

## 无图标标头
{% note info no-icon %}
#### No icon note
Note **without** icon: `note info no-icon`
{% endnote %}

## 详细信息和摘要
{% note primary This is a summary %}
#### Details and summary
Note with summary: `note primary This is a summary`
{% endnote %}

## 详细信息和摘要（无图标）
{% note info no-icon This is a summary %}
#### Details and summary (No icon)
Note with summary: `note info no-icon This is a summary`
{% endnote %}

## 注释中的代码块
{% note success %}
#### Codeblock in note
```
code block in note tag
code block in note tag
code block in note tag
```
{% endnote %}

## 注释中的列表
{% note default %}
#### Lists in note
* ul
* ul
    * ul
    * ul
* ul

1. ol
2. ol
    1. ol
    2. ol
3. ol
{% endnote %}

## 附注表格
#### Table in Note
{% note default %}
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}


Default Header

Welcome to Hexo!

Primary Header

Welcome to Hexo!

Info Header

Welcome to Hexo!

Success Header

Welcome to Hexo!

Warning Header

Welcome to Hexo!

Danger Header

Welcome to Hexo!

No icon note

Note without icon: note info no-icon

This is a summary

Details and summary

Note with summary: note primary This is a summary

This is a summary

Details and summary (No icon)

Note with summary: note info no-icon This is a summary

Codeblock in note

1
2
3
code block in note tag
code block in note tag
code block in note tag

Lists in note

  • ul
  • ul
    • ul
    • ul
  • ul

  1. ol

  2. ol

    1. ol
    2. ol

  3. ol

Table in Note

1 2
3 4
5 6
7 8

其他

关于其他标签，可以仔细查看官方文档，主要是严格遵守 Next 的标签语法规则，就可以实现相应的效果。

  • 设置多个选项框：Tabs | NexT (theme-next.js.org)
  • 设置 PDF 文件下载：PDF | NexT (theme-next.js.org)
  • 绘制流程图或图表：Mermaid | NexT (theme-next.js.org)
  • 给图片添加链接重定向：Link Grid | NexT (theme-next.js.org)
  • 设置自定义按钮：Button | NexT (theme-next.js.org)