这部分参考👉Fomalhaout
恰到好处的使用标签，能使文章清晰明了
行内文本样式 行内文本样式text 1 2 3 4 5 6 1. 带 {% u 下划线 %} 的文本2. 带 {% emp 着重号 %} 的文本3. 带 {% wavy 波浪线 %} 的文本4. 带 {% del 删除线 %} 的文本5. 键盘样式的文本 {% kbd command %} + {% kbd D %}6. 密码样式的文本：{% psw 这里没有验证码 %}
带 下划线 的文本
带 着重号 的文本
带 波浪线 的文本
带 删除线 的文本
键盘样式的文本 command + D
密码样式的文本：这里没有验证码
行内文本 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 %}
彩色文字红色 、黄色 、绿色 、青色 、蓝色 、灰色 。
超大号文字Volantis A Wonderful Theme for Hexo
网站卡片 sites 1 2 3 4 {% sitegroup %} {% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %} {% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %} {% endsitegroup %}
1 2 3 4 5 6 7 {% sitegroup %} {% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/avatar/avatar.png, description=简约风格 %} {% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %} {% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %} {% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %} {% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %} {% endsitegroup %}
行内图片 inlineimage 1 {% inlineimage 图片链接, height=高度（可选） %}
1 2 3 这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。 这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。
这是
这又是
单张图片 image 1 {% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}
图片宽度高度：width=300px, height=32px
1.添加描述：1 {% image https://picbed.xusir.fun/img/post_default_ 11.webp, alt=每天下课回宿舍的路，没有什么故事。 %}
1 {% image https://picbed.xusir.fun/img/post_default_ 11.webp, width=400px %}
1 {% image https://picbed.xusir.fun/img/post_default_ 11.webp, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}
1 {% image https://picbed.xusir.fun/img/post_default_ 11.webp, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}
1.添加描述：
2.指定宽度：
3.指定宽度并添加描述：
4.设置占位背景色：
相册 gallery 1.gallerygroup 相册图库1 2 3 4 5 <div class ="gallery-group-main" > {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} </div >
1 2 3 {% gallery %} markdown 圖片格式 {% endgallery %}
参数名
释义
name
图库名字
description
图库描述
link
链接到对应相册的地址
img-url
图库封面
gallery
相册
区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版，书写也更加方便，与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）
1.gallerygroup 相册图库1 2 3 4 5 <div class ="gallery-group-main" > {% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 '/gallery/MC/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/1.jpg %} {% galleryGroup Gundam 哦咧哇gundam哒！ '/gallery/Gundam/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907110508327.png %} {% galleryGroup I-am-Akilar 某种意义上也算自拍吧 '/gallery/I-am-Akilar/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907113116651.png %} </div >
1 2 3 4 {% gallery %}   {% endgallery %}
1.gallerygroup 相册图库
MC
在Rikkaの六花服务器里留下的足迹
Gundam
哦咧哇gundam哒！
I-am-Akilar
某种意义上也算自拍吧
2.gallery 相册
[{"url":"https://picbed.xusir.fun/img/post_default_1.webp","alt":"tu"},{"url":"https://picbed.xusir.fun/img/post_default_2.webp","alt":"tu"}]
诗词标签 poem 1 2 3 4 5 6 7 8 9 10 11 12 {% poem 水调歌头,苏轼 %} 丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。 不知天上宫阙，今夕是何年？ 我欲乘风归去，又恐琼楼玉宇，高处不胜寒。 起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。 不应有恨，何事长向别时圆？ 人有悲欢离合，月有阴晴圆缺，此事古难全。 但愿人长久，千里共婵娟。 {% endpoem %}
水调歌头
苏轼
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
转朱阁，低绮户，照无眠。
进度条 progress
进度条标签参考沂佰孜猫-给HEXO文章添加彩色进度条 。Cuteen 主题。
1 {% progress [width] [color] [text] %}
width: 0到100的阿拉伯数字
color: 颜色，取值有red,yellow,green,cyan,blue,gray
text:进度条上的文字内容
1 2 3 4 5 6 {% progress 10 red 进度条样式预览 %} {% progress 30 yellow 进度条样式预览 %} {% progress 50 green 进度条样式预览 %} {% progress 70 cyan 进度条样式预览 %} {% progress 90 blue 进度条样式预览 %} {% progress 100 gray 进度条样式预览 %}
注释 notation 1 {% nota [label] , [text] %}
label: 注释词汇
text: 悬停显示的注解内容
1 {% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}
隐藏块 1 2 3 {% hideBlock display,bg,color %} content {% endhideBlock %}
content：要隐藏的内容
display：展示前按钮显示的文字（可选）
bg：按钮的背景颜色（可选）
color：按钮显示的文字的颜色（可选）
1 2 3 4 {% hideBlock 点我预览, blue %} 这里有张图片： <img src ="https://picbed.xusir.fun/img/post_default_14.webp" alt ="image (1)" style ="zoom:67%;" /> {% endhideBlock %}
点我预览
这里有张图片：
1 {% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
[url] : 链接
1 2 3 {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block center larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block right outline larger %}
Timeline 1 2 3 4 5 6 7 8 {% timeline title,color %} <!-- timeline title --> xxxxx <!-- endtimeline --> <!-- timeline title --> xxxxx <!-- endtimeline --> {% endtimeline %}
参数
解释
title
标题/时间线
color
timeline 颜色 default(留空) / blue / pink / red / purple / orange / green
1 2 3 4 5 6 7 8 {% timeline 2022,red %} <!-- timeline 07-02 --> 这是测试页面1 <!-- endtimeline --> <!-- timeline 01-02 --> 这是测试页面2 <!-- endtimeline --> {% endtimeline %}
按钮 btns 1 2 3 4 {% btns 样式参数 %} {% cell 标题, 链接, 图片或者图标 %} {% cell 标题, 链接, 图片或者图标 %} {% endbtns %}
圆角样式：rounded, circle
增加文字样式：可以在容器内增加 标题 和描述文字
布局方式：
参数
含义
wide
宽一点的按钮
fill
填充布局，自动铺满至少一行，多了会换行
center
居中，按钮之间是固定间距
around
居中分散
grid2
等宽最多2列，屏幕变窄会适当减少列数
grid3
等宽最多3列，屏幕变窄会适当减少列数
grid4
等宽最多4列，屏幕变窄会适当减少列数
grid5
等宽最多5列，屏幕变窄会适当减少列数
1.如果需要显示类似「团队成员」之类的一组含有头像的链接1 2 3 4 5 6 7 {% btns circle grid5 %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% endbtns %}
1 2 3 4 {% btns rounded grid5 %} {% cell 下载源码, /, fas fa-download %} {% cell 查看文档, /, fas fa-book-open %} {% endbtns %}
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/fomalhaut1998/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/fomalhaut1998/cdn-assets/qrcode/heartmate_lite.png' > </a > {% endbtns %}
1.如果需要显示类似「团队成员」之类的一组含有头像的链接
2.或者含有图标的按钮
3.圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
一段话。
一段话。
xaoxuu
