Markdown - 书写技巧

一. Markdown 基础语法

markdown 文本换行 : <br>
markdown 文本空格 : 一个空格 &nbsp; 两个空格 &ensp; 四个空格 &emsp;

1.1 emoji 表情

Emoji 中文官网 (づ。◕‿‿◕。)づEmoji 中文官网 (づ。◕‿‿◕。)づ

Emoji 表情使用方法:

  • 使用 Emoji 官网查找复制
  • 通过输入法可快速输入
  • 通过 :grinning: 表情短码 进行输入
1
你好 😀, 欢迎来到我的知识库 💯 , 希望你为你提供帮助 💪🏻

你好 😀, 欢迎来到我的知识库 💯 , 希望你为你提供帮助 💪🏻

1.2 代码块

1
2
3
4
5
6
7
/```sh
# VSCode终端
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
# VSCode终端
hexo clean; hexo s
hexo clean; hexo g; hexo d
git add .; git commit -m "npm publish"; npm version patch;
git push

1.3 多级标题

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

1.4 文字样式

1
2
3
4
5
6
7
8
9
<u>下划线演示</u>

文字**加粗**演示

文字*斜体*演示

文本`高亮`演示

文本~~删除~~线演示

下划线演示

文字加粗演示

文字斜体演示

文本高亮演示

文本删除线演示

1.5 引用

1
2
3
4
5
6
7
8
9
10
>  Java
> 二级引用演示
> MySQL
> >外键
> >
> >事务
> >
> >**行级锁**(引用内部一样可以用格式)
>
> ....

Java
二级引用演示
MySQL

外键

事务

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

….

1.6 分割线

1
2
---
***


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

1.7.1 无序列表

1
2
3
4
5
6
7
8
9
10
11
* Java
* Python
* ...

+ Java
+ Python
+ ...

- Java
- Python
- ...
  • Java
  • Python
  • Java
  • Python
  • Java
  • Python

1.7,2 有序列表

1
2
3
4
5
`注意后面有空格`
1.
2.
3.
4.

注意后面有空格

1.8 图片

1
2
3
4
# 本地图片
<img src="/assets/pusheencode.webp" alt="示例图片" style="zoom:50%;" />
# 在线图片
![code](https://cdn.jsdelivr.net/gh/fomalhaut1998/markdown_pic/img/code.png)

示例图片

code

1.9 表格

1
2
3
4
5
| 项目标号 | 资金     | 备注 |
|----------|----------|------|
| 1 | 100,000 | 无 |
| 2 | 200,000 | 无 |
| 3 | 300,600 | 重要 |
项目标号资金备注
1100,000
2200,000
3300,600重要

二. Butterfly 外挂标签

2.1 站外引用样式

1
{% link title,description,link %}
  • title: 标题
  • description: 说明
  • link: 🔗链接
1
{% link 蚊子🦟的小破站,(づ。◕‿‿◕。)づ,https://pupper.cn %}

2,2 推荐卡片

https://blog.4t.pw/posts/7915d7de.html

1
{% card title,link,background-img,star-level,description,icon,type %}
  • title: 标题
  • link: 卡片链接
  • img: 背景图片
  • start-level: 星级
  • description: 鼠标悬浮说明
  • icon: 左上角图片
  • type: 类型
1
{% card 诡秘之主,https://book.qidian.com/info/1010868264/,https://bookcover.yuewen.com/qdbimg/349573/1010868264/300,4.5,第一次接触这种西方文学小说,刚开始感觉看不懂,断断续续看了很多次。后来越看越觉好看,每次看甚至都需要查“文档”,fa-solid fa-book-open,小说 %}
第一次接触这种西方文学小说,刚开始感觉看不懂,断断续续看了很多次。后来越看越觉好看,每次看甚至都需要查“文档” 查看详情
小说
诡秘之主

2.3 行内文本样式 text

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本:{% psw 这里没有验证码 %}
  1. 下划线 的文本
  2. 着重号的文本
  3. 波浪线的文本
  4. 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本:这里没有验证码

2.4 行内文本 span

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}
  • 彩色文字
    在一段话中方便插入各种颜色的标签,包括:红色黄色绿色青色蓝色灰色
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo

2.5 段落文本 p

1
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}
  • 彩色文字
    在一段话中方便插入各种颜色的标签,包括:

    红色

    黄色

    绿色

    青色

    蓝色

    灰色

  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo

2.7 上标标签 tip

1
{% tip [参数,可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标: 支持fontawesome。
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

2.8 动态标签 anima

1
{% tip [参数,可选] %}文本内容{% endtip %}
  1. 将所需的CSS类添加到图标(或DOM中的任何元素)。
  2. 对于父级悬停样式,需要给目标元素添加指定CSS类,同时还要给目标元素的父级元素添加CSSfaa-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来控制动画快慢。
On DOM load(当页面加载时显示动画)
1
2
{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}

warning

ban

调整动画速度
1
2
{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}

warning

ban

On hover(当鼠标悬停时显示动画)
1
2
{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}

warning

ban

On parent hover(当鼠标悬停在父级元素时显示动画)
1
2
{% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
{% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}

warning

ban

2.9 复选列表 checkbox

1
{% checkbox 样式参数(可选), 文本(支持简单md) %}
  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked
1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

2.10 单选列表 radio

1
{% radio 样式参数(可选), 文本(支持简单md) %}
  1. 颜色: red,yellow,green,cyan,blue,gray
  2. 选中状态: checked
1
2
3
4
5
6
7
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

2.11 时间轴 timeline

1
2
3
4
5
6
7
8
{% timeline 时间线标题(可选)[,color] %}
<!-- timeline 时间节点(标题) -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点(标题) -->
正文内容
<!-- endtimeline -->
{% endtimeline %}
  1. title:标题/时间线
  2. color:timeline颜色:default(留空) / blue / pink / red / purple / orange / green
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% timeline 时间轴样式,blue %}

<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->

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 服务。

<!-- endtimeline -->

<!-- timeline 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) -->

不需要额外处理。

<!-- endtimeline -->

<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->

1. 全局搜索 `seotitle` 并替换为 `seo_title`
2. group 组件的索引规则有变,使用 group 组件的文章内,`group: group_name` 对应的组件名必须是 `group_name`
2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`

