主题标签 Tag Plugins 用法手册

主题标签 Tag Plugins 用法手册

段落文本 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
- 在一段话中方便插入各种颜色的标签，包括：{% 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 %}

行内文本 span

在段落中插入行内带样式的文本，参数与 p 标签一致，但为行内元素。

语法

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
- 在一段话中方便插入各种颜色的标签，包括：{% 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 %}

行内文本样式 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 Ctrl %} + {% kbd F %} 搜索
6. 密码样式 {% psw 这是密码 %}

分栏 tab

在文章中创建分栏（选项卡）内容块，支持内置阿里图标和 FontAwesome 图标。

语法

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

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

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}

配置参数

参数 说明
Unique name 选项卡块标签的唯一名称，不带逗号。将在 #id 中用作每个标签及其索引号的前缀。如果名称中包含空格，则所有空格将由破折号代替。
[index] 指定默认激活的标签序号，从 1 开始。若为 0 则不默认选中，为 -1 则隐藏标签栏。
Tab caption 标签页标题，可选。
@icon 标签页图标，可选。支持内置阿里图标和 FontAwesome 图标。

示例 1 - 默认选中第一个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test1 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

示例 2 - 预设选择第三个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test2, 3 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

示例 3 - 没有预设值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test3, -1 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

示例 4 - 自定义 Tab 名 + 图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test4 %}

<!-- tab 第一个Tab -->

**tab 名字为第一个 Tab**

<!-- endtab -->

<!-- tab @fab fa-apple-pay -->

**只有图标 没有 Tab 名字**

<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->

**名字+icon**

<!-- endtab -->

{% endtabs %}

按钮 btns

创建一组按钮集合，适合展示团队成员、项目卡片等场景。

语法

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

配置参数

  • 圆角样式: rounded（圆角）, circle（圆形）
  • 文字样式: 可在容器内增加 <b>标题</b> 和 <p>描述文字</p>
  • 布局方式: 默认为自动宽度，适合 23 个；grid4、grid5 适合 46 个
  • 对齐方式: center（居中）

示例 1 - 团队成员头像

1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% endbtns %}

示例 2 - 圆角图标按钮

1
2
3
4
{% btns rounded grid5 %}
{% cell 下载源码, /, anzhiyufont anzhiyu-icon-bolt %}
{% cell 查看文档, /, anzhiyufont anzhiyu-icon-book %}
{% endbtns %}

按钮 btn

创建单个按钮，支持颜色、样式、布局和大小等参数。

语法

1
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

配置参数

参数 说明
url 链接地址
text 按钮文字
icon [可选] 图标，支持内置阿里图标和 FontAwesome 图标
color [可选] 按钮背景颜色（默认样式时）或字体边框颜色（outline 时）。可选值：default/blue/pink/red/purple/orange/green
style [可选] 按钮样式，默认实心。outline 为轮廓样式
layout [可选] 按钮布局，默认为行内。block 为块级
position [可选] 按钮位置（需设置 layout=block）。可选值：center/right
size [可选] 按钮大小。larger 为大号

示例 1 - 基本按钮

1
2
3
4
5
This is my website, click the button {% btn 'https://blog.anheyu.com/',AnZhiYu %}
This is my website, click the button {% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right %}
This is my website, click the button {% btn 'https://blog.anheyu.com/',AnZhiYu,,outline %}
This is my website, click the button {% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline %}
This is my website, click the button {% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %}

示例 2 - 块级按钮

1
2
3
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block center larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block right outline larger %}

示例 3 - 不同颜色按钮

1
2
3
4
5
6
7
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,blue larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,pink larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,red larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,purple larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,orange larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,green larger %}

示例 4 - outline 样式按钮

