---
title: Hexo标签笔记
tags: 博客
categories: 博客
description: CC的部落格 Hexo标签笔记
translate_title: introduction-of-plugin-tags-based-on-butterfly
subtitle: Introduction Of Plugin Tags Based On Butterfly
date: 2021-03-05 12:00:00
updated: 2021-05-16 12:00:00
id: 22
cover: https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/666ccfeb387717d69a0e3333cc1170dc_w1004_h591_s48.jpg
hide: false
---
{% note green success modern %}CC的部落格 Hexo标签笔记 ,其中大部分完整转载至糖果屋店长原文,根据本站实际情况进行了增减,仅保留源码和参数说明部分,若要查看具体效果,可前往{% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, https://cdn.jsdelivr.net/gh/Akilarlxh/akilarlxh.github.io/img/siteicon/favicon.ico %}{% endnote %}
## 按钮 Button
### 行内
```markdown
{% btn '#',# %}
{% btn '#',#,outline%}
```
### 固定
```markdown
{% btn '#',#,far fa-hand-point-right,block larger %}
{% btn '#',#,far fa-hand-point-right,block center larger %}
{% btn '#',#,far fa-hand-point-right,block right blue larger %}
```
### 居中多个
```markdown
{% btn '#',#,far fa-hand-point-right,larger %}
{% btn '#',#,far fa-hand-point-right,blue larger %}
{% btn '#',#,far fa-hand-point-right,pink larger %}
{% btn '#',#,far fa-hand-point-right,red larger %}
{% btn '#',#,far fa-hand-point-right,purple larger %}
{% btn '#',#,far fa-hand-point-right,orange larger %}
{% btn '#',#,far fa-hand-point-right,green larger %}
```
```markdown
{% btn '#',#,far fa-hand-point-right,outline larger %}
{% btn '#',#,far fa-hand-point-right,outline blue larger %}
{% btn '#',#,far fa-hand-point-right,outline pink larger %}
{% btn '#',#,far fa-hand-point-right,outline red larger %}
{% btn '#',#,far fa-hand-point-right,outline purple larger %}
{% btn '#',#,far fa-hand-point-right,outline orange larger %}
{% btn '#',#,far fa-hand-point-right,outline green larger %}
```
## 按钮 btns
```markdown
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
```
1. 圆角样式:rounded, circle
2. 增加文字样式:可以在容器内增加 `标题`和`描述文字
`
3. 布局方式:
默认为自动宽度,适合视野内只有一两个的情况。
| 参数 | 含义 |
| :---: | :---: |
| wide | 宽一点的按钮 |
| fill | 填充布局,自动铺满至少一行,多了会换行 |
| center | 居中,按钮之间是固定间距 |
| around | 居中分散 |
| grid2 | 等宽最多2列,屏幕变窄会适当减少列数 |
| grid3 | 等宽最多3列,屏幕变窄会适当减少列数 |
| grid4 | 等宽最多4列,屏幕变窄会适当减少列数 |
| grid5 | 等宽最多5列,屏幕变窄会适当减少列数 |
## 行内文本样式 text
```markdown
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
{% label 文本内容 标签颜色 %}
{% nota 注释词汇 , 悬停显示的注解内容 %}
```
## 行内文本 span
```markdown
{% span 样式参数(参数以空格划分), 文本内容 %}
```
1. 字体: logo, code
2. 颜色: {% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %}
3. 大小: small, h4, h3, h2, h1, large, huge, ultra
4. 对齐方向: left, center, right
```markdown
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large, 康纳百川 %}
{% span center small, 康纳百川 %}
```
## 段落文本 p
```markdown
{% p 样式参数(参数以空格划分), 文本内容 %}
```
1. 字体: logo, code
2. 颜色: {% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %}
3. 大小: small, h4, h3, h2, h1, large, huge, ultra
4. 对齐方向: left, center, right
```markdown
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% p center logo large, CC's Blog %}
{% p center small, CC's Blog %}
```
## 引用 note
修改主题配置文件
```yaml
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
```
`Note`标签有两种用法。`icons`和`light_bg_offset`只对方法一生效。
方法一
```markdown
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
```
方法二
```markdown
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
```
方法一
| 参数 | 用法 |
| :---: | :---: |
| class | 【可选】标识,不同的标识有不同的配色 ( default / primary / success / info / warning / danger ) |
| no-icon | 【可选】不显示 icon |
| style | 【可选】可以覆盖配置中的 style (simple/modern/flat/disabled) |
方法二
| 参数 | 用法 |
| :---: | :---: |
| class | 【可选】标识,不同的标识有不同的配色 ( default / primary / success / info / warning / danger ) |
| no-icon | 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon ) |
| style | 【可选】可以覆盖配置中的 style (simple/modern/flat/disabled) |
方法一
1. `simple`样式
```markdown
{% 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 %}
```
2. `modern`样式
```markdown
{% 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 %}
```
3. `flat`样式
```markdown
{% 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 %}
```
4. `disabled`样式
```markdown
{% 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 %}
```
5. `no-icon`样式
```markdown
{% 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 %}
```
方法二
1. `simple`样式
```markdown
{% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %}
{% note red 'fas fa-fan' simple%}这是三片呢?还是四片?{% endnote %}
{% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %}
```
2. `modern`样式
```markdown
{% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' modern %}小心开车 安全至上{% endnote %}
{% note red 'fas fa-fan' modern%}这是三片呢?还是四片?{% endnote %}
{% note orange 'fas fa-battery-half' modern %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}剪刀石头布{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}前端最讨厌的浏览器{% endnote %}
```
3. `flat`样式
```markdown
{% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' flat %}小心开车 安全至上{% endnote %}
{% note red 'fas fa-fan' flat%}这是三片呢?还是四片?{% endnote %}
{% note orange 'fas fa-battery-half' flat %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}剪刀石头布{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}前端最讨厌的浏览器{% endnote %}
```
4. `disabled`样式
```markdown
{% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}小心开车 安全至上{% endnote %}
{% note red 'fas fa-fan' disabled %}这是三片呢?还是四片?{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}剪刀石头布{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}前端最讨厌的浏览器{% endnote %}
```
5. `no-icon`样式
```markdown
{% 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 %}
```
## 上标标签 tip
{% tip cogs %}
主要样式参考自[小康的butterfly渐变背景标签](https://www.antmoe.com/posts/3b43914f/),自己写了个`tip.js`来渲染标签,精简了一下代码。
{% endtip %}
```markdown
{% tip [参数,可选] %}文本内容{% endtip %}
```
1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
2. 自定义图标: 支持fontawesome。
```markdown
{% tip %}默认情况{% 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 %}
```
## 动态标签 anima
```markdown
{% tip [参数,可选] %}文本内容{% endtip %}
```
更多详情请参看[font-awesome-animation文档](http://l-lin.github.io/font-awesome-animation/)
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`来控制动画快慢。
|On DOM load
当页面加载时
显示动画|On hover
当鼠标悬停时
显示动画|On parent hover
当鼠标悬停
在父级元素时
显示动画|
|:----:|:----:|:----:|
| faa-wrench animated| faa-wrench animated-hover| faa-wrench|
| faa-ring animated| faa-ring animated-hover| faa-ring|
| faa-horizontal animated| faa-horizontal animated-hover| faa-horizontal|
| faa-vertical animated| faa-vertical animated-hover| faa-vertical|
| faa-flash animated| faa-flash animated-hover| faa-flash|
| faa-bounce animated| faa-bounce animated-hover| faa-bounce|
| faa-spin animated| faa-spin animated-hover| faa-spin|
| faa-tada animated| faa-tada animated-hover| faa-tada|
| faa-pulse animated| faa-pulse animated-hover| faa-pulse|
| faa-shake animated| faa-shake animated-hover| faa-shake|
| faa-tada animated| faa-tada animated-hover| faa-tada|
| faa-passing animated| faa-passing animated-hover| faa-passing|
| faa-passing-reverse animated| faa-passing-reverse animated-hover| faa-passing-reverse|
| faa-burst animated| faa-burst animated-hover| faa-burst|
| faa-falling animated| faa-falling animated-hover| faa-falling|
| faa-rising animated| faa-rising animated-hover| faa-rising|
1. On DOM load(当页面加载时显示动画)
```markdown
{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}
```
2. 调整动画速度
```markdown
{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}
```
3. On hover(当鼠标悬停时显示动画)
```markdown
{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}
```
4. On parent hover(当鼠标悬停在父级元素时显示动画)
```markdown
{% tip warning faa-parent animated-hover %}warning
{% endtip %}
{% tip ban faa-parent animated-hover %}ban
{% endtip %}
```
## 单选列表 radio
```markdown
{% radio 样式参数(可选), 文本(支持简单md) %}
```
1. 颜色: {% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %}
2. 选中状态: checked
```markdown
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}
```
## 复选列表 checkbox
```markdown
{% checkbox 样式参数(可选), 文本(支持简单md) %}
```
1. 样式: plus, minus, times
2. 颜色: {% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %}
3. 选中状态: checked
```markdown
{% 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, 叉 %}
```
## 时间轴 timeline
```markdown
{% timeline 时间线标题(可选) %}
{% timenode 时间节点(标题) %}
正文内容
{% endtimenode %}
{% timenode 时间节点(标题) %}
正文内容
{% endtimenode %}
{% endtimeline %}
```
## 链接卡片 link
```markdown
{% link 标题, 链接, 图片链接(可选) %}
```
## github卡片 ghcard
{% note blue 'fas fa-bullhorn' modern %}
ghcard使用了`github-readme-stats`的API,支持直接使用markdown语法来写。
{% endnote %}
```markdown
{% ghcard 用户名, 其它参数(可选) %}
{% ghcard 用户名/仓库, 其它参数(可选) %}
```
更多参数可以参考:
{% ghcard anuraghazra/github-readme-stats %}
使用`,`分割各个参数。写法为:`参数名=参数值`
以下只写几个常用参数值。
| 参数名 | 取值 | 释义 |
| :---: | :---: | :---: |
| hide | stars,commits,prs,issues,contribs | 隐藏指定统计 |
| count_private | true | 将私人项目贡献添加到总提交计数中 |
| show_icons | true | 显示图标 |
| theme | 请查阅[](https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md)Available Themes | 主题 |
1. 用户信息卡片
```markdown
| {% ghcard ccknbc %} | {% ghcard ccknbc, theme=vue %} |
| -- | -- |
| {% ghcard ccknbc, theme=buefy %} | {% ghcard ccknbc, theme=solarized-light %} |
| {% ghcard ccknbc, theme=onedark %} | {% ghcard ccknbc, theme=solarized-dark %} |
| {% ghcard ccknbc, theme=algolia %} | {% ghcard ccknbc, theme=calm %} |
```
2. 仓库信息卡片
```markdown
| {% ghcard ccknbc-actions/blogroll %} | {% ghcard ccknbc-actions/blogroll, theme=vue %} |
| -- | -- |
| {% ghcard ccknbc-actions/blogroll, theme=buefy %} | {% ghcard ccknbc-actions/blogroll, theme=solarized-light %} |
| {% ghcard ccknbc-actions/blogroll, theme=onedark %} | {% ghcard ccknbc-actions/blogroll, theme=solarized-dark %} |
| {% ghcard ccknbc-actions/blogroll, theme=algolia %} | {% ghcard ccknbc-actions/blogroll, theme=calm %} |
```
## github徽标 ghbdage
{% tip cogs %}
关于ghbdage参数的更多具体用法可以参看糖果屋教程:[添加github徽标](https://akilar.top/posts/e87ad7f8)
{% endtip %}
```markdown
{% bdage [right],[left],[logo]||[color],[link],[title]||[option] %}
```
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`。
{% note info modern %}
本标签的参数分为三组,用`||`分割。
{% endnote %}
1. 基本参数,定义徽标左右文字和图标
```markdown
{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}
```
2. 信息参数,定义徽标右侧内容背景色,指向链接
```markdown
{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
//如果是跨顺序省略可选参数,仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}
```
3. 拓展参数,支持shields的API的全部参数内容
```markdown
{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署,默认线路托管于Vercel||style=social&logoWidth=20 %}
//如果是跨顺序省略可选参数组,仍然需要写双竖线||用作分割
{% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}
```
## 网站卡片 sites
```markdown
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %}
{% endsitegroup %}
```
## 行内图片 inlineimage
```markdown
{% inlineimage 图片链接, height=高度(可选) %}
```
高度:height=**px
## 单张图片 image
```markdown
{% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %}
```
1. 图片宽度高度:width=300px, height=32px
2. 图片描述:alt=图片描述(butterfly需要在主题配置文件中开启图片描述)
3. 占位背景色:bg=#f2f2f2
## 音频 audio
```markdown
{% audio 音频链接 %}
```
## 视频 video
```markdown
{% video 视频链接 %}
```
1. 对其方向:left, center, right
2. 列数:逗号后面直接写列数,支持 1 ~ 4 列。
3. 100%宽度
```markdown
{% video https://file.nmb.show/down.php/86c301fbc6183f50fb0487e13e5a1f64.mp4 %}
```
4. 50%宽度
```markdown
{% videos, 2 %}
......
{% endvideos %}
```
5. 25%宽度
```markdown
{% videos, 4 %}
......
{% endvideos %}
```
## 相册 gallery
1. gallerygroup 相册图库
```markdown
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
```
2. gallery 相册
```markdown
{% gallery %}
markdown 圖片格式
{% endgallery %}
```
1. gallerygroup 相册图库
{% note info %}
思维拓展一下,相册图库的实质其实就是个快捷方式,可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册,完全可以作为一个链接卡片,链接到视频、QQ、友链都是不错的选择。
{% endnote %}
| 参数名 | 释义 |
| :---: | :---: |
| name | 图库名字 |
| description | 图库描述 |
| link | 链接到对应相册的地址 |
| img-url | 图库封面 |
2. gallery 相册
区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版,书写也更加方便,与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。**建议在粘贴时故意使用长短、大小、横竖不一的图片**,会有更好的效果。(尺寸完全相同的图片只会平铺输出,效果很糟糕)
## 隐藏折叠 tag-hide
### hide-inline
```markdown
{% hideInline 描述,按钮颜色,字体颜色 %}
{% hideInline 描述 %}
```
### hide-block
```markdown
{% hideBlock 描述 %}
......
{% endhideBlock %}
```
### hide-toggle
```markdown
{% hideToggle 描述 %}
......
{% endhideToggle %}
```
## 折叠框 folding
```markdown
{% folding 参数(可选), 标题 %}

{% endfolding %}
```
1. 颜色:blue, cyan, green, yellow, red
2. 状态:状态填写 open 代表默认打开。
## 分栏 tab
```markdown
{% tabs Unique name, [index] %}
Any content (support inline tags too).
{% 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'.
- 可选参数。
嵌套
```markdown
{% subtabs name %}
......
{% endsubtabs %}
```
## 数据集合 issues
```markdown
{% issues type | api=url | group=key:value1,value2(可选) %}
```
type(类型)
根据需求不同,会将 issues 内容解析成不同的 HTML 标签,目前支持的类型有:
1. 时间轴`timeline`: 解析成`timeline`标签,`issue`的标题对应`timeline`的时间,`issue`的内容对应`timeline`的内容。
2. 网站卡片`sites`: 解析成`sites`标签,需要有`JSON`代码块,各参数对应`sites`标签参数:
```json
{
"title": "",
"screenshot": "",
"url": "",
"avatar": "",
"description": "",
"「keywords」": ""
}
```
| 参数 | 释义 |
| :---: | :---: |
| title | 网站名称 |
| screenshot | 网站预览图 |
| url | 网站链接,需要添加 ``https://协议组成完整域名。 否则可能被识别成站点相对路径。 |
| avatar | 站长头像 |
| 「keywords」 | 分组依据, 未必要叫「keywords」, 详见下文group(分组) |
api(接口)
url为可以调的通的API,例如:
```plain
api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active
api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active
```
| 参数 | 释义 |
| :---: | :---: |
| [](https://gitee.com/api/v5/)https://gitee.com/api/v5/ | gitee仓库的api |
| [](https://api.github.com/)https://api.github.com/ | github仓库的api |
| repos/xaoxuu/friends/issues | repos/用户名/仓库名/issues |
| sort=updated&state=open | 界定哪些类型的``issues会 被读取过来渲染成相应的标签 |
| page=1&per_page=100 | 读取前100条issues |
| labels=active | 控制默认的issue不显示, 只有自己审核通过 添加了active标签之后才会显示 |
group(分组)
`sites`类型的`issues`默认不分组,如果需要分组,可指定分组依据`「keywords」`,和分组白名单`「value1」`、`「value2」`等,例如:
```yaml
group=version:v4,v3,v2
# 此处的version就是上文中的「keywords」
```
这个参数的作用就是,筛选出`JSON`中包含`"version": "v4"`或者`"version":"v3"`或者`"version": "v2"`的数据,并分组显示。
仓库ISSUES模板配置
因本主题已去 jquery 化(我也不想要,这个标签也不怎么用,不过那个时间线可以用来发说说什么的),所以为了正常显示需要先引入相关依赖,这里不再演示,请直接查看源码即可
```markdown
```
+ 时间轴标签`timeline`渲染
```markdown
{% issues timeline | api=https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&creator=xaoxuu&sort=created&direction=desc&page=1&per_page=100 %}
```
+ 网站卡片标签`sites`渲染
- gitee仓库示例
```markdown
{% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
```
- github仓库示例
```markdown
{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
```
+ 网站卡片标签`sites`分组渲染
这是`Volantis`主题官网的「示例博客」页面的数据:
```markdown
{% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 | group=version:版本:^4.0,版本:^3.0,版本:^2.0 %}
```
## 诗词标签 poem
```markdown
{% poem [title],[author] %}
诗词内容
{% endpoem %}
```
## 进度条 progress
{% note info morden %}
进度条标签参考[沂佰孜猫-给HEXO文章添加彩色进度条](https://rongbuqiu.com/jdt.html)。
源样式提取自[Cuteen](https://zwying0814.gitbook.io/cuteen/)主题。
{% endnote %}
```markdown
{% progress [width] [color] [text] %}
```
1. `width`: 0到100的阿拉伯数字
2. `color`: 颜色,取值有{% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %}
3. `text`:进度条上的文字内容
## mermaid
```markdown
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}
{% mermaid %}
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
{% endmermaid %}
{% mermaid %}
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
{% endmermaid %}
```
## 动态图表 chartjs
```markdown
{% chart 90% 300 %}
{
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
}
}
}
{% endchart %}
```
关于预览,更多详细内容,请分别前往 [插件文档](https://shen-yu.gitee.io/2020/chartjs) | [原文档](https://chartjs.bootcss.com/docs) 查看
## 媒体 mmedia
{% tabs mmedia,11 %}
简介
hexo-tag-mmedia 是一个能在 Hexo 中快速插入媒体标签的插件,目前支持的标签和平台有(持续开发中):
- [x] Audio
- [x] Video
- [x] [Aplayer]([https://github.com/DIYgod/APlayer)](https://github.com/DIYgod/APlayer))
- [x] [MetingJS]([https://github.com/metowolf/MetingJS)](https://github.com/metowolf/MetingJS))
- [x] [Dplayer]([https://github.com/DIYgod/DPlayer)](https://github.com/DIYgod/DPlayer))
- [x] [哔哩哔哩]([https://www.bilibili.com/)](https://www.bilibili.com/))
- [x] [西瓜视频]([https://www.ixigua.com/)](https://www.ixigua.com/))
- [ ] [YouTube]()
- [x] [ArtPlayer]([https://github.com/zhw2590582/ArtPlayer)](https://github.com/zhw2590582/ArtPlayer))
DEMO
[[http://demo.hexo-tag-mmedia.u2sb.com/](http://demo.hexo-tag-mmedia.u2sb.com/)](http://demo.hexo-tag-mmedia.u2sb.com/](http://demo.hexo-tag-mmedia.u2sb.com/))
使用
hexo-tag-mmedia 插件和其他 hexo 插件使用方法类似,诸如 如何启用一个插件 之类的共性问题就不再赘述了,只说 hexo-tag-mmedia 相关的。
安装
```bash
npm install hexo-tag-mmedia@1 --save
```
```bash
pnpm install hexo-tag-mmedia@1 --save
```
```bash
yarn add hexo-tag-mmedia@1 --save
```
配置
如需修改配置,请务必不要保留空选项,空选项会覆盖默认配置,严重可能直接导致插件无法使用。
单项使用的文档中会详细讲解对应的使用文档,请自行阅读后再做配置。
下面只是示例,请勿全盘复制,请看清后面的讲解后组织自己的配置文件。
持续更新中,详情见详细文档和 [源码]([https://github.com/u2sb/hexo-tag-mmedia/blob/1.x/src/config/config_default.yml)](https://github.com/u2sb/hexo-tag-mmedia/blob/1.x/src/config/config_default.yml))
```yaml
mmedia:
audio:
default:
video:
default:
aplayer:
js: [https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js](https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js)
css: [https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css](https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css)
default:
contents:
meting:
js: [https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js](https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js)
api:
default:
dplayer:
js: [https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js](https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js)
hls_js: [https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js](https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js)
dash_js: [https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js](https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js)
shaka_dash_js: [https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js](https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js)
flv_js: [https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js](https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js)
webtorrent_js: [https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js](https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js)
default:
contents:
bilibili:
default:
page: 1
danmaku: true
allowfullscreen: allowfullscreen
sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups
width: 100%
max_width: 850px
margin: auto
xigua:
default:
autoplay: false
startTime: 0
allowfullscreen: allowfullscreen
sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups
width: 100%
max_width: 850px
margin: auto
```
解释
- 配置项较多目的是给予最大的自定义权限,默认情况下不做配置也可以使用。
- 配置文件放在博客根目录的 `_config.yml` 中
- default 为默认配置,在 `_config.yml` 中填写就不需要在每个标签全部写入了,所有允许在 mmedia 标签上写入的配置项,均可在 default 下配置。
- default 下 contents 项,用于设置 JSON 类型的默认配置,注意要使用 yaml 格式写默认配置,以下是几个示例。
示例
如无法读懂下面的示例,请阅读后面的文档后再回来看。
修改 Aplayer 的 js 文件:
```yaml
mmedia:
aplayer:
js: [https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js](https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js)
css: [https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css](https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css)
```
将 Aplayer 的 JS 和 CSS 放入博客目录:
首先请下载 `APlayer.min.js` 和 `APlayer.min.js` 文件,放入博客下 `source/assets/js/` 和 `source/assets/css/` 下(路径只是示例)
```yaml
mmedia:
aplayer:
js: /assets/js/APlayer.min.js
css: /assets/css/APlayer.min.css
```
Meting 修改循环方式为随机循环:
```yaml
mmedia:
meting:
default:
loop: all
order: random
```
Dplayer 修改弹幕 API:
```yaml
mmedia:
dplayer:
default:
contents:
danmaku:
api: [https://api.prprpr.me/dplayer/v3/](https://api.prprpr.me/dplayer/v3/)
```
使用
下面只是快速示例,请阅读后面的文档后再回来看。示例只是为了展示配置方式瞎写的,一些配置不一定正确,不要照抄。
```markdown
{% mmedia "audio" "src:a.mp3" %}
```
```markdown
{% mmedia "aplayer" "name:songName" "url:a.mp3" %}
```
```markdown
{% mmedia "meting" "auto=[https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html"](https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html") %}
```
```markdown
{% mmedia "bilibili" "bvid:BV1hb4y1R7xf" %}
```
```markdown
{% mmedia "xigua" "xid=6925997698269053453" %}
```
```markdown
{% mmedias "dplayer" "flv:" "url:[https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4"](https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4") %}
{
"contextmenu":
[
{
text: "custom1",
link: "[https://github.com/DIYgod/DPlayer"](https://github.com/DIYgod/DPlayer")
}
]
}
{% endmmedias %}
```
```markdown
{% mmedias "aplayer" "autoplay:false" %}
{
"volume": 0.8,
"audio":
[
{
"name": "name1",
"artist": "artist1",
"url": "url1.mp3",
"cover": "cover1.jpg",
"lrc": "lrc1.lrc",
"theme": "#ebd0c2"
},
{
"name": "name2",
"artist": "artist2",
"url": "url2.mp3",
"cover": "cover2.jpg",
"lrc": "lrc2.lrc",
"theme": "#46718b"
}
]
}
{% endmmedias %}
```
markdown 内可以使用两种标签作为插件,分别是 `mmedia` 和 `mmedias`,使用方式为:
```markdown
{% mmedia %}
```
```markdown
{% mmedias %}
{% endmmedias %}
```
只使用 `args` 作为传参方式时,两种标签均可使用,当需要使用 `contents` 传参时,只能使用 `mmedias`。
后面第一个参数用于标记标签,可选(以详细文档为主,持续更新中):
`audio` `video` `meting` `aplayer` `dplayer` `bilibili` `xigua`
再后面的参数将直接作为 `args` 参数直接传入插件。
参数
传入标签的参数可以写入到三个位置,分别为:`_config.yml`,`args`,`contents`,其中只有部分插件可使用 `contents` 配置,具体看详细文档,如有冲突项,覆盖规则为(后面的会被前面发覆盖):
`contents` -> `args` -> `_config.yml` -> `插件默认`
写入到 `args` 上的参数,有两种写法,分别是使用 `:` 和 `=` 分割,两种写法是等效的,在遇到第一个 `:` 或 `=` 时会自动分割,例如:
```markdown
{% mmedia "bilibili" "bvid:BV1hb4y1R7xf" %}
{% mmedia "bilibili" "bvid=BV1hb4y1R7xf" %}
```
两种写法是等效的。
如果遇到布尔类型的参数,可以简写
```markdown
{% mmedia "audio" "src:a.mp3" "autoplay:" %}
```
```markdown
{% mmedia "audio" "src:a.mp3" "autoplay:true" %}
```
两种写法等效,但需要注意,`:` 或 `=` 一定不能省略。
JSON 传参
支持 JSON 方式传参,其中 JSON 为 [JSON5]([https://json5.org/)](https://json5.org/)) 规范。
示例:
```markdown
{% mmedias "aplayer" "autoplay:false" %}
{
"volume": 0.8,
"audio":
[
{
"name": "name1",
"artist": "artist1",
"url": "url1.mp3",
"cover": "cover1.jpg",
"lrc": "lrc1.lrc",
"theme": "#ebd0c2"
},
{
"name": "name2",
"artist": "artist2",
"url": "url2.mp3",
"cover": "cover2.jpg",
"lrc": "lrc2.lrc",
"theme": "#46718b"
}
]
}
{% endmmedias %}
```
从 0.x 升级
考虑到一部分用户 0.x 版本使用时间较长,迁移成本较高,遂将 0.x 单独发布为一个包,可以用 1.x 版本同时安装。
详情见 [0.X 版本](0990.版本0.md)。
虽然能兼容使用,但建议及时修改文章到 1.x ,0.x 版本已不再继续维护。
开发者要说的几句话
1. 这个插件并不完美,如果使用中遇到问题,请熟读文档,如果还是有问题,请再读一遍文档,还是有问题,请向开发者反馈。
2. 关于 JS 重复请求,请升级客户端浏览器版本,两个一样的 JS,只会请求一次,暂时没有想到什么好的办法,如果有,请及时告诉 Aki 。
3. 关于 pjax,这东西真的不想去做兼容(其实也不难),如果以后闲得无聊的话,可能会做,但不要催 Aki 关于 pjax 兼容的问题。
4. 不要局限于示例,放开手脚,大胆去尝试,这个插件的开放性真的非常的大。
介绍
可以插入 html5 原生 audio 标签
使用
```markdown
{% mmedia "audio" "src:a.mp3" %}
```
```markdown
{% mmedia "audio" "src:[https://baidu.com/a.mp3"](https://baidu.com/a.mp3") "autoplay:true" %}
```
参数
> 此部分请熟读 [Audio 相关介绍]([https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-audio-element)](https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-audio-element))
- 使用 `:` 或 `=` 分割。
- 所有 `