<!-- endtimeline -->

{% endtimeline %}

时间轴样式

2020-07-24 2.6.6 -> 3.0

  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 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title
  2. group 组件的索引规则有变,使用 group 组件的文章内,group: group_name 对应的组件名必须是 group_name
  3. group 组件的列表名优先显示文章的 short_title 其次是 title

2.12 按钮 btns

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. 圆角样式:rounded, circle
  2. 增加文字样式:可以在容器内增加 标题

    描述文字

  3. 布局方式:默认为自动宽度,适合视野内只有一两个的情况。
参数含义
wide宽一点的按钮
fill填充布局,自动铺满至少一行,多了会换行
center居中,按钮之间是固定间距
around居中分散
grid2等宽最多2列,屏幕变窄会适当减少列数
grid3等宽最多3列,屏幕变窄会适当减少列数
grid4等宽最多4列,屏幕变窄会适当减少列数
grid5等宽最多5列,屏幕变窄会适当减少列数
如果需要显示类似「团队成员」之类的一组含有头像的链接
1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell 小标题, https://pupper.cn, https://random-img.pupper.cn/api?1 %}
{% cell Pupper, https://pupper.cn, https://random-img.pupper.cn/api?2 %}
{% cell Pupper, https://pupper.cn, https://random-img.pupper.cn/api?3 %}
{% cell Pupper, https://pupper.cn, https://random-img.pupper.cn/api?4 %}
{% cell pupper, https://pupper.cn, https://random-img.pupper.cn/api?5 %}
{% 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://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p red, 专业版 %}
<img src='https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p green, 免费版 %}
<img src='https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

2.13 github卡片 ghcard

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

1
2
{% ghcard 用户名, 其它参数(可选) %}
{% ghcard 用户名/仓库, 其它参数(可选) %}

使用,分割各个参数。写法为:参数名=参数值
以下只写几个常用参数值。

参数名取值释义
hidestars,commits,prs,issues,contribs隐藏指定统计
count_privatetrue将私人项目贡献添加到总提交计数中
show_iconstrue显示图标
theme查阅:AvailableThemes 主题
用户信息卡片
1
2
3
4
5
| {% ghcard fomalhaut1998 %}                | {% ghcard fomalhaut1998, theme=vue %}             |
|-------------------------------------------|---------------------------------------------------|
| {% ghcard fomalhaut1998, theme=buefy %} | {% ghcard fomalhaut1998, theme=solarized-light %} |
| {% ghcard fomalhaut1998, theme=onedark %} | {% ghcard fomalhaut1998, theme=solarized-dark %} |
| {% ghcard fomalhaut1998, theme=algolia %} | {% ghcard fomalhaut1998, theme=calm %} |
仓库信息卡片
1
2
3
4
5
| {% ghcard volantis-x/hexo-theme-volantis %}                | {% ghcard volantis-x/hexo-theme-volantis, theme=vue %}             |
|------------------------------------------------------------|--------------------------------------------------------------------|
| {% ghcard volantis-x/hexo-theme-volantis, theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |

2.14 网站卡片 sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %}
{% endsitegroup %}
1
2
3
4
5
6
7
{% sitegroup %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/avatar/avatar.png, description=简约风格 %}
{% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %}
{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %}
{% endsitegroup %}

2.15 行内图片 inlineimage

1
{% inlineimage 图片链接, height=高度(可选) %}

高度:height=20px

1
2
3
这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

这是 一段话。

这又是 一段话。

2.16 单张图片 image

1
{% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %}
  1. 图片宽度高度:width=300px, height=32px
  2. 图片描述:alt=图片描述(butterfly需要在主题配置文件中开启图片描述)
  3. 占位背景色:bg=#f2f2f2
添加描述
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路,没有什么故事。 %}
每天下课回宿舍的路,没有什么故事。
每天下课回宿舍的路,没有什么故事。
指定宽度
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}
指定宽度并添加描述
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路,没有什么故事。 %}
每天下课回宿舍的路,没有什么故事。
每天下课回宿舍的路,没有什么故事。
设置占位背景色
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}
优化不同宽度浏览的观感
优化不同宽度浏览的观感

2.17 音频 audio

1
{% audio 音频链接 %}
1
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

2.18 视频 video

1
{% video 视频链接 %}
  1. 对齐方向:left, center, right
  2. 列数:逗号后面直接写列数,支持 1 ~ 4 列。
1 宽度
1
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
0.5 宽度
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 %}
0.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. 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>
  1. gallery 相册