1
2
3
4
5
6
7
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline blue larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline pink larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline red larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline purple larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline orange larger %}
{% btn 'https://blog.anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline green larger %}

网站卡片 sites

创建一组网站卡片，展示网站的截图、头像和描述信息。

语法

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

配置参数

参数 说明
标题 网站名称
url 网站链接
screenshot 网站截图链接
avatar [可选] 网站头像链接
description [可选] 网站描述

示例

1
2
3
4
{% sitegroup %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://bu.dusays.com/2023/06/01/6478965ce6557.webp, avatar=https://cdn1.tianli0.top/https://bu.dusays.com/2023/06/01/647895faa09c2.png, description=简约风格 %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://bu.dusays.com/2023/06/01/6478965ce6557.webp, avatar=https://cdn1.tianli0.top/https://bu.dusays.com/2023/06/01/647895faa09c2.png, description=简约风格 %}
{% endsitegroup %}

单张图片 image

在文章中插入单张图片，支持自定义宽高、描述和占位背景色。

语法

1
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}

配置参数

参数 说明
链接 图片链接
width [可选] 图片宽度，如 400px
height [可选] 图片高度，如 300px
alt [可选] 图片描述（需在主题配置文件中开启图片描述）
bg [可选] 占位背景色，如 #1D0C04

示例 1 - 添加描述

1
{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, alt=每天下课回宿舍的路，没有什么故事。 %}

示例 2 - 指定宽度

1
{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px %}

示例 3 - 宽度 + 描述

1
{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}

示例 4 - 宽度 + 背景色 + 描述

1
{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

inlineImg 行内图片

在段落中插入行内图片，可限制高度。

语法

1
{% inlineImg [src] [height] %}

配置参数

参数 说明
src 图片链接
height [可选] 图片高度限制

示例

1
2
3
4
5
你看我长得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %}

行内图片 inlineimage

另一种行内图片标签，参数格式更规范。

语法

1
{% inlineimage 图片链接, height=高度（可选） %}

配置参数

参数 说明
图片链接 图片链接
height [可选] 图片高度，如 20px

示例

1
2
3
这是 {% inlineimage https://bu.dusays.com/2023/06/01/647895232e5d5.webp %} 一段话。

这又是 {% inlineimage https://bu.dusays.com/2022/05/19/6285328a83ca7.gif, height=40px %} 一段话。

label 标签

在文本中插入彩色标签。

语法

1
{% label text color %}

配置参数

参数 说明
text 标签文字
color [可选] 背景颜色，默认为 default。可选值：default/blue/pink/red/purple/orange/green

示例

1
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。

timeline 时间线

创建时间线组件，适合展示经历、历史等。

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% timeline title,color %}

<!-- timeline title -->

xxxxx

<!-- endtimeline -->
<!-- timeline title -->

xxxxx

<!-- endtimeline -->

{% endtimeline %}

配置参数

参数 说明
title 标题/时间线名称
color timeline 颜色，可选值：default（留空）/blue/pink/red/purple/orange/green

示例 1 - 默认颜色

1
2
3
4
5
6
7
{% timeline 2022 %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}

示例 2 - 蓝色时间线

1
2
3
4
5
6
7
{% timeline 2022,blue %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}

示例 3 - 粉色时间线

1
2
3
4
5
6
7
{% timeline 2022,pink %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}

其他颜色

1
2
3
4
{% timeline 2022,red %}...{% endtimeline %}
{% timeline 2022,purple %}...{% endtimeline %}
{% timeline 2022,orange %}...{% endtimeline %}
{% timeline 2022,green %}...{% endtimeline %}

在文章中插入友链列表。

语法

1
2
3
{% flink %}
xxxxxx
{% endflink %}

配置参数

参数 说明
class_name h2 标题
flink_style [可选] 友链样式，默认为 flexcard，可选值：flexcard/anzhi
link_list 友链列表，每项包含 name、link、avatar、descr、screenshot（可选）

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% flink %}
-
  flink_
  link_list:
    - name: 安知鱼
      link: https://blog.anheyu.com/
      avatar: https://npm.elemecdn.com/anzhiyu-blog-static@1.0.4/img/avatar.jpg
      descr: 生活明朗，万物可爱
      screenshot: https://bu.dusays.com/2023/06/01/6478965ce6557.webp
    - name: 安知鱼
      link: https://blog.anheyu.com/
      avatar: https://npm.elemecdn.com/anzhiyu-blog-static@1.0.4/img/avatar.jpg
      descr: 生活明朗，万物可爱
      screenshot: https://bu.dusays.com/2023/06/01/6478965ce6557.webp
{% endflink %}

mermaid 图

在文章中插入 Mermaid 图表。

主题配置

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable:
  # built-in themes: default/forest/dark/neutral
  theme:
    light:
    dark:

语法

1
2
3
{% mermaid %}
内容
{% endmermaid %}

示例 - 饼图

1
2
3
4
5
6
7
8
{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

复选列表 checkbox

创建复选列表，支持自定义样式和颜色。

语法

1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}

配置参数

  • 样式: plus（加号）, minus（减号）, times（叉号）
  • 颜色: red, yellow, green, cyan, blue, gray
  • 选中状态: checked

示例

1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 带加号 %}
{% checkbox minus yellow, 带减号 %}
{% checkbox times red checked, 带叉号 %}

