Markdown语法与Butterfly外挂标签写法汇总

1.Markdown语法自带格式

1.1 代码块

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

1.2 文字样式

下划线演示

文字加粗演示

文字斜体演示

文本高亮演示

文本删除线演示

5号字黑体蓝色

这里的背景色是：MistyRosen

1.3 引用

Java
二级引用演示
MySQL

外键

事务

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

….

1.4 表格

项目标号	资金	备注
1	100，000	无
2	200，000	无
3	300,600	重要

1.5 公式

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

2.Butterfly外挂标签

2.1 行内文本样式 text

带下划线的文本
带着重号的文本
带波浪线的文本
带 ~~删除线~~ 的文本
键盘样式的文本 command + D
密码样式的文本：这里没有验证码

2.2 行内文本 span

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

2.3 段落文本 p

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

Volantis

A Wonderful Theme for Hexo

2.4 引用note

默认标签

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

自带标签

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

2.5 上标标签 tip

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

2.6 复选列表 checkbox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

2.7 单选列表 radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

2.8 时间轴 timeline

时间轴样式

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。

2.9 链接卡片 link

糖果屋教程贴

https://akilar.top/posts/615e2dec/

2.10 按钮 btns

如果需要显示类似「团队成员」之类的一组含有头像的链接
xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu
或者含有图标的按钮
下载源码查看文档
圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
心率管家
专业版
 心率管家
免费版

2.11 github卡片 ghcard

用户信息卡片
仓库信息卡片

2.12 网站卡片 sites

Colsrch这是一段关于这个网站的描述文字

Linhk1606这是一段关于这个网站的描述文字

2.13 行内图片 inlineimage

这是一段话。

这又是一段话。

2.14 单张图片 image

添加描述

每天下课回宿舍的路，没有什么故事。
指定宽度
指定宽度并添加描述

每天下课回宿舍的路，没有什么故事。
设置占位背景色

优化不同宽度浏览的观感

2.15 音频 audio

2.16 视频 video

100%宽度

2. 50%宽度
25%宽度

2.17 相册 gallery

gallerygroup 相册图库

MC

在Rikkaの六花服务器里留下的足迹

Gundam

哦咧哇gundam哒！

I-am-Akilar

某种意义上也算自拍吧
gallery 相册

[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":"","title":""}]

2.18 折叠框 folding

查看图片测试

查看默认打开的折叠框

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

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试

haha
hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

2.19 分栏 tab

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

This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 2 - 预设选择tabs

This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 3 - 没有预设值

This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名

tab名字为第一个Tab
只有图标没有Tab名字
名字+icon

2.20 特效标签wow

flip动画效果

zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次
zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次

zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次
slideInRight动画效果，持续5s，延时5s

slideInRight动画效果，持续5s，延时5s。
heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔。

heartBeat动画效果，延时5s，重复10次。

2.21 进度条 progress

进度条样式预览

2.22 注释 notation

把鼠标移动到我上面试试

2.23 气泡注释 bubble

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

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