主题标签 Tag Plugins 用法手册

主题标签 Tag Plugins 用法手册

1. 段落文本 p

在一段话中方便插入各种颜色的标签。

语法：

1
{% p 样式参数(参数以空格划分), 文本内容 %}

参数：

类型 可选值
字体 logo, code
颜色 red, yellow, green, cyan, blue, gray
大小 small, h4, h3, h2, h1, large, huge, ultra
对齐方向 left, center, right

示例：

1
2
3
4
5
6
- 彩色文字
  在一段话中方便插入各种颜色的标签，包括：{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。
  {% p center logo large, Volantis %}
  {% p center small, A Wonderful Theme for Hexo %}

2. 行内文本 span

与 p 标签类似，但 span 是行内元素，适合在段落中嵌入。

语法：

1
{% span 样式参数(参数以空格划分), 文本内容 %}

参数：

类型 可选值
字体 logo, code
颜色 red, yellow, green, cyan, blue, gray
大小 small, h4, h3, h2, h1, large, huge, ultra
对齐方向 left, center, right

示例：

1
2
3
4
5
6
- 彩色文字
  在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。
  {% span center logo large, Volantis %}
  {% span center small, A Wonderful Theme for Hexo %}

3. 行内文本样式 text

提供下划线、着重号、波浪线、删除线、键盘样式和密码样式的行内文本。

语法：

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}

效果说明：

标签 效果
{% u %} 带下划线的文本
{% emp %} 带着重号的文本
{% wavy %} 带波浪线的文本
{% del %} 带删除线的文本
{% kbd %} 键盘样式的文本
{% psw %} 密码样式的文本（模糊显示）

示例：

1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

4. 分栏 tab

创建选项卡式内容切换。分栏支持内置阿里图标，如果开启了 fontawesome 可以使用 FontAwesome 的图标，否则只能使用内置阿里图标。

语法：

1
2
3
4
5
6
7
8
9
{% tabs Unique name, [index] %}

<!-- tab [Tab caption] [@icon] -->

任意内容（支持内联标签）。

<!-- endtab -->

{% endtabs %}

参数说明：

参数 说明
Unique name 选项卡块的唯一名称，不带逗号。将在 #id 中用作每个标签及其索引号的前缀。如果名称中包含空格，则对于生成 #id，所有空格将由破折号代替。仅当前帖子/页面的 URL 必须是唯一的！
[index] 活动选项卡的索引号。如果未指定，将选择第一个标签（1）。如果 index 为 -1，则不会选择任何选项卡。可选参数。
[Tab caption] 当前选项卡的标题。如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。如果未指定标题，但指定了图标，则标题将为空。可选参数。
[@icon] FontAwesome 图标名称（全名，看起来像 fas fa-font）。可以指定带空格或不带空格；例如 Tab caption @icon 和 Tab caption@icon。可选参数。

示例：

Demo 1 - 预设选择第一个【默认】：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% tabs test1 %}

<!-- tab -->
This is Tab 1.
<!-- endtab -->

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

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

{% endtabs %}

Demo 2 - 预设选择 tabs：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% tabs test2, 3 %}

<!-- tab -->
This is Tab 1.
<!-- endtab -->

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

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

{% endtabs %}

Demo 3 - 没有预设值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% tabs test3, -1 %}

<!-- tab -->
This is Tab 1.
<!-- endtab -->

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

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

{% endtabs %}

Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% tabs test4 %}

<!-- tab 第一个Tab -->
tab 名字为第一个 Tab
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
只有图标 没有 Tab 名字
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
名字+icon
<!-- endtab -->

{% endtabs %}

5. 按钮 btns

创建一组按钮链接。

语法：

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}

圆角样式： rounded, circle

增加文字样式： 可以在容器内增加 <b>标题</b> 和 <p>描述文字</p>

布局方式（默认自动宽度）：

参数 含义
wide 宽一点的按钮
fill 填充布局，自动铺满至少一行，多了会换行
center 居中，按钮之间是固定间距
around 居中分散
grid2 等宽最多 2 列，屏幕变窄会适当减少列数
grid3 等宽最多 3 列，屏幕变窄会适当减少列数
grid4 等宽最多 4 列，屏幕变窄会适当减少列数
grid5 等宽最多 5 列，屏幕变窄会适当减少列数

示例：

1
2
3
4
{% btns rounded grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.cbd.int/.../avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.cbd.int/.../avatar.png %}
{% endbtns %}

6. 按钮 btn

单个按钮链接，是 btns 的简化版。

语法：

1
{% btn 链接, 文本, 图片/图标, 样式参数 %}

或：

1
{% btn 链接, 文本, 样式参数 %}

7. 网站卡片 sites

创建网站信息卡片。

语法：

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接, description=描述 %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接, description=描述 %}
{% endsitegroup %}

8. 单张图片 image

插入带标题和描述的图片。

语法：

1
{% image 图片链接, 宽度(可选), 标题(可选), 描述(可选) %}

