标签外挂

标签外挂是 Hexo 独有的功能，并不是标准的 Markdown 格式。

Note

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' simple %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021年快到了....

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' modern %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' modern %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021年快到了....

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' flat%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' flat %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021年快到了....

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled  %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' disabled  %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled  %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' disabled %}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' disabled  %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled  %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' disabled  %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021年快到了....

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue no-icon %}
2021年快到了....
{% endnote %}
{% note pink no-icon %}
小心开车 安全至上
{% endnote %}
{% note red no-icon %}
这是三片呢？还是四片？
{% endnote %}
{% note orange no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple no-icon %}
剪刀石头布
{% endnote %}
{% note green no-icon %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

复选列表 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] 语法 %}
{% 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] 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

单选列表 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语法

支持自定义颜色

绿色

黄色

青色

蓝色

时间轴 timeline

1
2
3
4
5
6
7
8
{% timeline 时间线标题（可选）[,color] %}
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
{% endtimeline %}

2020-07

2020-07-24

天气不错，适合出去约妹

2020-05-15

学习 SpringCloud Alibaba 

1
2
3
4
5
6
7
8
9
{% timeline 2020-07,blue %}
<!-- timeline 2020-07-24  -->
天气不错，适合出去约妹
<!-- endtimeline -->

<!-- timeline 2020-05-15 -->
学习 SpringCloud Alibaba
<!-- endtimeline -->
{% endtimeline %}

文本相关

行内文本样式 text

行内文本 span

链接卡片 link

按钮 btns

样式预览 1. 一组含有头像的链接：

GitHub 哔哩哔哩 Pixiv YouTube 今日热榜
  1. 或者含有图标的按钮：
下载源码 查看文档
  1. 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
心率管家

专业版

 心率管家

免费版

github 卡片 ghcard

ghcard 使用了 github-readme-stats 的 API，支持直接使用 markdown 语法来写。

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

github 卡片 ghbdage

1
{% bdage [right],[left],[logo]||[color],[link],[title]||[option] %}
  1. left：徽标左边的信息，必选参数。
  2. right: 徽标右边的信息，必选参数，
  3. logo：徽标图标，图标名称详见simpleicons，可选参数。
  4. color：徽标右边的颜色，可选参数。
  5. link：指向的链接，可选参数。
  6. title：徽标的额外信息，可选参数。主要用于优化SEO，但object标签不会像a标签一样在鼠标悬停显示title信息。
  7. option：自定义参数，支持shields.io的全部API参数支持，具体参数可以参看上文中的拓展写法示例。形式为name1=value2&name2=value2。

本外挂标签的参数分为三组，用||分割。

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

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

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

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

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

本外挂标签的参数分为三组，用||分割。 基本参数,定义徽标左右文字和图标 

1
2
{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}
信息参数，定义徽标右侧内容背景色，指向链接 
1
2
3
{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
// 如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}
拓展参数，支持shields的API的全部参数内容 
1
2
3
{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署，默认线路托管于Vercel||style=social&logoWidth=20 %}
// 如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割
{% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}

行内图片 inlineimage

1
{% inlineimage 图片链接, height=高度（可选） %}
  1. 高度：height=20px

这是 一段话。

这又是 一段话。

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

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

单张图片 image

1
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}

  1. 图片宽度高度：width=300px, height=32px

  2. 图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）

  3. 占位背景色：bg=#f2f2f2

  1. 添加描述：
    每天下课回宿舍的路，没有什么故事。
    每天下课回宿舍的路，没有什么故事。
  2. 指定宽度：
  3. 指定宽度并添加描述：
    每天下课回宿舍的路，没有什么故事。
    每天下课回宿舍的路，没有什么故事。
  4. 设置占位背景色：
    优化不同宽度浏览的观感
    优化不同宽度浏览的观感
  1. 添加描述： 
    1
    {% image https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}
  2. 指定宽度： 
    1
    {% image https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}
  3. 指定宽度并添加描述： 
    1
    {% image https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}
  4. 设置占位背景色： 
    1
    {% image https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

音频 audio

1
{% audio 音频链接 %}
1
2
{% audio https://音乐链接.mp3 %}
{% audio https://音乐链接.mp3 %}

视频 video

1
{% video 视频链接 %}
  1. 对其方向：left, center, right
  2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。
  1. 100% 宽度
  • 50% 宽度
    1. 25% 宽度
    1. 100% 宽度 
      1
      {% video 视频链接 %}
    2. 50% 宽度 
      1
      2
      3
      4
      5
      6
      {% videos, 2 %}
      {% video 视频链接 %}
      {% video 视频链接 %}
      {% video 视频链接 %}
      {% video 视频链接 %}
      {% endvideos %}
    3. 25% 宽度 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      {% videos, 4 %}
      {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
      {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
      {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
      {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
      {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
      {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
      {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
      {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
      {% endvideos %}

    相册 gallery

    以下为 Butterfly 自带的 gallery 标签写法。相册图库和相册配合使用。

    gallerygroup 相册图库
    Group Image Gallery
    壁纸

    源于网络，侵删！

    gallery 相册

    [{"url":"https://npm.elemecdn.com/cover_img/wallpaper/work/10.jpg","alt":"images"},{"url":"https://npm.elemecdn.com/cover_img/wallpaper/work/9.jpg","alt":"images"},{"url":"https://npm.elemecdn.com/cover_img/wallpaper/work/8.jpg","alt":"images"},{"url":"https://npm.elemecdn.com/cover_img/wallpaper/work/7.jpg","alt":"images"},{"url":"https://npm.elemecdn.com/cover_img/wallpaper/work/6.jpg","alt":"images"}]

    折叠框 folding

    1
    2
    3
    {% folding 参数（可选）, 标题 %}
    哈哈哈哈
    {% 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
    {% folding 查看图片测试 %}
    ![images](https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
    {% endfolding %}

    {% folding cyan open, 查看默认打开的折叠框 %}
    这是一个默认打开的折叠框。
    {% endfolding %}

    {% folding green, 查看代码测试 %}
    ​```java
    public class Test {

    }
    ​```
    {% endfolding %}

    {% folding yellow, 查看列表测试 %}
    - haha
    - hehe
    {% endfolding %}

    {% folding red, 查看嵌套测试 %}
    {% folding blue, 查看嵌套测试2 %}
    {% folding 查看嵌套测试3 %}
    hahaha😜
    {% endfolding %}
    {% endfolding %}
    {% endfolding %}

    ...

    查看图片测试
    查看默认打开的折叠框

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

    分栏 tab

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

    自定义 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 名 + 只有 icon + icon 和 Tab 名

    tab名字为第一个Tab

    只有图标 没有Tab名字

    名字+icon

    诗词标签 poem

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

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

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

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

    label

    适用于 Butterfly 3.7.5 及以上版本

    1
    {% label text color %}
    参数 解释
    text 文字
    color 【可选】背景颜色，默认为 default
    default / blue / pink / red / purple / orange / green

    臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。 宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

    1
    2
    臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
    宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

    进度条 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 进度条样式预览 %}

    进度条样式预览

    进度条样式预览

    进度条样式预览

    进度条样式预览

    进度条样式预览

    进度条样式预览

    参考文献

    https://akilar.top/posts/615e2dec/
    https://blog.imzjw.cn/posts/bfdocs/index.html