速查手册 - Markdown 语法和 Butterfly-Anzhiyu 标签外挂

速查-Markdown 语法和 Butterfly-Anzhiyu 标签外挂

代理编辑：Black，2025-04-10 发布于圣儿博客

鉴于 站长 圣儿 现阶段还在学习钢笔和中作文本的使用，没有档期了解 Markdown 语法， 现由代理编辑Black整理本篇文章，留待她需要时参考，也方便以后使用时直接 Ctrl+C/V。

内容摘要

  • 常用 Markdown 语法的代码和示例
  • Butterfly和Anzhiyu主题专用的标签外挂(tag-plugins)代码和示例
  • 常用Icon图标列表

Markdown语法速查

文字效果Emphasis

加粗B、斜体I、删除D、键盘键K、单行代码

文字加粗：加粗文字
文字斜体：斜体 文字
文字删除：删除文字
键盘式文字：Qw8
单行代码块：单行代码块样式

1
2
3
4
5
文字加粗：**加粗**文字
文字斜体：_斜体_ 文字
文字删除：~~删除~~文字
键盘式文字：<kbd>Q</kbd><kbd>w</kbd><kbd>8</kbd>
单行代码块：`单行代码块`样式

可以嵌套组合使用，但是容易乱。

Span 行内文本

span 行内文本字体：、字体code对比logo，没有区别。

span 行内文本颜色：句中文字红色、黄色、绿色、青色、蓝色、灰色，各种颜色。

span 行内文本大小：句中文字ultra、huge、large、h1、h2、h3、h4、small、默认small，各种大小。

1
2
3
4
5
6
7
8
9
10
11
// span 行内文本字体
{% span logo, 默认字体logo %}、{% span code, 字体code对比logo %}，没有区别。

// span 行内文本颜色
句中文字{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}，各种颜色。

// span 行内文本大小
句中文字{% span ultra, ultra %}、{% span huge, huge %}、{% span large, large %}、{% span h1, h1 %}、{% span h2, h2 %}、{% span h3, h3 %}、{% span h4, h4 %}、{% span small, small %}、{% span, 默认small %}，各种大小。



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

  1. [字体] logo, code
  2. [颜色] red,yellow,green,cyan,blue,gray
  3. [大小] small, h4, h3, h2, h1, large, huge, ultra
  4. [对齐方向] left, center, right

Text 文本样式

带 下划线 的文本
带 着重号 的文本
带 波浪线 的文本
密码样式的文本：123456

1
2
3
4
5
6
7
8
9


// text 文本样式
带 {% u 下划线 %} 的文本
带 {% emp 着重号 %} 的文本
带 {% wavy 波浪线 %} 的文本
密码样式的文本：{% psw 123456 %}


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

Lable 标签

手牵手 一步 两步 三步 四步 望着天

看星星 一颗两颗 三颗四颗 连成线 

1
2
3
4
5
6

手牵手 {% label 一步 %}{% label 两步 blue %}{% label 三步 pink %}{% label 四步 red %} 望着天

看星星 {% label 一颗两颗 green %}三颗四颗 {% label 连成线 orange %}


{% label text color %}

  • [color] 背景颜色，默认为 default，default/blue/pink/red/purple/orange/green

HideInline 隐藏

2042年世界杯冠军是？ 中国‚中国 震撼！ 其实不点击也知道答案。

  • content不能包含英文逗号，可用&sbquo;
  • 还有 hideBlock hideToggle 方式，不过用 Folding方式更好一些。
1
**2042年世界杯冠军是？ {% hideInline 中国&sbquo;中国,查看答案,#FF7242,#fff %} 震撼！** 其实不点击也知道答案。
1
2
3
4
5
{% hideInline content,display,bg,color %}
[content] 文本内容，注意英文逗号用&sbquo;替代
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)

句段效果Paragraph

Blockquotes引用框、HR分割线

Blockquotes引用框：

引用框效果示例，可以内嵌Markdown语法，可以内嵌一部分标签外挂 tag-plugins

HR分割线：

1
2
3
4
5
引用框：
> 引用框效果示例，可以内嵌**Markdown语法**，可以内嵌一部分{% wavy 标签外挂 %} {% span green,tag-plugins %}

HR分割线：
***

不加任何效果，纯色最好看

P 段落样式

P块级样式：

  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：

    红色

    、

    黄色

    、

    绿色

    、

    青色

    、

    蓝色

    、

    灰色

    。

  • 超大号文字

    心向灿烂 山无遮海无拦

