本文中的第二部分所使用的是butterfly外挂标签插件，安装教程在[博客魔改教程一 | mccsjs](https://hexo.seln.cn/posts/e7f6bd97/)可见# 1.Markdown语法自带格式
参考：[Markdown语法图文全面详解(10分钟学会)](https://blog.csdn.net/u014061630/article/details/81359144)
注意：此页面偶尔会存在CSS冲突问题!## 1.1 代码块 ```shell \```shell # 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 \``` ``` ```shell # 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 多级标题 ```markdown # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 ``` 见本文章标题! ## 1.3 文字样式 ```markdown 下划线演示 文字**加粗**演示 文字*斜体*演示 文本`高亮`演示 文本~~删除~~线演示 5号字 黑体 蓝色 ``` 下划线演示 文字**加粗**演示 文字*斜体*演示 文本`高亮`演示 文本~~删除~~线演示 5号字 黑体 蓝色
| 这里的背景色是：MistyRosen，此处输入任意想输入的内容 |
上述要点可参考:[【Markdown语法】字体颜色大小及文字底色设置](https://blog.csdn.net/qq_43732429/article/details/108034518)## 1.4 引用 ```markdown > Java > 二级引用演示 > MySQL > >外键 > > > >事务 > > > >**行级锁**(引用内部一样可以用格式) > > .... ``` > Java > 二级引用演示 > MySQL > >外键 > > > >事务 > > > >**行级锁**(引用内部一样可以用格式) > > .... ## 1.5 分割线 ```markdown --- *** ``` --- *** ## 1.6 列表(*,+,-跟空格都可以) ### 1.6.1 无序列表 ```markdown * Java * Python * ... + Java + Python + ... - Java - Python - ... ``` * Java * Python * ... + Java + Python + ... - Java - Python - ... ### 1.6.2 有序列表 ```markdown # 注意后面有空格 1. 2. 3. 4. ``` 1. 2. 3. 4. ## 1.7 图片 ```markdown # 本地图片
# 在线图片
```
本地图片:
在线图片:
## 1.8 表格
```markdown
| 项目标号 | 资金 | 备注 |
| -------- | -------- | ---- |
| 1 | 100，000 | 无 |
| 2 | 200，000 | 无 |
| 3 | 300,600 | 重要 |
```
| 项目标号 | 资金 | 备注 |
| -------- | -------- | ---- |
| 1 | 100，000 | 无 |
| 2 | 200，000 | 无 |
| 3 | 300,600 | 重要 |
# 2.Butterfly外挂标签
这部分参考安知鱼:[基于Butterfly的外挂标签引入](https://anzhiy.cn/posts/7d58.html)## 2.1 行内文本样式 text ```markdown ``` ```markdown 1. 带 的文本 2. 带 的文本 3. 带 的文本 4. 带 的文本 5. 键盘样式的文本 + 6. 密码样式的文本： ``` 1. 带 的文本 2. 带 的文本 3. 带 的文本 4. 带 的文本 5. 键盘样式的文本 + 6. 密码样式的文本： ## 2.2 行内文本 span ```markdown ``` 1. `字体`: logo, code 2. `颜色`: red,yellow,green,cyan,blue,gray 3. `大小`: small, h4, h3, h2, h1, large, huge, ultra 4. `对齐方向`: left, center, right ```markdown - 彩色文字 在一段话中方便插入各种颜色的标签，包括：、、、、、。 - 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 ``` - 彩色文字 在一段话中方便插入各种颜色的标签，包括：、、、、、。 - 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 ## 2.3 段落文本 p ```markdown ``` 1. `字体`: logo, code 2. `颜色`: red,yellow,green,cyan,blue,gray 3. `大小`: small, h4, h3, h2, h1, large, huge, ultra 4. `对齐方向`: left, center, right ```markdown - 彩色文字 在一段话中方便插入各种颜色的标签，包括：、、、、、。 - 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 ``` - 彩色文字 在一段话中方便插入各种颜色的标签，包括：、、、、、。 - 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 ## 2.4 引用note ```markdown note: # Note tag style values: # - simple bs-callout old alert style. Default. # - modern bs-callout new (v2-v3) alert style. # - flat flat callout style with background, like on Mozilla or StackOverflow. # - disabled disable all CSS styles import of note tag. style: simple icons: false border_radius: 3 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset: 0 ``` ```markdown # 自带icon
Any content (support inline tags too.io).# 外部icon
Any content (support inline tags too.io).``` 1.自带icon | 参数 | 用法 | | ------- | :----------------------------------------------------------: | | class | 【可选】标识，不同的标识有不同的配色 （ default / primary / success / info / warning / danger ） | | no-icon | 【可选】不显示 icon | | style | 【可选】可以覆盖配置中的 style （simple/modern/flat/disabled） | 2.外部icon | 参数 | 用法 | | ------- | :----------------------------------------------------------: | | class | 【可选】标识，不同的标识有不同的配色 （ default / blue / pink / red / purple / orange / green ） | | no-icon | 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon ) | | style | 【可选】可以覆盖配置中的 style （simple/modern/flat/disabled） |
1.自带icon
1.`simple`样式 ```markdown默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签``` 2.`modern`样式 ```markdown
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签``` 3.`flat`样式 ```markdown
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签``` 4.`disabled`样式 ```markdown
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签``` 5.`no-icon`样式 ```markdown
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签```
2.外部icon
1.`simple`样式 ```markdown你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器``` 2.`modern`样式 ```markdown
你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器``` 3.`flat`样式 ```markdown
你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器``` 4.`disabled`样式 ```markdown
你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器``` 5.`no-icon`样式 ```markdown
你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器```
1.自带icon
1.`simple`样式默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签2.`modern`样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签3.`flat`样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签4.`disabled`样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签5.`no-icon`样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
2.外部icon
1.`simple`样式你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器2.`modern`样式
你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器3.`flat`样式
你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器4.`disabled`样式
你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器5.`no-icon`样式
你是刷 Visa 还是 UnionPay
2021年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
文本内容``` 1. `样式`: success,error,warning,bolt,ban,home,sync,cogs,key,bell 2. `自定义图标`: 支持fontawesome。 ```markdown
default
info
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标```
default
info
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标## 2.6 动态标签 anima ```markdown
文本内容```
1. 将所需的CSS类添加到图标（或DOM中的任何元素）。 2. 对于父级悬停样式，需要给目标元素添加指定CSS类，同时还要给目标元素的父级元素添加CSS类`faa-parent animated-hover`。（详情见示例及示例源码） You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow 3. 可以通过给目标元素添加CSS类`faa-fast`或`faa-slow`来控制动画快慢。1.On DOM load（当页面加载时显示动画） ```markdown
warning
ban``` 2.调整动画速度 ```markdown
warning
ban``` 3.On hover（当鼠标悬停时显示动画） ```markdown
warning
ban``` 4.On parent hover（当鼠标悬停在父级元素时显示动画） ```markdown
warning
``` 1.On DOM load（当页面加载时显示动画）ban
warning
ban2.调整动画速度
warning
ban3.On hover（当鼠标悬停时显示动画）
warning
ban4.On parent hover（当鼠标悬停在父级元素时显示动画）
warning
## 2.7 复选列表 checkbox ```markdown ``` 1. `样式`: plus, minus, times 2. `颜色`: red,yellow,green,cyan,blue,gray 3. `选中状态`: checked ```markdown ``` ## 2.8 单选列表 radio ```markdown ``` 1. `颜色`: red,yellow,green,cyan,blue,gray 2. `选中状态`: checked ```markdown ``` ## 2.9 时间轴 timeline ```markdown 正文内容 正文内容 ``` 1. `title`:标题/时间线 2. `color`:`timeline`颜色:default(留空) / blue / pink / red / purple / orange / green ```markdown 1. 如果有 `hexo-lazyload-image` 插件，需要删除并重新安装最新版本，设置 `lazyload.isSPA: true`。 2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 `use_cdn: true` 则需要删除。 3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。 4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`，并且同样适用于 `layout: page` 的页面。 5. 如果使用了 `hexo-offline` 插件，建议卸载，3.0 版本默认开启了 pjax 服务。 不需要额外处理。 1. 全局搜索 `seotitle` 并替换为 `seo_title`。 2. group 组件的索引规则有变，使用 group 组件的文章内，`group: group_name` 对应的组件名必须是 `group_name`。 2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。 ``` 1. 如果有 `hexo-lazyload-image` 插件，需要删除并重新安装最新版本，设置 `lazyload.isSPA: true`。 2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 `use_cdn: true` 则需要删除。 3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。 4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`，并且同样适用于 `layout: page` 的页面。 5. 如果使用了 `hexo-offline` 插件，建议卸载，3.0 版本默认开启了 pjax 服务。 不需要额外处理。 1. 全局搜索 `seotitle` 并替换为 `seo_title`。 2. group 组件的索引规则有变，使用 group 组件的文章内，`group: group_name` 对应的组件名必须是 `group_name`。 2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。 ## 2.10 链接卡片 link ```markdown ``` ```markdown ``` ## 2.11 按钮 btns ```markdown ``` 1. 圆角样式：rounded, circle 2. 增加文字样式：可以在容器内增加 ``标题``和`ban
`描述文字`
` 3. 布局方式： 默认为自动宽度，适合视野内只有一两个的情况。 | 参数 | 含义 | | ------ | -------------------------------------- | | wide | 宽一点的按钮 | | fill | 填充布局，自动铺满至少一行，多了会换行 | | center | 居中，按钮之间是固定间距 | | around | 居中分散 | | grid2 | 等宽最多2列，屏幕变窄会适当减少列数 | | grid3 | 等宽最多3列，屏幕变窄会适当减少列数 | | grid4 | 等宽最多4列，屏幕变窄会适当减少列数 | | grid5 | 等宽最多5列，屏幕变窄会适当减少列数 | 1.如果需要显示类似「团队成员」之类的一组含有头像的链接 ```markdown ``` 2.或者含有图标的按钮 ```markdown ``` 3.圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 ```markdown 心率管家
心率管家
```
1.如果需要显示类似「团队成员」之类的一组含有头像的链接
2.或者含有图标的按钮
3.圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
心率管家
心率管家
## 2.12 github卡片 ghcard
```markdown
```
使用`,`分割各个参数。写法为：`参数名=参数值`
以下只写几个常用参数值。
| **参数名** | 取值 | 释义 |
| ------------- | ------------------------------------------------------------ | -------------------------------- |
| hide | stars,commits,prs,issues,contribs | 隐藏指定统计 |
| count_private | true | 将私人项目贡献添加到总提交计数中 |
| show_icons | true | 显示图标 |
| theme | 查阅:[Available Themes](https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md) | 主题 |
1.用户信息卡片
```markdown
| | |
| -- | -- |
| | |
| | |
| | |
```
2.仓库信息卡片
```markdown
| | |
| -- | -- |
| | |
| | |
| | |
```
1.用户信息卡片
| | |
| -- | -- |
| | |
| | |
| | |
2.仓库信息卡片
| | |
| -- | -- |
| | |
| | |
| | |
## 2.13 github徽标 ghbdage
```markdown
```
1. `left`：徽标左边的信息，必选参数。
2. `right`: 徽标右边的信息，必选参数，
3. `logo`：徽标图标，图标名称详见[simpleicons](https://simpleicons.org/)，可选参数。
4. `color`：徽标右边的颜色，可选参数。
5. `link`：指向的链接，可选参数。
6. `title`：徽标的额外信息，可选参数。主要用于优化SEO，但`object`标签不会像`a`标签一样在鼠标悬停显示`title`信息。
7. `option`：自定义参数，支持[shields.io](https://shields.io/)的全部API参数支持，具体参数可以参看上文中的拓展写法示例。形式为`name1=value2&name2=value2`。
1.基本参数,定义徽标左右文字和图标
```markdown
```
2.信息参数，定义徽标右侧内容背景色，指向链接
```markdown
//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
```
3.拓展参数，支持shields的API的全部参数内容
```markdown
//如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割
```
1.基本参数,定义徽标左右文字和图标
2.信息参数，定义徽标右侧内容背景色，指向链接
//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
3.拓展参数，支持shields的API的全部参数内容
//如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割
## 2.14 网站卡片 sites
```markdown
```
```markdown
```
## 2.15 行内图片 inlineimage
```markdown
```
1. `高度`：height=20px
```markdown
这是 一段话。
这又是 一段话。
```
这是 一段话。
这又是 一段话。
## 2.16 单张图片 image
```markdown
```
1. 图片宽度高度：width=300px, height=32px
2. 图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）
3. 占位背景色：bg=#f2f2f2
1.添加描述：
```markdown
```
2.指定宽度
```markdown
```
3.指定宽度并添加描述：
```markdown
```
4.设置占位背景色：
```markdown
```
1.添加描述：
2..指定宽度
3.指定宽度并添加描述：
4.设置占位背景色：
## 2.17 音频 audio
```markdown
```
```markdown
```
## 2.18 视频 video
```markdown
```
1. `对齐方向`：left, center, right
2. `列数`：逗号后面直接写列数，支持 1 ～ 4 列。
1.100%宽度
```markdown
```
2.50%宽度
```markdown
```
3.25%宽度
```markdown
```
1.100%宽度
2.50%宽度
3.25%宽度
## 2.19 相册 gallery
1.gallerygroup 相册图库
```markdown
标题
查看图片测试
查看默认打开的折叠框
这是一个默认打开的折叠框。查看代码测试
假装这里有代码块（代码块没法嵌套代码块）查看列表测试
- haha - hehe查看嵌套测试
hahaha
查看图片测试
查看默认打开的折叠框
这是一个默认打开的折叠框。查看代码测试
假装这里有代码块（代码块没法嵌套代码块）查看列表测试
- haha - hehe查看嵌套测试
hahaha
`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次``` 2.zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次 ```markdown
`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次``` 3.slideInRight动画效果，持续5s，延时5s ```markdown
`slideInRight`动画效果，持续`5s`，延时`5s`。``` 4.heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔。 ```markdown
`heartBeat`动画效果，延时`5s`，重复`10`次。``` 1.flip动画效果。
`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次2.zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次
`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次3.slideInRight动画效果，持续5s，延时5s
`slideInRight`动画效果，持续`5s`，延时`5s`。4.heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔。
`heartBeat`动画效果，延时`5s`，重复`10`次。## 2.25 进度条 progress
进度条标签参考[沂佰孜猫-给HEXO文章添加彩色进度条](https://rongbuqiu.com/jdt.html)。 源样式提取自[Cuteen](https://zwying0814.gitbook.io/cuteen/)主题。```markdown ``` 1. `width`: 0到100的阿拉伯数字 2. `color`: 颜色，取值有red,yellow,green,cyan,blue,gray 3. `text`:进度条上的文字内容 ```markdown ``` ## 2.26 注释 notation ```markdown ``` 1. `label`: 注释词汇 2. `text`: 悬停显示的注解内容 ```markdown ``` ## 2.27 气泡注释 bubble ```markdown ``` 1. `content`: 注释词汇 2. `notation`: 悬停显示的注解内容 3. `background-color`: 可选，气泡背景色。默认为“#71a4e3” ```markdown 最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的，，，animation的写法，还有今天刚看到的属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。 ``` 最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的，，，animation的写法，还有今天刚看到的属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。 ## 2.30 Hexo-tag-map 插件 ```markdown ``` | 地图名 | 标签值 <必填> | 宽 (默认 100%) / 高 (默认 360px) | 缩放等级 (默认 14) | 宽 (默认 100%) / 高 (默认 360px) | 默认图层 (默认 1) | | :-------------: | :-----------: | :------------------------------: | :----------------: | :------------------------------: | :---------------: | | 混合地图 | map | 百分数或具体值 (100% 或 360px) | 取值 3~18 | 百分数或具体值 (100% 或 360px) | 取值 1~7 | | 谷歌地图 | googleMap | 百分数或具体值 (100% 或 360px) | 取值 1~20 | 百分数或具体值 (100% 或 360px) | 取值 1~3 | | 高德地图 | gaodeMap | 百分数或具体值 (100% 或 360px) | 取值 3~18 | 百分数或具体值 (100% 或 360px) | 取值 1~3 | | 百度地图 | baiduMap | 百分数或具体值 (100% 或 360px) | 取值 4~18 | 百分数或具体值 (100% 或 360px) | 取值 1~2 | | Geoq 地图 | geoqMap | 百分数或具体值 (100% 或 360px) | 取值 1~18 | 百分数或具体值 (100% 或 360px) | 取值 1~5 | | openstreet 地图 | openstreetMap | 百分数或具体值 (100% 或 360px) | 取值 1~18 | 百分数或具体值 (100% 或 360px) | 不支持此参数 | 1. 参数之间，用英文逗号相隔 2. 参数必须按上述事例顺序输入，不得为空 3. 同一个页面，同一组经纬度值，只能插入一个相同标签值的地图 (若有需要，可以将第二个地图上，经度或纬度末尾删除一两个数) 4. 参数取值必须在上述范围内 5. 默认图层：即地图叠加层的值，默认常规地图还是卫星地图，可按地图显示顺序取值 6. 缩放等级，数字越大，地图比例尺越小，显示的越精细 7. 除标签值外，其他参数选填，但 每个参数的左边的参数必填 8. 谷歌地图需要外网才能加载查看 坐标获取：[高德地图坐标拾取系统](https://lbs.amap.com/tools/picker) 、[百度地图坐标拾取系统](https://api.map.baidu.com/lbsapi/getpoint/index.html) ```markdown ```
## 2.31 隐藏块 ```markdown