Markdown语法自带格式
特效标签
zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次
zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次
heartBeat动画效果，延时5s，重复10次。
1 | {% wow animate__zoomIn,5s,5s,100,10 %} |
标题 01
H3
H4
H5
H6
代码块
段落首航缩进
使用全角空格实现段落缩进
使用半角空格是段落缩进
1 | [参考链接](https://blog.csdn.net/manchan4869/article/details/128699543) |
字体
下划线演示
文字加粗演示
文字斜体演示
文本高亮演示
文本删除线演示
| 这里的背景色是：MistyRosen，此处输入任意想输入的内容 |
1 | <u>下划线演示</u> |
分割线
1 | --- |
文本链接
其中post_link链接后需要链接的是post目录下的文章标题，且链接需要推送到git以后才会生效
1 | 1. [Markdown语法](http://localhost:4000/posts/d2d7725.html) |
网站卡片
1 | {% sitegroup %} |
1 | {% sitegroup %} |
链接卡片
1 | {% link 标题, 链接, 图片链接（可选） %} |
1 | {% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, https://cdn.cbd.int/akilar-candyassets@1.0.36/image/siteicon/favicon.ico %} |
图片
行内图片
1 | {% inlineimage 图片链接, height=高度（可选） %} |
高度：height=20px
1 | 这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。 |
这是 
一段话。
这又是 
一段话。
单张图片
1 | {% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %} |
图片宽度高度：width=300px, height=32px
图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）
占位背景色：bg=#f2f2f2
1.添加描述：
1 | {% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %} |
2.指定宽度1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}
3.指定宽度并添加描述：1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}
4.设置占位背景色：1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}
1.添加描述：
音频
1 | {% audio 音频链接 %} |
1 | {% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} |
视频
1 | {% video 视频链接 %} |
对齐方向：left, center, right
列数：逗号后面直接写列数，支持 1 ～ 4 列。
1.100%宽度1
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
2.50%宽度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 %}
3.25%宽度1
2
3
4
5
6
7
8
9
10{% 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 %}
{% 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 %}
1.100%宽度
2.50%宽度相册
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>
gallery 相册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>
gallerygroup 相册图库
参数名 释义
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>
2.gallery 相册1
2
3
4{% gallery %}
{% endgallery %}
强制换行
行尾连续两个空格
本地图片
表格
| 项目标号 | 资金 | 备注 |
|---|---|---|
| 1 | 100，000 | 无 |
| 2 | 200，000 | 无 |
| 3 | 300,600 | 重要 |
1 |
|
公式
1 | $$ |
上标签
default
info
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标
1 |
|
行内文本样式 text
- 带 下划线 的文本
- 带
着重号 的文本 - 带
波浪线 的文本 - 带
删除线的文本 - 键盘样式的文本 command + D
- 密码样式的文本：
这里没有验证码
1 | 1. 带 {% u 下划线 %} 的文本 |
行内文本 span
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。 - 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
Volantis
A Wonderful Theme for Hexo
1 | - 彩色文字 |
时间轴
时间轴样式
2020-07-24 2.6.6 -> 3.0
- 如果有
hexo-lazyload-image插件，需要删除并重新安装最新版本，设置lazyload.isSPA: true。 - 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了
use_cdn: true则需要删除。 - 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
- 2.x 版本的置顶
top: true改为了pin: true，并且同样适用于layout: page的页面。 - 如果使用了
hexo-offline插件，建议卸载，3.0 版本默认开启了 pjax 服务。
2020-05-15 2.6.3 -> 2.6.6
不需要额外处理。
2020-04-20 2.6.2 -> 2.6.3
- 全局搜索
seotitle并替换为seo_title。 - group 组件的索引规则有变，使用 group 组件的文章内，
group: group_name对应的组件名必须是group_name。 - group 组件的列表名优先显示文章的
short_title其次是title。
1 | {% timeline 时间轴样式,blue %} |
1 | {% timeline 时间线标题（可选）[,color] %} |
1.title:标题/时间线
2.color:timeline颜色:default(留空) / blue / pink / red / purple / orange / green
折叠框
查看图片测试
查看默认打开的折叠框
这是一个默认打开的折叠框。
查看代码测试
假装这里有代码块（代码块没法嵌套代码块）
查看列表测试
- haha
- hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
hahaha 
分栏
Any content (support inline tags too).
Any content (support inline tags too).
1 | {% tabs test1, [index] %} |
诗词标签
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
1 | {% poem 水调歌头,苏轼 %} |
隐藏块
1 | {% hideBlock 点我预览, blue %} |
1 | {% hideBlock display,bg,color %} |
content：要隐藏的内容
display：展示前按钮显示的文字（可选）
bg：按钮的背景颜色（可选）
color：按钮显示的文字的颜色（可选）
注释
把鼠标移动到我上面试试
1 | {% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %} |
气泡注释
气泡注释 一种文章详细注释 </span>
最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如 CSS 的兄弟相邻选择器例如 h1 + p {margin-top:50px;}</span>，flex布局Flex 是 Flexible Box 的缩写，意为弹性布局”，用来为盒状模型提供最大的灵活性”</span>，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。</span>，animation 的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋</span>写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。</span>属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。
1 | {% bubble [content] , [notation] ,[background-color] %} |
content: 注释词汇otation: 悬停显示的注解内容background-color: 可选，气泡背景色。默认为“#71a4e3”
1 | 最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如 CSS 的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %}，{% bubble flex布局,"Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性","#ec5830" %}，{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %}，animation 的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋","#de4489" %}写法，还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。 |
引用文献
Akilar の糖果屋(akilar.top)是一个私人性质的博客[1]Akilarの糖果屋群聊简介参考资料，从各类教程至生活点滴，无话不谈。建群的目的是提供一个闲聊的场所。博客采用 Hexo 框架[2]Hexo中文文档参考资料，Butterfly 主题[3]Butterfly 安装文档(一) 快速开始参考资料
本项目参考了 Volantis[4]hexo-theme-volantis 标签插件参考资料的标签样式。引入[tag].js，并针对butterfly主题修改了相应的[tag].styl。在此鸣谢Volantis主题众开发者。
主要参考内容包括各个 volantis 的内置标签插件文档[5]Volantis文档:内置标签插件参考资料
Butterfly 主题的各个衍生魔改[6]Butterfly 安装文档:标签外挂（Tag Plugins参考资料[7]小弋の生活馆全样式预览参考资料[8]l-lin-font-awesome-animation参考资料[9]小康的butterfly主题使用文档参考资料
mermaid图表
状态图
stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
1 | stateDiagram-v2 |
时序图
sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later!
1 | sequenceDiagram |
流程图
graph TD Start --> Stop Start --> next
1 | graph TD |
关系图
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses1 | erDiagram |
类图
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}1 | classDiagram |
旅程图
journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 7: Me
1 | journey |
甘特图
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 3d Another task :after a1 , 20d java :5d section Another Task in sec :2014-01-12 , 12d another task : 24d
1 | gantt |
饼图
pie title 饮食统计 "蔬菜" : 38 "肉蛋" : 85 "水果" : 15 "有机蛋白" : 45
1 | pie title 饮食统计 |
公式格式
1 | $$ |
横向流程图
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]1 | graph LR |
graph TD A(开始) --> B[存储变量及用户界面] B --> C[用户根据界面提示输入]
graph LR
A(开始) -->B[存储变量及用户界面]
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