参数：

  • width：设置图片宽度，如 300px 或 50%
  • 描述支持 |alt=图片alt 方式自定义

9. 行内图片 inlineImg / inlineimage

在文本行中插入小图片。

语法：

1
2
{% inlineImg 图片链接, 高度(可选) %}
{% inlineimage 图片链接, 高度(可选) %}

10. 标签 label

创建彩色标签徽章。

语法：

1
{% label 文本, 颜色 %}

颜色选项： default, blue, pink, red, purple, orange, green

11. 时间线 timeline

创建时间线布局。

语法：

1
2
3
4
5
6
7
8
9
10
11
{% timeline 标题(可选), 颜色(可选) %}

<!-- timeline 时间节点标题 -->
内容
<!-- endtimeline -->

<!-- timeline 时间节点标题 -->
内容
<!-- endtimeline -->

{% endtimeline %}

颜色选项： blue, pink, red, purple, orange, green

创建友情链接展示卡片。

语法：

1
2
3
4
{% flink %}
- 站点名称, 站点链接, 站点头像, 站点描述
- 站点名称, 站点链接, 站点头像, 站点描述
{% endflink %}

13. Mermaid 图

使用 Mermaid 语法绘制图表（流程图、时序图、甘特图等）。

语法：

1
2
3
4
5
6
7
{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

14. 复选列表 checkbox

创建可勾选的列表。

语法：

1
2
3
{% checkbox 文本内容, checked(可选), 颜色(可选) %}
{% checkbox 文本内容 %}
{% checkbox 文本内容, checked, red %}

颜色选项： red, yellow, green, cyan, blue, gray

示例：

1
2
3
4
5
6
7
8
{% checkbox 纯文本测试 %}
{% checkbox 支持简单的markdown, checked %}
{% checkbox + 加上加号, checked, green %}
{% checkbox 减号, red %}
{% checkbox 乘号, yellow %}
{% checkbox 纯文本测试, checked, cyan %}
{% checkbox 纯文本测试, blue %}
{% checkbox 纯文本测试, gray %}

15. 多吉云播放器 dogeplayer

嵌入多吉云音乐播放器。

语法：

1
2
3
{% dogeplayer 歌曲ID %}
{% dogeplayer 歌曲ID, 歌单ID %}
{% dogeplayer 歌曲ID, 歌单ID, 是否自动播放 %}

16. 折叠框 folding

创建可折叠/展开的内容区域。

语法：

1
2
3
{% folding 颜色, 标题 %}
折叠内容
{% endfolding %}

颜色选项： blue, cyan, green, yellow, red, orange, pink, purple, black, gray

高级用法（分组折叠）：

1
2
3
4
5
{% folding 颜色, 标题, [状态] %}
{% folding 颜色, 标题, [状态] %}
...
{% endfolding %}
{% endfolding %}

状态： open 表示默认展开，不填则默认折叠。

创建图片画廊/相册。

语法：

1
2
3
4
{% gallery %}
![图片描述](图片链接)
![图片描述](图片链接)
{% endgallery %}

支持懒加载、灯箱预览等功能。

18. 隐藏块 tag-hide

创建需要点击才能显示的内容块。

语法：

1
2
3
{% hideToggle 标题 %}
隐藏的内容
{% endhideToggle %}

或行内隐藏：

1
{% hideInline 提示文字, 隐藏内容, 颜色(可选) %}

创建美观的链接预览卡片。

语法：

1
{% link 标题, 链接, 图片链接(可选) %}

20. 单选列表 radio

创建单选列表。

语法：

1
2
3
{% radio 文本内容, checked(可选), 颜色(可选) %}
{% radio 文本内容 %}
{% radio 文本内容, checked, red %}

21. 上标标签 tip

创建带提示的上标标签。

语法：

1
2
3
4
5
{% tip 提示文本, 样式(可选) %}
{% tip warning 警告文本 %}
{% tip danger 危险文本 %}
{% tip success 成功文本 %}
{% tip info 信息文本 %}

22. Note (Bootstrap Callout)

创建类似 Bootstrap Callout 的提示框。

语法：

1
2
3
{% note 样式, 图标(可选) %}
提示内容
{% endnote %}

样式选项：

样式 说明
default 默认灰色
primary 主要蓝色
success 成功绿色
info 信息青色
warning 警告黄色
danger 危险红色

图标选项： 使用内置阿里图标，如 anzhiyufont anzhiyu-icon-bullhorn，如果提示框不需要图标可以加上 simple。

其他样式：

样式 说明
simple 无图标简单样式
modern 现代扁平样式
flat 扁平无背景样式
disabled 禁用样式
no-icon 无图标

示例：

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
{% note simple %}
默认 提示块标签
{% endnote %}

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

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

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

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

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

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

23. 音频 audio

嵌入音频播放器。

语法：

1
{% audio 音频链接 %}

24. 视频 video

嵌入视频播放器。

语法：

1
{% video 视频链接 %}