写在最前面

本文参考链接
Markdown格式与Butterfly外挂格式
https://winterdev.cn/posts/2013454d#1-Markdown%E8%AF%AD%E6%B3%95%E8%87%AA%E5%B8%A6%E6%A0%BC%E5%BC%8F

参考资料

项目地址：https://github.com/anzhiyu-c/hexo-theme-anzhiyu
官方文档：https://docs.anheyu.com/initall.html
https://hexo.io/zh-cn/
https://www.fomal.cc/posts/e593433d.html
https://docs.anheyu.com/

安知鱼标签文档
https://hexo.anheyu.com/posts/d50a.html

代码块

1
2
3
4
5
6
7
8
9
10
11

# VSCode终端
hexo clean; hexo s
hexo clean; hexo g; hexo d
git add .; git commit -m "npm publish"; npm version patch; 
git push

# Cmder终端
hexo clean && hexo s
hexo clean && hexo g && hexo d
git add . && git commit -m "npm publish" && npm version patch
git push

多级标签

1
2
3
4
5
6

# H1
## H2
### H3
#### H4
##### H5
###### H6

文字样式

下划线演示
文字加粗演示
文字斜体演示
文本高亮演示
文本删除线演示
5号字
黑体
蓝色

引用块

Java
二级引用演示
MySQL

外键

第三层

第四层
内容

第五层
内容

第六层
内容

第七层
内容

第八层
内容

第九层
内容

第十层
内容

第十一层
内容

第十二层
内容

第十三层
内容

第十四层
内容高亮显示内容

第十五层
内容重点显示内容

行级锁(引用内部一样可以用格式)

….

设计

大家好，才是真的好！
为人民服务

Steven Blog 如何安装docker&docker Compose

分割线

列表(*,+,-跟空格都可以)

无序列表

• Java
• Python
• …

• Java
• Python
• …

• Java
• Python
• …

有序列表

注意后面有空格

1. fist
2. second
3. third
4. fourth

图片

本地图片

在线图片

表格

公式

$$
\Gamma(z)=\int_0^\infty t^{z-1}e^{-t}dt.
$$

行内文本样式

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

行内文本span

字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right

• 彩色文字
  在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
• 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。

引用note

1. 自带icon的引用块

   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. 外部icon

   1.simple样式

   1 2 3 4 5 6 7

   {% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %} {% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %} {% note red 'fas fa-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 %}

1. 内部icon样式

simple样式

modern样式

flat样式

disabled样式

no icon功能

2. 外部icon样式

1.simple样式

2.modern样式

3.flat样式

4.disabled样式

5.no-icon样式

上标标签tip

动态标签

1.On DOM load（当页面加载时显示动画）

2.调整动画速度

3.On hover（当鼠标悬停时显示动画）

4.On click（当点击时显示动画）

5.On focus（当获得焦点时显示动画）

6.On parent hover（当父元素悬停时显示动画）

复选框标签checkbox

单选列表radio

时间轴timeline

链接卡片link

按钮btn

圆角样式：rounded, circle
增加文字样式：可以在容器内增加 标题和

描述文字

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

xaoxuu xaoxuu xaoxuu xaoxuu 标题和

描述文字

2.或者含有图标的按钮

下载源码 查看文档

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

心率管家

专业版

心率管家

免费版

github徽标 ghbdage

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

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

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

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

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

网站卡片 sites

xaoxuu

inkss

MHuiG

Colsrch

Linhk1606

行内图片 inlineimage

这是 一段话。

这又是 一段话。

单张图片 image

1.添加描述：

每天下课回宿舍的路，没有什么故事。

2.指定宽度

3.指定宽度并添加描述：

每天下课回宿舍的路，没有什么故事。

4.设置占位背景色：

优化不同宽度浏览的观感

音频

视频

1.100%宽度

3.25%宽度

相册 gallery

1.gallerygroup 相册图库

2.gallery 相册

折叠框 folding

分栏 tab

1.Demo 1 - 预设选择第一个【默认】

2.Demo 2 - 预设选择tabs

3.Demo 3 - 没有预设值

4.Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名

气泡注释 bubble

最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex布局Flex 是 Flexible Box 的缩写，意为弹性布局"，用来为盒状模型提供最大的灵活性"，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

引用文献 reference

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主题使用文档参考资料