1
2
3
4
5
6
- 彩色文字
  在一段话中方便插入各种颜色的标签，包括：{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
  
  {% p center logo large, 圣儿博客 %}
  {% p center small blue, 心向灿烂 山无遮海无拦 %}

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

  1. [字体] logo, code
  2. [颜色] red,yellow,green,cyan,blue,gray
  3. [大小] small, h4, h3, h2, h1, large, huge, ultra
  4. [对齐方向] left, center, right

Tip 上标标签

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义 font awesome 图标

不能组合使用，但可以嵌套markdown语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% 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 %}
{% tip fa-atom, sync %}**不能组合使用**，但可以嵌套markdown语法{% endtip %}

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

  1. [样式] success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. [Icon] 支持 Fontawesome

Note 提示块

常用flat样式 更多样式参考文档

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

常用其他样式 更多样式参考文档

使用内置的阿里图标和 modern 样式

使用 Fontawesome 图标和 simple 样式

使用内置的阿里图标和 disabled 样式

不使用图标的 no-icon 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
`常用flat样式` 更多样式参考文档
{% 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 %}

`常用其他样式` 更多样式参考文档
{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' modern %}使用内置的阿里图标和 modern 样式{% endnote %}
{% note red 'fas fa-car-crash' simple%}使用 Fontawesome 图标和 simple 样式{% endnote %}
{% note 'fab fa-cc-visa' disabled %}使用内置的阿里图标和 disabled 样式{% endnote %}
{% note green no-icon %}不使用图标的 no-icon 样式{% endnote %}

方法一

1
2
3
4
{% note [class] [no-icon] [style] %}
Any content (支持嵌套 Inline tags).
{% endnote %}

方法二

1
2
3
{% note [color] [icon] [style] %}
Any content (支持嵌套 Inline tags).
{% endnote %}

参数

  1. [class] default / primary / success / info / warning / danger
  2. [color] default / blue / pink / red / purple / orange / green
  3. [icon] no-icon / 内置的阿里图标 / Fontawesome
  4. [style] simple/modern/flat/disabled

Lists 列表

  • 有序列表
    1. 有序号的列表
    2. 自己会安排1234
    3. 稍微嵌套一下
  • 无序列表
    • 无序号的列表
    • 不用安排1234
    • 稍微嵌套一下
  • 混搭套娃
    • 无序号的列表
      1. 有序号的列表
      2. 自己会安排1234
      3. 稍微嵌套一下
    • 凑个数
      • 无序号的列表
      • 不用安排1234
      • 稍微嵌套一下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 有序列表
  1. 有序号的列表
  1. 自己会安排1234
  1. {% span green, 稍微嵌套一下 %}
- 无序列表
  - 无序号的列表
  - 不用安排1234
  - {% span red, 稍微嵌套一下 %}
- 混搭套娃
  - 无序号的列表
    1. 有序号的列表
    1. 自己会安排1234
    1. {% span green, 稍微嵌套一下 %}
  - 凑个数
    - 无序号的列表
    - 不用安排1234
    - {% span red, 稍微嵌套一下 %}

无

Highlight 代码块

1
2
s = "Python syntax highlighting"
print s
1
2
未标记代码 code language
当前代码块风格：Mac
1
2
s = "Python syntax highlighting"
print s
1
2
未标记代码 code language
当前代码块风格：Mac

代码块配置需要修改 主题配置文件 _congfig.anzhiyu.yml

1
2
3
4
5
6
7
8
9
# Code Blocks (代码相关)
# --------------------------------------

highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: 200 # unit: px
code_word_wrap: false # 开启后，代码行号取消

Post Front-matter 可单独设置代码框展开（默认）或收缩

1
2
3
---
highlight_shrink: false
---

Tables 表格

项目 内容1 内容2 🚀 备注
默认对齐 左对齐 居中对齐 右对齐
用&#124;转义| 单元格内
换行
使用<br>标签
MD语法文字效果 斜体 删除 Shift
MD语法文字效果 单行代码 span大绿字 重要的事情说三遍，说三遍，说三遍
MD语法文字效果 Label标签
MD语法链接效果 有title链接
MD语法多媒体
大多数标签外挂不可在Table里使用

这家伙很懒

组件效果 UIs

Buttons 按钮组

  1. 类似「团队成员」之类的一组含有头像的链接：
成员1 成员2 成员3 成员4
  1. 含有图标的按钮：
下载源码 查看文档
  1. 组合复杂图形按钮：
心率管家

专业版

 心率管家

免费版

  1. wide 按钮：

  2. fill 按钮：

  1. 类似「团队成员」之类的一组含有头像的链接：

    1
    2
    3
    4
    5
    6
    {% btns circle grid2 %}
    {% cell 成员1, https://baidu.com, https://picsum.photos/48?random=1.webp %}
    {% cell 成员2, https://baidu.com, https://picsum.photos/48?random=2.webp %}
    {% cell 成员3, https://baidu.com, https://picsum.photos/48?random=3.webp %}
    {% cell 成员4, https://baidu.com, https://picsum.photos/48?random=4.webp %}
    {% endbtns %}

  2. 含有图标的按钮：

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

  3. 组合复杂图形按钮：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {% btns circle center grid5 %}
    <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1' class="no-text-decoration">
    <i class='anzhiyufont anzhiyu-icon-heartbeat'></i>
    <b>心率管家</b>
    {% p red, 专业版 %}
    <img src='https://picsum.photos/400?random=1.webp'>
    </a>
    <a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1' class="no-text-decoration">
    <i class='anzhiyufont anzhiyu-icon-heartbeat'></i>
    <b>心率管家</b>
    {% p green, 免费版 %}
    <img src='https://picsum.photos/400?random=2.webp'>
    </a>
    {% endbtns %}

  4. wide 按钮：

    1
    2
    3
    {% btns rounded wide %}
    {% cell  , /, anzhiyufont anzhiyu-icon-fan %}
    {% endbtns %}

  5. fill 按钮：

    1
    2
    3
    {% btns circle fill %}
    {% cell  , /, anzhiyufont anzhiyu-icon-fan %}
    {% endbtns %}
1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. 圆角样式：rounded, circle
  2. 增加文字样式：可以在容器内增加 <b> 或 <p>
  3. 布局方式：
  • wide: 宽一点的按钮
  • fill: 填充布局，自动铺满至少一行，多了会换行
  • center: 居中，按钮之间是固定间距
  • around: 居中分散
  • grid2、grid3、grid4、grid5

Button 按钮

  • 按钮的颜值

    1
    2
    3
    4
    5
    默认line布局{% btn '/',默认按钮 %}和文字在一行
    {% btn '/',带Icon按钮,anzhiyufont anzhiyu-icon-circle-arrow-right %}
    {% btn '/',*outline按钮并斜体*,outline %}
    {% btn '/',带fontawesome的outline按钮,fab fa-cc-visa,outline %}
    {% btn '/',larger按钮,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %}

  • 调整位置和大小

    1
    2
    3
    {% btn '/',左对齐按钮,anzhiyufont anzhiyu-icon-circle-arrow-right,block %}
    {% btn '/',居中按钮,anzhiyufont anzhiyu-icon-circle-arrow-right,block center larger %}
    {% btn '/',右对齐按钮,anzhiyufont anzhiyu-icon-circle-arrow-right,block right outline larger %}

  • 一排按钮

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <span>
    {% btn '/',不能自定义颜色,anzhiyufont anzhiyu-icon-circle-arrow-right,#005344 larger %}
    {% btn '/',icon后的参数不限顺序,anzhiyufont anzhiyu-icon-circle-arrow-right,larger blue %}
    {% btn '/',自适应屏幕大小的一排,anzhiyufont anzhiyu-icon-circle-arrow-right,pink larger %}
    {% btn '/',多个按钮一排无法用center参数实现居中,anzhiyufont anzhiyu-icon-circle-arrow-right,red larger %}
    {% btn '/',居中用div+class,anzhiyufont anzhiyu-icon-circle-arrow-right,purple larger %}
    {% btn '/',见下条示例,anzhiyufont anzhiyu-icon-circle-arrow-right,orange larger %}
    {% btn '/',,anzhiyufont anzhiyu-icon-circle-arrow-right,green larger %}
    </span>

  • 多个按钮居中

    1
    2
    3
    4
    5
    <div class="btn-center">
    {% btn '/',居中按钮A,anzhiyufont anzhiyu-icon-circle-arrow-right,outline larger %}
    {% btn '/',居中按钮B,anzhiyufont anzhiyu-icon-circle-arrow-right,outline blue larger %}
    {% btn '/',居中按钮C,anzhiyufont anzhiyu-icon-circle-arrow-right,outline pink larger %}
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 链接
[text] : 按钮文字
[icon] : [可选] 图标
[color] : [可选] 按钮背景顔色(默认 style 时）
按钮字体和边框顔色(outline 时)
default/blue/pink/red/purple/orange/green
[style] : [可选] 按钮样式 默认实心
outline/留空
[layout] : [可选] 按钮佈局 默认为 line
block/留空
[position] : [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边
center/right/留空
[size] : [可选] 按钮大小
larger/留空

Radio 单选

纯文本测试

支持简单的 markdown 语法

按参数颜色不能自定义

绿色

黄色

青色

蓝色

1
2
3
4
5
6
7
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](/about) 语法 %}
{% radio #005344, 按参数颜色不能自定义 %}
{% radio green, 绿色 %}
{% radio yellow checked, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue checked, 蓝色 %}
1
2
3
{% radio 样式参数（可选）, 文本（支持简单md） %}
[color] red,yellow,green,cyan,blue,gray
[选中] checked/default

Checkbox 复选

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

加

减

乘

1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](/about) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 加 %}
{% checkbox minus yellow checked, 减 %}
{% checkbox times red checked, 乘 %}
1
2
3
4
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
[style] plus, minus, times
[color] red,yellow,green,cyan,blue,gray
[选中] checked/default

Tab 分栏

加参数-1 则tab分栏不打开

This is Emoji Tab 2.

This is Fontawesome Tab 3.

This is 内置图标 Tab 4.

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

{% tabs TABs, -1 %}

<!-- tab 默认选中Tab1 -->

**加参数-1 则tab分栏不打开**

<!-- endtab -->

<!-- tab 🥝-->

**This is Emoji Tab 2.**

<!-- endtab -->

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

**This is Fontawesome  Tab 3.**

<!-- endtab -->

<!-- tab @anzhiyufont anzhiyu-icon-fan -->

**This is 内置图标  Tab 4.**

<!-- endtab -->

{% endtabs %}
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs Unique name, [index] %}

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

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}


[index] 默认1，展开第一个tab，-1为不展开

Timeline 时间线

1949年

解放全中国

1949-05 百万雄师过大江

10-01

中国人民站起来了

2001年

09-11

London Bridge is Falling Down, Falling Down, Falling Down

2008年

08-08

北京欢迎你

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% timeline 1949年,green %}
<!-- timeline 解放全中国 -->
1949-05 百万雄师过大江
<!-- endtimeline -->
<!-- timeline 10-01 -->
**中国人民站起来了**
<!-- endtimeline -->
{% endtimeline %}
{% timeline 2001年,yellow %}
<!-- timeline 09-11 -->
*London Bridge is Falling Down, Falling Down, Falling Down*
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2008年,purple %}
<!-- timeline 08-08 -->
{% p cyan, 北京欢迎你 %}
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% timeline title,color %}