dogeplayer 多吉云播放器

在文章中嵌入多吉云播放器。

语法

1
{% dogeplayer 4945 ebb742fd1f0b5a7b %}

示例

1
{% dogeplayer 4945 ebb742fd1f0b5a7b %}

折叠框 folding

创建可折叠的内容块，支持嵌套。

语法

1
2
3
4
5
{% folding 参数（可选）, 标题 %}

折叠内容

{% endfolding %}

配置参数

参数 说明
参数 [可选] 颜色和状态。颜色：cyan/green/yellow/red 等。状态：open（默认展开）
标题 折叠框标题

示例

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://bu.dusays.com/2023/06/01/64788d71c832d.webp)

{% endfolding %}

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

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

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块（代码块没法嵌套代码块）
{% endfolding %}

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

- 项目1
- 项目2

{% endfolding %}

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

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

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

hahaha

{% endfolding %}

{% endfolding %}

{% endfolding %}

在文章中创建相册图库，支持分组展示和瀑布流布局。

相册分组 galleryGroup

1
2
3
4
<div>
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

参数

参数 说明
name 相册名称
description 相册描述
link 相册链接
img-url 封面图片链接

示例

1
2
3
4
5
<div>
 {% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 '/wordScenery/' https://bu.dusays.com/2023/06/01/64788f24d05bd.webp %}
 {% galleryGroup Gundam 哦咧哇gundam哒！ '/thousand/' https://bu.dusays.com/2023/06/01/64788f456fc3d.webp %}
 {% galleryGroup I-am-Akilar 某种意义上也算自拍吧 '/wallpaper/' https://bu.dusays.com/2023/06/01/64788f83e5fa1.webp %}
</div>

相册 gallery（本地图片）

1
2
3
4
5
6
7
8
9
10
11
{% gallery %}
markdown 图片格式
{% endgallery %}

{% gallery true,220,10 %}
markdown 图片格式
{% endgallery %}

{% gallery true,,10 %}
markdown 图片格式
{% endgallery %}

参数

参数 说明
第1个 是否启用 lazyload，true/false
第2个 行高（rowHeight），默认 220
第3个 显示数量限制（limit）

相册 gallery（JSON 数据）

1
2
{% gallery url,[link],[lazyload],[rowHeight],[limit] %}
{% endgallery %}

JSON 数据格式

1
2
3
4
5
6
7
8
9
10
11
[
  {
    "url": "图片链接",
    "alt": "图片描述",
    "title": "图片标题"
  },
  {
    "url": "图片链接",
    "alt": "图片描述"
  }
]

示例

1
2
3
4
5
6
7
8
{% gallery url,https://xxxx.com/sss.json %}
{% endgallery %}

{% gallery url,https://xxxx.com/sss.json,true,220,10 %}
{% endgallery %}

{% gallery url,https://xxxx.com/sss.json,true,,10 %}
{% endgallery %}

瀑布流示例

1
2
3
4
5
6
7
8
9
10
{% gallery true,,2 %}
![](https://bu.dusays.com/2023/06/01/647896b15759c.jpg)
![](https://bu.dusays.com/2023/06/01/647896cabde59.jpg)
![](https://bu.dusays.com/2023/06/01/647896eb0f3ea.jpg)
![](https://bu.dusays.com/2023/06/01/647890012b1ec.webp)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}

tag-hide 隐藏内容

创建隐藏/显示内容块，有三种形式：行内隐藏、块级隐藏和折叠隐藏。

行内隐藏 hideInline

1
{% hideInline content,display,bg,color %}
参数 说明
content 隐藏内容
display [可选] 显示的提示文字
bg [可选] 背景颜色
color [可选] 文字颜色

示例

1
2
3
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

门里站着一个人? {% hideInline 闪 %}

块级隐藏 hideBlock

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

示例

1
2
3
{% hideBlock 查看答案 %}
傻子，怎么可能有答案
{% endhideBlock %}

折叠隐藏 hideToggle

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

创建链接卡片，展示网站的 Favicon 和信息。

语法

1
{% link 标题, 站点描述, 链接, 图片链接（可选） %}

示例

1
{% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %}

单选列表 radio

创建单选列表，支持自定义颜色。

语法

1
{% radio 样式参数（可选）, 文本（支持简单md） %}

配置参数

  • 颜色: red, yellow, green, cyan, blue, gray
  • 选中状态: checked

示例

1
2
3
4
5
6
7
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

上标标签 tip

在文本中插入提示标签，支持多种预设图标和自定义 FontAwesome 图标。

语法

1
{% tip [参数，可选] %}文本内容{% endtip %}

配置参数

支持的预设图标：default/info/success/error/warning/bolt/ban/home/sync/cogs/key/bell

也可使用 FontAwesome 图标，如 fa-atom。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义 font awesome 图标{% endtip %}

Note 提示框

创建提示框（Bootstrap Callout），支持多种样式和自定义图标。

主题配置

1
2
3
4
5
6
7
8
9
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.
  #  - disabled  disable button background color.
  style: simple
  icons: false
  border-radius: 3px

语法（方法一）

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too).
{% endnote %}

语法（方法二）

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too).
{% endnote %}

配置参数

参数 说明
class 标识，不同的标识有不同的配色：default/primary/success/info/warning/danger
no-icon [可选] 不显示图标
style [可选] 样式：simple/modern/flat/disabled
color [可选] 颜色：default/blue/pink/red/orange/purple/green
icon [可选] 自定义图标，支持内置阿里图标和 FontAwesome 图标

示例 1 - simple 样式

1
2
3
4
5
6
7
{% 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 %}

示例 2 - modern 样式

1
2
3
4
5
6
7
{% note modern %}默认 提示块标签{% endnote %}
{% note default modern %}default 提示块标签{% endnote %}
{% note primary modern %}primary 提示块标签{% endnote %}
{% note success modern %}success 提示块标签{% endnote %}
{% note info modern %}info 提示块标签{% endnote %}
{% note warning modern %}warning 提示块标签{% endnote %}
{% note danger modern %}danger 提示块标签{% endnote %}

示例 3 - flat 样式

1
2
3
4
5
6
7
{% note flat %}默认 提示块标签{% endnote %}
{% note default flat %}default 提示块标签{% endnote %}
{% note primary flat %}primary 提示块标签{% endnote %}
{% note success flat %}success 提示块标签{% endnote %}
{% note info flat %}info 提示块标签{% endnote %}
{% note warning flat %}warning 提示块标签{% endnote %}
{% note danger flat %}danger 提示块标签{% endnote %}

示例 4 - disabled 样式

1
2
3
4
5
6
7
{% note disabled %}默认 提示块标签{% endnote %}
{% note default disabled %}default 提示块标签{% endnote %}
{% note primary disabled %}primary 提示块标签{% endnote %}
{% note success disabled %}success 提示块标签{% endnote %}
{% note info disabled %}info 提示块标签{% endnote %}
{% note warning disabled %}warning 提示块标签{% endnote %}
{% note danger disabled %}danger 提示块标签{% endnote %}

示例 5 - 无图标

1
2
3
4
{% note no-icon %}默认 提示块标签{% endnote %}
{% note blue no-icon %}蓝色 提示块标签{% endnote %}
{% note pink no-icon %}粉色 提示块标签{% endnote %}
{% note red no-icon %}红色 提示块标签{% endnote %}

示例 6 - 自定义阿里图标

1
2
3
4
5
6
7
{% note 'anzhiyufont anzhiyu-icon-rocket' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' simple %}2022 年快到了....{% endnote %}
{% note pink 'anzhiyufont anzhiyu-icon-instagram' simple %}小心开车 安全至上{% endnote %}
{% note red 'anzhiyufont anzhiyu-icon-fan' simple %}这是三片呢？还是四片？{% endnote %}
{% note orange 'anzhiyufont anzhiyu-icon-dengpao' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' simple %}剪刀石头布{% endnote %}
{% note green 'anzhiyufont anzhiyu-icon-ic_train' simple %}前端最讨厌的浏览器{% endnote %}

示例 7 - FontAwesome 图标

1
2
3
4
5
6
7
{% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}2022 年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %}
{% note red 'icon-fan' simple %}这是三片呢？还是四片？{% endnote %}
{% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %}

音频 audio

在文章中嵌入音频播放器。

语法

1
{% audio 音频链接 %}

示例

1
{% audio https://npm.elemecdn.com/anzhiyu-music@1.0.4/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3 %}

视频 video

在文章中嵌入视频播放器，支持单个视频和多视频网格布局。

单个视频

1
{% video 视频链接 %}

示例

1
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}

多视频网格

1
2
3
4
{% videos, 列数 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

参数

参数 说明
对齐方向 left, center, right
列数 支持 1~4 列

示例 - 2 列布局

1
2
3
4
5
6
{% videos, 2 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

示例 - 4 列布局

1
2
3
4
5
6
{% videos, 4 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

快速参考表

标签 用途 是否闭合
{% p %} 段落彩色文本 否
{% span %} 行内彩色文本 否
{% u %} 下划线 否
{% emp %} 着重号 否
{% wavy %} 波浪线 否
{% del %} 删除线 否
{% kbd %} 键盘样式 否
{% psw %} 密码样式 否
{% tabs %} 分栏选项卡 {% endtabs %}
{% btns %} 按钮组 {% endbtns %}
{% btn %} 单个按钮 否
{% sitegroup %} 网站卡片组 {% endsitegroup %}
{% image %} 单张图片 否
{% inlineImg %} 行内图片 否
{% inlineimage %} 行内图片 否
{% label %} 彩色标签 否
{% timeline %} 时间线 {% endtimeline %}
{% flink %} 友链 {% endflink %}
{% mermaid %} Mermaid 图 {% endmermaid %}
{% checkbox %} 复选列表 否
{% radio %} 单选列表 否
{% dogeplayer %} 多吉云播放器 否
{% folding %} 折叠框 {% endfolding %}
{% galleryGroup %} 相册分组 否
{% gallery %} 相册 {% endgallery %}
{% hideInline %} 行内隐藏 否
{% hideBlock %} 块级隐藏 {% endhideBlock %}
{% hideToggle %} 折叠隐藏 {% endhideToggle %}
{% link %} 链接卡片 否
{% tip %} 上标标签 {% endtip %}
{% note %} 提示框 {% endnote %}
{% audio %} 音频 否
{% video %} 视频 否
{% videos %} 视频组 {% endvideos %}