Hexo-NexT Tag 插件的使用

此文主要记录next主题内置标签插件的用法,以及常用的md语法,方便写文章时查阅
Tag 插件是一种使Hexo支持的特殊样式内容的方法。例如,我们无法在标准Markdown中显示具有自定义尺寸的图像。然后我们可以使用标签插件来解决它。Hexo有很多标签可以帮助用户。Hexo还具有主题的接口,使主题能够创建自己的标签。

文本居中引用 - Centered Quote

使用方法:

1
{% cq %}心静思远,志行千里。{% endcq %}

显示效果:

心静思远,志行千里。

按钮 - Button

使用方法:

1
2
3
{% button url, text, icon [class], [title] %}
<!-- Tag Alias -->
{% btn url, text, icon [class], [title] %}

  • url : 绝对或相对 URL
  • text : 按钮文字,如果未指定图标则为必须
  • icon : FontAwesome 图标名称(开头没有’fa-‘)。如果未指定文本,则为必需
  • [class] : FontAwesome 类:fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5X ,可选参数。
  • [title] : 鼠标悬停时的工具提示,可选参数。

注意:最好添加div标签,测试时没加 div,下面显示不完全,加上非常美观。

一个示例:

多个按钮居中显示:

提示块 - Note

使用方法:

1
2
3
{% note [class] [no-icon] [summary] %}
任何内容(也支持嵌入式标签)。
{% endnote %}

  • [class] :可选参数。支持的值:default | primary | success | info | warning | danger。
  • [no-icon]:可选参数。禁用注释中的图标。
  • [summary]:可选参数。注释的可选摘要。
    所有参数都是可选的。

示例:

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
{% note %}
未定义类样式
{% endnote %}

{% note default %}
default 提示块标签
{% endnote %}

{% note primary %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

{% note info no-icon %}
无图标
{% endnote %}

显示效果:

未定义类样式

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

无图标

标签 - Label

使用方法:

1
{% label default@默认 %} {% label primary@主要 %} {% label success@成功 %} {% label info@信息 %} {% label warning@警告 %} {% label danger@危险 %}

显示效果:
默认 主要 成功 信息 警告 危险

选项卡 - Tabs

使用方法:

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,1 %} 名字为tab,默认在第1个选项卡,如果是-1则隐藏
<!-- tab -->
**选项卡 1**
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab A -->
**选项卡 3** 名字为A
<!-- endtab -->
{% endtabs %}

显示效果:

选项卡 1

选项卡 2

选项卡 3 名字为A

Hexo+Next 引入 Folding 容器

使用方法:

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
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/resume/resumeBg.jpg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}

{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha

{% endfolding %}

{% endfolding %}

{% endfolding %}

显示效果:

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

1
import

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

本文标题:Hexo-NexT Tag 插件的使用

文章作者:TJYS

发布时间:2021年02月24日 - 11:32:25

最后更新:2021年02月24日 - 16:07:37

原始链接:https://qikaile.us/hexo-next-Tag-Plugin.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
0%