1
2
3
{% gallery %}
markdown 圖片格式
{% endgallery %}
  • gallerygroup 相册图库
参数名释义
name图库名字
description图库描述
link链接到对应相册的地址
img-url图库封面
  • gallery 相册
    区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版,书写也更加方便,与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片,会有更好的效果。(尺寸完全相同的图片只会平铺输出,效果很糟糕)
  • 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>
  • gallery 相册
    1
    2
    3
    4
    {% gallery %}
    ![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
    ![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
    {% endgallery %}
  • gallerygroup 相册图库
  • gallery 相册

2.20 折叠框 folding

1
2
3
4
5
6
7
{% folding 参数(可选), 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

1. 颜色:blue, cyan, green, yellow, red

2. 状态:状态填写 open 代表默认打开。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

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

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块(代码块没法嵌套代码块)
{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

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

查看代码测试

假装这里有代码块(代码块没法嵌套代码块)

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

2.21 分栏 tab

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  1. Unique name :
    • 选项卡块标签的唯一名称,不带逗号。
    • 将在#id中用作每个标签及其索引号的前缀。
    • 如果名称中包含空格,则对于生成#id,所有空格将由破折号代替。
    • 仅当前帖子/页面的URL必须是唯一的!
  2. [index]:
    • 活动选项卡的索引号。
    • 如果未指定,将选择第一个标签(1)。
    • 如果index为-1,则不会选择任何选项卡。
    • 可选参数。
  3. [Tab caption]:
    • 当前选项卡的标题。
    • 如果未指定标题,则带有制表符索引后缀的唯一名称将用作制表符的标题。
    • 如果未指定标题,但指定了图标,则标题将为空。
    • 可选参数。
  4. [@icon]:
    • FontAwesome图标名称(全名,看起来像“ fas fa-font”)
    • 可以指定带空格或不带空格;
    • 例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
    • 可选参数。
默认选择第一个
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

选择展示第三个
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

选择不展示 -1
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

自定义Tab名 + 只有icon + icon和Tab名
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

2.22 诗词标签 poem

  1. title:诗词标题
  2. author:作者,可以不写
1
2
3
4
5
6
7
8
9
10
11
12
{% poem 水调歌头,苏轼 %}
丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。
明月几时有?把酒问青天。
不知天上宫阙,今夕是何年?
我欲乘风归去,又恐琼楼玉宇,高处不胜寒。
起舞弄清影,何似在人间?

转朱阁,低绮户,照无眠。
不应有恨,何事长向别时圆?
人有悲欢离合,月有阴晴圆缺,此事古难全。
但愿人长久,千里共婵娟。
{% endpoem %}
水调歌头
苏轼

丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。
明月几时有?把酒问青天。
不知天上宫阙,今夕是何年?
我欲乘风归去,又恐琼楼玉宇,高处不胜寒。
起舞弄清影,何似在人间?

转朱阁,低绮户,照无眠。
不应有恨,何事长向别时圆?
人有悲欢离合,月有阴晴圆缺,此事古难全。
但愿人长久,千里共婵娟。

2.23 阿里图标 icon

1
{% icon [icon-xxxx],[font-size] %}
  1. icon-xxxx:表示图标font-class,可以在自己的阿里矢量图标库项目的font-class引用方案内查询并复制。
  2. font-size:表示图标大小,直接填写数字即可,单位为em。图标大小默认值为1em。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% icon icon-rat_zi %}{% icon icon-rat,2 %}

{% icon icon-ox_chou,3 %}{% icon icon-ox,4 %}

{% icon icon-tiger_yin,5 %}{% icon icon-tiger,6 %}

{% icon icon-rabbit_mao,1 %}{% icon icon-rabbit,2 %}

{% icon icon-dragon_chen,3 %}{% icon icon-dragon,4 %}

{% icon icon-snake_si,5 %}{% icon icon-snake,6 %}

{% icon icon-horse_wu %}{% icon icon-horse,2 %}

{% icon icon-goat_wei,3 %}{% icon icon-goat,4 %}

{% icon icon-monkey_shen,5 %}{% icon icon-monkey,6 %}

{% icon icon-rooster_you %}{% icon icon-rooster,2 %}

{% icon icon-dog_xu,3 %}{% icon icon-dog,4 %}

{% icon icon-boar_hai,5 %}{% icon icon-boar,6 %}

2.24 特效标签wow

1
2
3
{% wow [animete],[duration],[delay],[offset],[iteration] %}
内容
{% endwow %}
  1. animate: 动画样式,效果详见animate.css参考文档
  2. duration: 选填项,动画持续时间,单位可以是ms也可以是s。例如3s,700ms。
  3. delay: 选填项,动画开始的延迟时间,单位可以是ms也可以是s。例如3s,700ms。
  4. offset: 选填项,开始动画的距离(相对浏览器底部)
  5. iteration: 选填项,动画重复的次数
flip动画效果
1
2
3
4
5
{% wow animate__zoomIn,5s,5s,100,10 %}
{% tip warning %}
`zoomIn`动画效果,持续`5s`,延时`5s`,离底部`100`距离时启动,重复`10`次
{% endtip %}
{% endwow %}

zoomIn动画效果,持续5s,延时5s,离底部100距离时启动,重复10次
1
2
3
4
5
{% wow animate__zoomIn,5s,5s,100,10 %}
{% tip info %}
`zoomIn`动画效果,持续`5s`,延时`5s`,离底部`100`距离时启动,重复`10`次
{% endtip %}
{% endwow %}

slideInRight动画效果,持续5s,延时5s
1
2
3
4
5
{% wow animate__slideInRight,5s,5s %}
{% tip info %}
`slideInRight`动画效果,持续`5s`,延时`5s`。
{% endtip %}
{% endwow %}

heartBeat动画效果,延时5s,重复10次。此处注意不用的参数位置要留空,用逗号间隔
1
2
3
4
5
{% wow animate__heartBeat,,5s,,10 %}
{% tip info %}
`heartBeat`动画效果,延时`5s`,重复`10`次。
{% endtip %}
{% endwow %}

2.25 进度条 progress

1
{% progress [width] [color] [text] %}
  1. width: 0到100的阿拉伯数字
  2. color: 颜色,取值有red,yellow,green,cyan,blue,gray
  3. text:进度条上的文字内容
1
2
3
4
5
6
{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

2.26 注释 notation

1
{% nota [label] , [text] %}
  1. label: 注释词汇
  2. text: 悬停显示的注解内容
1
{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}

把鼠标移动到我上面试试

2.27 气泡注释 bubble

1
{% bubble [content] , [notation] ,[background-color] %}
  1. content: 注释词汇
  2. notation: 悬停显示的注解内容
  3. 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" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

最近我学到了不少新玩意儿(虽然对很多大佬来说这些已经是旧技术了),比如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>属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

2.28 引用文献 reference

1
2
{% referto [id] , [literature] %}
{% referfrom [id] , [literature] , [url] %}
  1. referto 引用上标
    • id: 上标序号内容,需与referfrom标签的id对应才能实现跳转
    • literature: 引用的参考文献名称
  2. referfrom 引用出处
    • id: 序号内容,需与referto标签的id对应才能实现 跳转
    • literature: 引用的参考文献名称
    • url: 引用的参考文献链接,可省略
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Akilarの糖果屋(akilar.top)是一个私人性质的博客{% referto '[1]','Akilarの糖果屋群聊简介' %},从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架{% referto '[2]','Hexo中文文档' %},Butterfly主题{% referto '[3]','Butterfly 安装文档(一) 快速开始' %}

本项目参考了Volantis{% referto '[4]','hexo-theme-volantis 标签插件' %}的标签样式。引入`[tag].js`,并针对`butterfly`主题修改了相应的`[tag].styl`。在此鸣谢`Volantis`主题众开发者。
主要参考内容包括各个volantis的内置标签插件文档{% referto '[5]','Volantis文档:内置标签插件' %}
Butterfly主题的各个衍生魔改{% referto '[6]','Butterfly 安装文档:标签外挂(Tag Plugins' %}{% referto '[7]','小弋の生活馆全样式预览' %}{% referto '[8]','l-lin-font-awesome-animation' %}{% referto '[9]','小康的butterfly主题使用文档' %}

{% referfrom '[1]','Akilarの糖果屋群聊简介','https://jq.qq.com/?_wv=1027&k=pGLB2C0N' %}
{% referfrom '[2]','Hexo中文文档','https://hexo.io/zh-cn/docs/' %}
{% referfrom '[3]','Butterfly 安装文档(一) 快速开始','https://butterfly.js.org/posts/21cfbf15/' %}
{% referfrom '[4]','hexo-theme-volantis 标签插件','https://volantis.js.org/v5/tag-plugins/' %}
{% referfrom '[5]','Volantis文档:内置标签插件','https://volantis.js.org/tag-plugins/' %}
{% referfrom '[6]','Butterfly 安装文档:标签外挂(Tag Plugins','https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89' %}
{% referfrom '[7]','小弋の生活馆全样式预览','https://lovelijunyi.gitee.io/posts/c898.html' %}
{% referfrom '[8]','l-lin-font-awesome-animation','https://github.com/l-lin/font-awesome-animation' %}
{% referfrom '[9]','小康的butterfly主题使用文档','https://www.antmoe.com/posts/3b43914f/' %}

Akilarの糖果屋(akilar.top)是一个私人性质的博客</span>[1]Akilarの糖果屋群聊简介参考资料</span></span>,从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架</span>[2]Hexo中文文档参考资料</span></span>,Butterfly主题</span>[3]Butterfly 安装文档(一) 快速开始参考资料</span></span>

本项目参考了Volantis</span>[4]hexo-theme-volantis 标签插件参考资料</span></span>的标签样式。引入[tag].js,并针对butterfly主题修改了相应的[tag].styl。在此鸣谢Volantis主题众开发者。
主要参考内容包括各个volantis的内置标签插件文档</span>[5]Volantis文档:内置标签插件参考资料</span></span>
Butterfly主题的各个衍生魔改</span>[6]Butterfly 安装文档:标签外挂(Tag Plugins参考资料</span></span></span>[7]小弋の生活馆全样式预览参考资料</span></span></span>[8]l-lin-font-awesome-animation参考资料</span></span></span>[9]小康的butterfly主题使用文档参考资料</span></span>

2.29 隐藏块

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  1. content:要隐藏的内容
  2. display:展示前按钮显示的文字(可选)
  3. bg:按钮的背景颜色(可选)
  4. color:按钮显示的文字的颜色(可选)
1
2
3
4
{% hideBlock 点我预览, blue %}
这里有张图片:
<img src="https://s1.vika.cn/space/2022/10/30/b35fce448bc9404a8d65c3ce1e6e46eb" alt="image (1)" style="zoom:67%;" />
{% endhideBlock %}

这里有张图片:
image (1)