##自定义文本块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue no-icon %}
2021年快到了....
{% endnote %}
{% note pink no-icon %}
小心开车 安全至上
{% endnote %}
{% note red no-icon %}
这是三片呢？还是四片？
{% endnote %}
{% note orange no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple no-icon %}
剪刀石头布
{% endnote %}
{% note green no-icon %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

##复选列表

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 checked, 减少 %}
{% checkbox times red checked, 叉 %}

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

##单选列表 radio

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, 蓝色 %}

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

##行内文本样式 text

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

##行内文本 span

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 %}
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。 A Wonderful Theme for Hexo

##时间轴 timeline

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

{% timenode 2020-07-24 %}

天气不错，适合出去约妹

{% endtimenode %}

{% timenode 2020-05-15 %}

下雨了，适合在房间

{% endtimenode %}

{% timenode 2020-04-20 %}

有空一起拉屎

{% endtimenode %}

{% endtimeline %}

2020-07-24

天气不错，适合出去约妹

2020-05-15

下雨了，适合在房间

2020-04-20

有空一起拉屎

##链接卡片 link

1
{% link GitHub, https://github.com, https://cdn.jsdelivr.net/gh/cpddo/p_img@450ea647ca67bd386416a689f3eb1bc6a508b3b9/2021/01/23/f7ac7b26db76ada1704f6af09bedacbe.webp %}

GitHub

https://github.com

##按钮 btns
###1. 一组含有头像的链接：

1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell GitHub, https://github.com/, https://cdn.jsdelivr.net/gh/cpddo/p_img@450ea647ca67bd386416a689f3eb1bc6a508b3b9/2021/01/23/f7ac7b26db76ada1704f6af09bedacbe.webp %}
{% cell 哔哩哔哩, https://www.bilibili.com/, https://cdn.jsdelivr.net/gh/cpddo/p_img@e642ee265c8ae2bbd0994716aa12b3adbe07f2c4/2021/01/23/2ceca69a212d3b9988bbd2c41edc636c.webp %}
{% cell Pixiv, https://www.pixiv.net/, https://cdn.jsdelivr.net/gh/cpddo/p_img@5c4fc20944c706aa452c31d1bddbdcc672e8c6ab/2021/01/23/7658d06315d32bcf0c954b3d8e8879e0.webp %}
{% cell YouTube, https://www.youtube.com/, https://cdn.jsdelivr.net/gh/cpddo/p_img@ff4781678ea6227f5824e3c8bfd5cc27441db4da/2021/01/23/f4e292c780275465c9150eb3cb0785a4.webp %}
{% cell 今日热榜, https://tophub.today/, https://cdn.jsdelivr.net/gh/cpddo/p_img@11fff6ed270722d709eb0ac88ce47f468c21d2ba/2021/01/23/cd22cd9d34d7d7bd58114d7d7a195822.webp %}
{% endbtns %}
GitHub 哔哩哔哩 Pixiv YouTube 今日热榜

###2. 含有图标的按钮：

1
2
3
4
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}
下载源码 查看文档

###3. 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

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'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p red, 专业版 %}
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p green, 免费版 %}
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}
心率管家

专业版

 心率管家

免费版

##github 卡片 ghcard
###1. 用户信息卡片

1
2
3
4
5
| {% ghcard jerryc127 %}               | {% ghcard Zfour, theme=vue %}              |
| ------------------------------------ | ------------------------------------------ |
| {% ghcard Akilarlxh, theme=buefy %}  | {% ghcard ruanyf, theme=solarized-light %} |
| {% ghcard philwebb, theme=onedark %} | {% ghcard zjwo, theme=solarized-dark %}    |
| {% ghcard vpavic, theme=algolia %}   | {% ghcard bclozel, theme=calm %}           |

###2. 仓库信息卡片

1
2
3
4
5
| {% ghcard spring-projects/spring-boot %}                 | {% ghcard mybatis/mybatis-3, theme=vue %}               |
| -------------------------------------------------------- | ------------------------------------------------------- |
| {% ghcard jerryc127/hexo-theme-butterfly, theme=buefy %} | {% ghcard alibaba/fastjson, theme=solarized-light %}    |
| {% ghcard alibaba/druid, theme=onedark %}                | {% ghcard alibaba/arthas, theme=solarized-dark %}       |
| {% ghcard Tencent/weui, theme=algolia %}                 | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |

##github 徽标 ghbdage
###1. 基本参数,定义徽标左右文字和图标

1
2
{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}

###2. 信息参数，定义徽标右侧内容背景色，指向链接

1
2
3
{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
// 如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}

// 如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割

###3. 拓展参数，支持shields的API的全部参数内容

1
2
3
{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署，默认线路托管于Vercel||style=social&logoWidth=20 %}
// 如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割
{% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}

// 如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割

##行内图片 inlineimage

1
2
3
你看我长得漂亮不

我觉得很漂亮 {% inlineImg https://7.dusays.com/2021/04/30/38c46d77eb99f.png 150px %}

你看我长得漂亮不

我觉得很漂亮

##单张图片 image

1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}
每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

##视频 video
###1. 100% 宽度

1
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/2d10a99a5285890815076699337/jDSbeLEbAvgA.mp4 %}

###2. 50% 宽度

1
2
3
4
5
6
{% videos, 2 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/c271d9f55285890808619247572/cvQ5JmaxQeIA.mp4 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/8373c2325285890808618842182/0G2tZMSgFlIA.mp4 %}
{% video https://bos.nj.bpc.baidu.com/tieba-smallvideo-transcode-crf/10517287_a019c0a4655b865403740b7b9d1f0622_0.mp4 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/62034a6a5285890805262027097/2ZZqs2WH2HUA.mp4 %}
{% endvideos %}

###3. 25% 宽度

1
2
3
4
5
6
7
8
9
10
{% videos, 4 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/dbb2338d5285890805087414392/iPOPAzDcziQA.mp4 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/dbaff9015285890805087410150/hFeFC3ppTLsA.mp4 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/b6ccab4b5285890805073207494/crb6Lmf26tQA.mp4 %}
{% video https://sf1-ttcdn-tos.pstatp.com/obj/tos-cn-v-0004/aeacaeb49b1a4bf483d93356091fad60 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/3c5d29755285890805529884127/jgf48juQ7PoA.mp4 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/63f968535285890808730645862/Gg7ng1DpoJwA.mp4 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/562fa8ea5285890808730073912/cAJgQKS0gL8A.mp4 %}
{% video https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/5d54d76e5285890808730396152/z0aYxeAto3QA.mp4 %}
{% endvideos %}

##折叠框 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
{% folding 查看图片测试 %}
![images](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}
这是一个默认打开的折叠框。
{% endfolding %}

{% folding green, 查看代码测试 %}
​```java
public class Test {

}
​```
{% endfolding %}

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

- haha
- hehe
  {% endfolding %}

{% folding red, 查看嵌套测试 %}
{% folding blue, 查看嵌套测试2 %}
{% folding 查看嵌套测试3 %}
hahaha😜
{% endfolding %}
{% endfolding %}
{% endfolding %}
查看图片测试

images

查看默认打开的折叠框

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

查看代码测试

​```java
public class Test {

}
​```

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha😜

##分栏 tab

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

##诗词标签 poem

1
2
3
{% poem 滕王阁序,王勃 %}
飞流直下三万尺，疑是银河落十天。
{% endpoem %}
滕王阁序
王勃

豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。(豫章故郡 一作：南昌故郡；青霜 一作：清霜)

　　时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。（层峦 一作：层台；即冈 一作：列冈；飞阁流丹 一作：飞阁翔丹）

　　披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。(轴 通：舳；迷津 一作：弥津；云销雨霁，彩彻区明 一作：虹销雨霁，彩彻云衢)

　　遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？(遥襟甫畅 一作：遥吟俯畅)

　　嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！(见机 一作：安贫；以犹欢 一作：而相欢)

　　勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？

　　呜呼！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：
　　滕王高阁临江渚，佩玉鸣鸾罢歌舞。
　　画栋朝飞南浦云，珠帘暮卷西山雨。
　　闲云潭影日悠悠，物换星移几度秋。
　　阁中帝子今何在？槛外长江空自流。

##label
臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

##进度条

1
2
3
4
5
6
{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

##button

1
2
3
4
5
This is my website, click the button {% btn 'https://a-wei-y.top/',MyBlog %}
This is my website, click the button {% btn 'https://a-wei-y.top/',MyBlog,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://a-wei-y.top/',MyBlog,,outline %}
This is my website, click the button {% btn 'https://a-wei-y.top/',MyBlog,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://a-wei-y.top/',MyBlog,far fa-hand-point-right,larger %}

This is my website, click the button MyBlog
This is my website, click the button MyBlog
This is my website, click the button MyBlog
This is my website, click the button MyBlog
This is my website, click the button MyBlog