Markdown外挂标签语法
Markdown语法自带格式
参考: [Markdwon 语法官方教程](Markdown 基本语法 | Markdown 官方教程)
注意: 此页面偶尔会出现css冲突!
代码块
1 | VSCode终端 |
1 | `VSCode终端` |
多级标题
1 | <u>下划线演示</u> |
下划线演示
文字加粗演示
文字斜体演示
文本高亮
演示
文本删除线演示
5号字
黑体
蓝色
这里的背景色是:MistyRosen,此处输入任意想输入的内容 |
引入
1 | > Java |
Java
二级引用演示
MySQL
外键
事务
行级锁(引用内部一样可以用格式)
…
分割线
1 | --- |
列表
无序列表(*,+,-跟空格都可以)
1 | * Java |
- Java
- Python
- …
- Java
- Python
- …
- Java
- Python
- …
有序列表
1 | # 注意后面有空格 |
图片
1 | # 本地图片 |
本地图片
在线图片
表格
1 | | 项目标号 | 资金 | 备注 | |
项目标号 | 资金 | 备注 |
---|---|---|
1 | 100,000 | 无 |
2 | 200,000 | 无 |
3 | 300,600 | 重要 |
公式
1 | $$\Gamma(z)=\int_0^\infty t^{z-1}e^{-t}dt.$$ |
Butter外挂标签
这部分参考安知鱼:基于Butterfly的外挂标签引入
行内文本样式 text
1 | {% u 文本内容 %} |
1 | 1. 带 {% u 下划线 %} 的文本 |
- 带 下划线 的文本
- 带
着重号 的文本 - 带
波浪线 的文本 - 带
删除线的文本 - 键盘样式的文本 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 | - 彩色文字 |
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 - 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
Volantis
A Wonderful Theme for Hexo
段落文本 p
1 | {% p 样式参数(参数以空格划分), 文本内容 %} |
字体
: logo, code颜色
: red,yellow,green,cyan,blue,gray大小
: small, h4, h3, h2, h1, large, huge, ultra对齐方向
: left, center, right
1 | - 彩色文字 |
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:红色
,黄色
,绿色
,青色
,蓝色
,灰色
. - 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
Volantis
A Wonderful Theme for Hexo
引用 note
1 | note: |
1 | note: |
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) |
自带icon
simple
样式1
2
3
4
5
6
7
8
9
10
11
12
13{% 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 %}modern
样式1
2
3
4
5
6
7
8
9
10
11
12
13{% note modern %}默认 提示块标签{% endnote %}
{% note default modern %}default 提示块标签{% endnote %}
{% note primary modern %}primary 提示块标签{% endnote %}
{% note success modern %}success 提示块标签{% endnote %}
{% note info modern %}info 提示块标签{% endnote %}
{% note warning modern %}warning 提示块标签{% endnote %}
{% note danger modern %}danger 提示块标签{% endnote %}flat
样式1
2
3
4
5
6
7
8
9
10
11
12
13{% note flat %}默认 提示块标签{% endnote %}
{% note default flat %}default 提示块标签{% endnote %}
{% note primary flat %}primary 提示块标签{% endnote %}
{% note success flat %}success 提示块标签{% endnote %}
{% note info flat %}info 提示块标签{% endnote %}
{% note warning flat %}warning 提示块标签{% endnote %}
{% note danger flat %}danger 提示块标签{% endnote %}disabled
样式1
2
3
4
5
6
7
8
9
10
11
12
13{% note disabled %}默认 提示块标签{% endnote %}
{% note default disabled %}default 提示块标签{% endnote %}
{% note primary disabled %}primary 提示块标签{% endnote %}
{% note success disabled %}success 提示块标签{% endnote %}
{% note info disabled %}info 提示块标签{% endnote %}
{% note warning disabled %}warning 提示块标签{% endnote %}
{% note danger disabled %}danger 提示块标签{% endnote %}no-icon
样式1
2
3
4
5
6
7
8
9
10
11
12
13{% note no-icon %}默认 提示块标签{% endnote %}
{% note default no-icon %}default 提示块标签{% endnote %}
{% note primary no-icon %}primary 提示块标签{% endnote %}
{% note success no-icon %}success 提示块标签{% endnote %}
{% note info no-icon %}info 提示块标签{% endnote %}
{% note warning no-icon %}warning 提示块标签{% endnote %}
{% note danger no-icon %}danger 提示块标签{% endnote %}
外部icon
1.simple
样式
1 | {% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %} |
2.modern
样式
1 | {% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %} |
3.flat
样式
1 | {% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %} |
4.disabled
样式
1 | {% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %} |
5.no-icon
样式
1 | {% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %} |
自带icon
simple
样式默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
外部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
样式
上标标签
1 | {% tip [参数,可选] %}文本内容{% endtip %} |
样式
: success,error,warning,bolt,ban,home,sync,cogs,key,bell自定义图标
: 支持fontawesome。
1 | {% tip %}default{% endtip %} |
default
info
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标
动态标签 anima
1 | {% tip [参数,可选] %}文本内容{% endtip %} |
- 将所需的CSS类添加到图标(或DOM中的任何元素)。
- 对于父级悬停样式,需要给目标元素添加指定CSS类,同时还要给目标元素的父级元素添加CSS类
faa-parent animated-hover
。(详情见示例及示例源码)
You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow - 可以通过给目标元素添加CSS类
faa-fast
或faa-slow
来控制动画快慢。
1.On DOM load(当页面加载时显示动画)
1 | {% tip warning faa-horizontal animated %}warning{% endtip %} |
2.调整动画速度
1 | {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %} |
3.On hover(当鼠标悬停时显示动画)
1 | {% tip warning faa-horizontal animated-hover %}warning{% endtip %} |
4.On parent hover(当鼠标悬停在父级元素时显示动画)
1 | {% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %} |
1.On DOM load(当页面加载时显示动画)
warning
ban
2.调整动画速度
warning
ban
3.On hover(当鼠标悬停时显示动画)
warning
ban
4.On parent hover(当鼠标悬停在父级元素时显示动画)
warning
ban
复选列表 checkbox
1 | {% checkbox 样式参数(可选), 文本(支持简单md) %} |
样式
: plus, minus, times颜色
: red,yellow,green,cyan,blue,gray选中状态
: checked
1 | {% checkbox 纯文本测试 %} |
单选列表 radio
1 | {% radio 样式参数(可选), 文本(支持简单md) %} |
颜色
: red,yellow,green,cyan,blue,gray选中状态
: checked
1 | {% radio 纯文本测试 %} |
时间轴 timeline
1 | {% timeline 时间线标题(可选)[,color] %} |
title
:标题/时间线color
:timeline
颜色:default(留空) / blue / pink / red / purple / orange / green
1 | {% timeline 时间轴样式,blue %} |
时间轴样式
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
。
链接卡片 link
1 | {% link 标题, 链接, 图片链接(可选) %} |
1 | {% link 稚的小窝, https://www.azhezhezhe.com, https://npm.elemecdn.com/aboyzy_blogstatic/img/202301092015138.png %} |
按钮 btns
1 | {% btns 样式参数 %} |
- 圆角样式:rounded, circle
- 增加文字样式:可以在容器内增加
<b>
标题</b>
和<p>
描述文字</p>
- 布局方式:
默认为自动宽度,适合视野内只有一两个的情况。
参数 | 含义 |
---|---|
wide | 宽一点的按钮 |
fill | 填充布局,自动铺满至少一行,多了会换行 |
center | 居中,按钮之间是固定间距 |
around | 居中分散 |
grid2 | 等宽最多2列,屏幕变窄会适当减少列数 |
grid3 | 等宽最多3列,屏幕变窄会适当减少列数 |
grid4 | 等宽最多4列,屏幕变窄会适当减少列数 |
grid5 | 等宽最多5列,屏幕变窄会适当减少列数 |
如果需要显示类似「团队成员」之类的一组含有头像的链接
1
2
3
4
5
6
7{% btns circle grid5 %}
{% cell 稚, https://azhezhezhe.com, https://npm.elemecdn.com/aboyzy_blogstatic/img/202301092021673.png%}
{% cell 稚, https://azhezhezhe.com, https://npm.elemecdn.com/aboyzy_blogstatic/img/202301092021673.png%}
{% cell 稚, https://azhezhezhe.com, https://npm.elemecdn.com/aboyzy_blogstatic/img/202301092021673.png%}
{% cell 稚, https://azhezhezhe.com, https://npm.elemecdn.com/aboyzy_blogstatic/img/202301092021673.png%}
{% cell 稚, https://azhezhezhe.com, https://npm.elemecdn.com/aboyzy_blogstatic/img/202301092021673.png%}
{% endbtns %}或者含有图标的按钮
1
2
3
4{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14{% btns circle center grid5 %}
<a href='https://azhezhezhe.com'>
<i class='fab fa-apple'></i>
<b>稚的小窝</b>
{% p red, 其中一个 %}
<img src='https://npm.elemecdn.com/aboyzy_blogstatic/img/202301092024312.png'>
</a>
<a href='https://azhezhezhe.com'>
<i class='fab fa-apple'></i>
<b>稚的小窝</b>
{% p green, 还是那一个 %}
<img src='https://npm.elemecdn.com/aboyzy_blogstatic/img/202301092024312.png'>
</a>
{% endbtns %}
或者含有图标的按钮
圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
稚的小窝
其中一个
稚的小窝还是那一个