<!-- timeline title -->

xxxxx

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

xxxxx

<!-- endtimeline -->

{% endtimeline %}

[title] title 通常写时间
[timeline title] timeline title 写时间或内容
[color] default(留空) / blue / pink / red / purple / orange / green

Folding 折叠框

查看图片测试

查看默认打开的折叠框

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

查看代码测试 
1
2
var s = 'Good'
console.log(s)
查看列表测试
  • haha
  • hehe
查看嵌套测试

Let’s Go!

查看嵌套测试2

Go on!

查看嵌套测试3

继续

查看嵌套测试4

Come On!

查看嵌套测试5

加油!

查看嵌套测试6

你是最胖的 👍

查看嵌套测试7

翻到这里！你也是个狠人啊 

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

![](https://picsum.photos/500/300.webp)

{% endfolding %}

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

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

{% endfolding %}

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

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

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}
**Let's Go!**

{% folding, 查看嵌套测试2 %}
**Go on!**

{% folding 查看嵌套测试3 %}
**继续**
{% folding 查看嵌套测试4 %}
**Come On!**
{% folding 查看嵌套测试5 %}
**加油!**
{% folding 查看嵌套测试6 %}
**你是最胖的** 👍
{% folding 查看嵌套测试7 %}

**翻到这里！你也是个狠人啊**  ![](https://twikoo-magic.oss-cn-hangzhou.aliyuncs.com/tusiji/0032.gif)

{% endfolding %}

{% endfolding %}

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

[color] default, blue, cyan, green, yellow, red
[状态] 默认折叠，open 为打开

Mermaid 图表

1
2
3
4
5
6
7
8
9
10
11
{% mermaid %}
  pie
    title **我的逆天技能**占比图表
    "抽烟" : 40.55
    "喝酒" : 29.45
    "烫头" : 10.00
    "睡觉" : 15.00
    "发呆" : 17
    "喝可乐": 20
    "吃辣条": 5
{% endmermaid %}

主题配置文件 _config.anzhiyu.yml设置

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

// 使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文档
// 如需更nice的图表，可使用 Chartjs

SiteGroup 网站卡片

百度
Github
圣儿博客
1
2
3
4
5
{% sitegroup %}
{% site 百度, url=https://baidu.com, screenshot=https://picsum.photos/400?random=11.webp, avatar=http://susgmpqz1.hd-bkt.clouddn.com/20250420h7DVVulU.webp-me, description=简约风格 %}
{% site Github, url=https://github.com, , avatar=http://susgmpqz1.hd-bkt.clouddn.com/20250420h7DVVulU.webp-me, description=最大的交友网站 %}
{% site 圣儿博客, url=https://shenger.cc, screenshot=https://picsum.photos/400?random=13.webp, avatar=http://susgmpqz1.hd-bkt.clouddn.com/20250420h7DVVulU.webp-me, description=这个网站太棒了 %}
{% endsitegroup %}
1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}
社交卡片式
苹果风格社交卡片
introduction
introduction
圣儿博客
心向灿烂，山无遮海无拦
前往 
1
2
3
4
{% intCard link img tip cardTitle logo title subTitle %}

必选项：[link] [img] [tip]

多媒体 Medias

Icon 图标

注意：Anzhiyu 主题下，<i>标签要闭合</i>，否则有解析错误。

内置阿里图标 查看全部

Icon Code
<i class="anzhiyufont anzhiyu-icon-dengpao" style="color: ; font-size:"></i>
<i class="anzhiyufont anzhiyu-icon-link" style="color: ; font-size:"></i>
<i class="anzhiyufont anzhiyu-icon-circle-arrow-right" style="color: ; font-size:"></i>

Fontawesome 图标 查看全部

图标 代码
<i class="fa-solid fa-file" style="color: ; font-size:"></i>
<i class="fa-solid fa-chart-pie" style="color: ; font-size:"></i>
<i class="fa-solid fa-barcode" style="color: ; font-size:"></i>

Images 常规图片

  • 一张普通原始大小图片，默认铺满：alt 如果没有title，点击大图能看到锚文本
  • 上面的图改成高度确定宽度等比例的图片 并靠右：
  • 还可加上a标签，不过效果不好，用galleryGroup标签外挂实现
1
2
3
- 一张普通原始大小图片，默认铺满：![alt 如果没有title，点击大图能看到锚文本](https://picsum.photos/1300/500.webp "title 鼠标滑过和点击大图可看到")
- 上面的图改成**高度确定宽度等比例的图片** 并靠右：<img src="https://picsum.photos/1300/500.webp" width="300" style="float: right;" />
- 还可加上a标签，不过效果不好，用`galleryGroup`标签外挂实现

这家伙很懒

Inlineimage 行内图片

这是 一段话。
再来一句看看高度的话。

1
2
这是 {% inlineimage https://twikoo-magic.oss-cn-hangzhou.aliyuncs.com/tusiji/0032.gif %} 一段话。
{% span h3, 再来一句 %}{% inlineimage https://twikoo-magic.oss-cn-hangzhou.aliyuncs.com/tusiji/0032.gif, height=40px %}{% span h3, 看看高度的话。 %}
1
2
3
{% inlineimage 图片链接, height=高度（可选） %}

[height] 20px

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 %}
1
{% audio 音频链接 %}

Video 视频

1
2
3
4
5
6
7
{% video https://videos.pexels.com/video-files/31691426/13502236_2730_1440_24fps.mp4 %}

{% videos, 4 %}
{% video  https://videos.pexels.com/video-files/10344350/10344350-hd_1920_1080_24fps.mp4 %}
{% video https://videos.pexels.com/video-files/31691426/13502236_2730_1440_24fps.mp4 %}
{% video https://videos.pexels.com/video-files/31246288/13345568_1080_1920_24fps.mp4 %}
{% endvideos %}
1
2
3
4
5
6
7
8
9
10
11
{% video 视频链接 %}

{% videos, 2 %}
{% video 视频链接 %}
···
{% endvideos %}

[对其方向] left, center, right
[列数] 逗号后面直接写列数，支持 1 ～ 4 列


参考资料

The End 感谢观看！