CC 的部落格 Hexo 标签笔记 ，其中大部分完整转载至糖果屋店长原文，根据本站实际情况进行了增减，仅保留源码和参数说明部分，若要查看具体效果，可前往

糖果屋教程贴

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

按钮 Button

行内

1
2
{% btn '#',# %}
{% btn '#',#,outline%}

固定

1
2
3
{% 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 %}

居中多个

1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% 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 %}
</div>
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% 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 %}
</div>

按钮 btns

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. 圆角样式：rounded, circle
  2. 增加文字样式：可以在容器内增加 <b>标题</b>和<p>描述文字</p>
  3. 布局方式：默认为自动宽度，适合视野内只有一两个的情况。
    参数含义
    wide宽一点的按钮
    fill填充布局，自动铺满至少一行，多了会换行
    center居中，按钮之间是固定间距
    around居中分散
    grid2等宽最多 2 列，屏幕变窄会适当减少列数
    grid3等宽最多 3 列，屏幕变窄会适当减少列数
    grid4等宽最多 4 列，屏幕变窄会适当减少列数
    grid5等宽最多 5 列，屏幕变窄会适当减少列数

行内文本样式 text

1
2
3
4
5
6
7
8
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
{% label 文本内容 标签颜色 %}
{% nota 注释词汇 , 悬停显示的注解内容 %}

行内文本 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, 康纳百川 %}
  {% span center small, 康纳百川 %}

段落文本 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, CC's Blog %}
  {% p center small, CC's Blog %}

引用 note

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
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只对方法一生效。

方法一

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

方法二

1
2
3
{% 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样式
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 %}
  1. 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 %}
  1. 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 %}
  1. 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 %}
  1. 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 %}

方法二

  1. simple样式
1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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 %}
  1. modern样式
1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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 %}
  1. flat样式
1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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 %}
  1. disabled样式
1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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 %}
  1. no-icon样式
1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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

主要样式参考自小康的 butterfly 渐变背景标签,自己写了个tip.js来渲染标签，精简了一下代码。

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
{% 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

1
{% tip [参数，可选] %}文本内容{% endtip %}

更多详情请参看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（当页面加载时显示动画）
1
2
{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}
  1. 调整动画速度
1
2
{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}
  1. On hover（当鼠标悬停时显示动画）
1
2
{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}
  1. 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 %}

单选列表 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, 蓝色 %}

复选列表 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, 叉 %}

时间轴 timeline

1
2
3
4
5
6
7
8
{% timeline 时间线标题（可选） %}
{% timenode 时间节点（标题） %}
正文内容
{% endtimenode %}
{% timenode 时间节点（标题） %}
正文内容
{% endtimenode %}
{% endtimeline %}
1
{% link 标题, 链接, 图片链接（可选） %}

github 卡片 ghcard

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

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

更多参数可以参考：

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

参数名取值释义
hidestars,commits,prs,issues,contribs隐藏指定统计
count_privatetrue将私人项目贡献添加到总提交计数中
show_iconstrue显示图标
theme请查阅 Available Themes主题
  1. 用户信息卡片
1
2
3
4
5
| {% 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 %}            |
  1. 仓库信息卡片
1
2
3
4
5
| {% 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

关于 ghbdage 参数的更多具体用法可以参看糖果屋教程：添加 github 徽标

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。

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

  1. 基本参数,定义徽标左右文字和图标
1
2
{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}
  1. 信息参数，定义徽标右侧内容背景色，指向链接
1
2
3
{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}
  1. 拓展参数，支持 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 %}

网站卡片 sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}

行内图片 inlineimage

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

高度：height=**px

单张图片 image

1
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}
  1. 图片宽度高度：width=300px, height=32px
  2. 图片描述：alt=图片描述（butterfly 需要在主题配置文件中开启图片描述）
  3. 占位背景色：bg=#f2f2f2

音频 audio

1
{% audio 音频链接 %}

视频 video

1
{% video 视频链接 %}
  1. 对其方向：left, center, right
  2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。
  3. 100%宽度
1
{% video https://file.nmb.show/down.php/86c301fbc6183f50fb0487e13e5a1f64.mp4 %}
  1. 50%宽度
1
2
3
4
5
{% videos, 2 %}

......

{% endvideos %}
  1. 25%宽度
1
2
3
4
5
{% videos, 4 %}

......

{% 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 %}

  1. gallerygroup 相册图库

    思维拓展一下，相册图库的实质其实就是个快捷方式，可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册，完全可以作为一个链接卡片，链接到视频、QQ、友链都是不错的选择。

    参数名释义
    name图库名字
    description图库描述
    link链接到对应相册的地址
    img-url图库封面

  2. gallery 相册区别于旧版的 Gallery 相册,新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）

隐藏折叠 tag-hide

hide-inline

1
2
{% hideInline 描述,按钮颜色,字体颜色 %}
{% hideInline 描述 %}

hide-block

1
2
3
4
5
{% hideBlock 描述 %}

......

{% endhideBlock %}

hide-toggle

1
2
3
4
5
{% hideToggle 描述 %}

......

{% endhideToggle %}

折叠框 folding

1
2
3
{% 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 代表默认打开。

分栏 tab

1
2
3
4
5
6
7
8
9
{% 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
{% subtabs name %}

......

{% endsubtabs %}

数据集合 issues

1
{% issues type | api=url | group=key:value1,value2（可选） %}

type(类型) 根据需求不同，会将 issues 内容解析成不同的 HTML 标签，目前支持的类型有：

  1. 时间轴timeline: 解析成timeline标签，issue的标题对应timeline的时间，issue的内容对应timeline的内容。
  2. 网站卡片sites: 解析成sites标签，需要有JSON代码块,各参数对应sites标签参数:
1
2
3
4
5
6
7
8
{
  "title": "",
  "screenshot": "",
  "url": "",
  "avatar": "",
  "description": "",
  "「keywords」": ""
}
参数释义
title网站名称
screenshot网站预览图
url网站链接，需要添加

``https://协议组成完整域名。否则可能被识别成站点相对路径。 | | avatar | 站长头像 | | 「keywords」 | 分组依据，未必要叫「keywords」，详见下文 group(分组) |

api(接口) url 为可以调的通的 API，例如：

1
2
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/gitee 仓库的 api
https://api.github.com/github 仓库的 api
repos/xaoxuu/friends/issuesrepos/用户名/仓库名/issues
sort=updated&state=open界定哪些类型的``issues 会
被读取过来渲染成相应的标签
page=1&per_page=100读取前 100 条 issues
labels=active控制默认的 issue 不显示，

只有自己审核通过添加了 active 标签之后才会显示 |

group(分组) sites类型的issues默认不分组，如果需要分组，可指定分组依据「keywords」，和分组白名单「value1」、「value2」等，例如：

1
2
group=version:v4,v3,v2
# 此处的version就是上文中的「keywords」

这个参数的作用就是，筛选出JSON中包含"version": "v4"或者"version":"v3"或者"version": "v2"的数据，并分组显示。

仓库 ISSUES 模板配置

因本主题已去 jquery 化（我也不想要，这个标签也不怎么用，不过那个时间线可以用来发说说什么的），所以为了正常显示需要先引入相关依赖，这里不再演示，请直接查看源码即可

1
2
<script defer src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script>
  • 时间轴标签timeline渲染
1
{% 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 仓库示例
1
{% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
  • github 仓库示例
1
{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
  • 网站卡片标签sites分组渲染这是Volantis主题官网的「示例博客」页面的数据：
1
{% 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

1
2
3
{% poem [title],[author] %}
诗词内容
{% endpoem %}

进度条 progress

进度条标签参考沂佰孜猫-给 HEXO 文章添加彩色进度条。源样式提取自Cuteen主题。

1
{% progress [width] [color] [text] %}
  1. width: 0 到 100 的阿拉伯数字
  2. color: 颜色，取值有red,yellow,green,cyan,blue,gray
  3. text:进度条上的文字内容

mermaid

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
{% 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% 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 %}

关于预览，更多详细内容，请分别前往 插件文档 | 原文档 查看

媒体 mmedia

简介

hexo-tag-mmedia 是一个能在 Hexo 中快速插入媒体标签的插件，目前支持的标签和平台有（持续开发中）：

DEMO

[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 相关的。

安装

1
npm install hexo-tag-mmedia@1 --save
1
pnpm install hexo-tag-mmedia@1 --save
1
yarn add hexo-tag-mmedia@1 --save

配置

如需修改配置，请务必不要保留空选项，空选项会覆盖默认配置，严重可能直接导致插件无法使用。

单项使用的文档中会详细讲解对应的使用文档，请自行阅读后再做配置。

下面只是示例，请勿全盘复制，请看清后面的讲解后组织自己的配置文件。

持续更新中，详情见详细文档和 源码](https://github.com/u2sb/hexo-tag-mmedia/blob/1.x/src/config/config_default.yml))

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
37
38
39
40
41
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 文件：

1
2
3
4
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/ 下（路径只是示例）

1
2
3
4
mmedia:
  aplayer:
    js: /assets/js/APlayer.min.js
    css: /assets/css/APlayer.min.css

Meting 修改循环方式为随机循环：

1
2
3
4
5
mmedia:
  meting:
    default:
      loop: all
      order: random

Dplayer 修改弹幕 API：

1
2
3
4
5
6
mmedia:
  dplayer:
    default:
      contents:
        danmaku:
          api: [https://api.prprpr.me/dplayer/v3/](https://api.prprpr.me/dplayer/v3/)

使用

下面只是快速示例，请阅读后面的文档后再回来看。示例只是为了展示配置方式瞎写的，一些配置不一定正确，不要照抄。

1
{% mmedia "audio" "src:a.mp3" %}
1
{% mmedia "aplayer" "name:songName" "url:a.mp3" %}
1
{% mmedia "meting" "auto=[https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html"](https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html") %}
1
{% mmedia "bilibili" "bvid:BV1hb4y1R7xf" %}
1
{% mmedia "xigua" "xid=6925997698269053453" %}
1
2
3
4
5
6
7
8
9
10
11
{% 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 %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% 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，使用方式为：

1
{% mmedia %}
1
2
{% mmedias %}
{% endmmedias %}

只使用 args 作为传参方式时，两种标签均可使用，当需要使用 contents 传参时，只能使用 mmedias。

后面第一个参数用于标记标签，可选（以详细文档为主，持续更新中）：

audio video meting aplayer dplayer bilibili xigua

再后面的参数将直接作为 args 参数直接传入插件。

参数

传入标签的参数可以写入到三个位置，分别为：_config.yml，args，contents，其中只有部分插件可使用 contents 配置，具体看详细文档，如有冲突项，覆盖规则为（后面的会被前面发覆盖）：

contents -> args -> _config.yml -> 插件默认

写入到 args 上的参数，有两种写法，分别是使用 : 和 = 分割，两种写法是等效的，在遇到第一个 : 或 = 时会自动分割，例如：

1
2
3
{% mmedia "bilibili" "bvid:BV1hb4y1R7xf" %}

{% mmedia "bilibili" "bvid=BV1hb4y1R7xf" %}

两种写法是等效的。

如果遇到布尔类型的参数，可以简写

1
{% mmedia "audio" "src:a.mp3" "autoplay:" %}
1
{% mmedia "audio" "src:a.mp3" "autoplay:true" %}

两种写法等效，但需要注意，: 或 = 一定不能省略。

JSON 传参

支持 JSON 方式传参，其中 JSON 为 JSON5](https://json5.org/)) 规范。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% 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 版本。

虽然能兼容使用，但建议及时修改文章到 1.x ，0.x 版本已不再继续维护。

开发者要说的几句话

  1. 这个插件并不完美，如果使用中遇到问题，请熟读文档，如果还是有问题，请再读一遍文档，还是有问题，请向开发者反馈。
  2. 关于 JS 重复请求，请升级客户端浏览器版本，两个一样的 JS，只会请求一次，暂时没有想到什么好的办法，如果有，请及时告诉 Aki 。
  3. 关于 pjax，这东西真的不想去做兼容（其实也不难），如果以后闲得无聊的话，可能会做，但不要催 Aki 关于 pjax 兼容的问题。
  4. 不要局限于示例，放开手脚，大胆去尝试，这个插件的开放性真的非常的大。

介绍

可以插入 html5 原生 audio 标签

使用

1
{% mmedia "audio" "src:a.mp3" %}
1
{% 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))

  • 使用 : 或 = 分割。
  • 所有 <audio> 标签的原生参数均可添加，只要能写进去就可以。
  • 具体能否实现相关标准，取决于客户端浏览器。

JSON 参数

mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。

配置

默认配置可写入 _config.yml 下

1
2
3
4
5
mmedia:
  audio:
    default:
      autoplay: true
      key: vaule

介绍

可以插入 html5 原生 video 标签

使用

1
{% mmedia "video" "src:a.mp4" %}
1
{% mmedia "video" "src:[https://baidu.com/a.mp4"](https://baidu.com/a.mp4") "autoplay:true" %}

参数

此部分请熟读 Video 相关介绍](https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element))

  • 使用 : 或 = 分割。
  • 所有 <video> 标签的原生参数均可添加，只要能写进去就可以。
  • 具体能否实现相关标准，取决于客户端浏览器。

JSON 参数

mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。

配置

默认配置可写入 _config.yml 下

1
2
3
4
5
mmedia:
  video:
    default:
      autoplay: true
      key: vaule

介绍

可以插入 MetingJS](https://github.com/metowolf/MetingJS)) 标签。

使用

1
{% mmedia "meting" "auto=[https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html"](https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html") %}
1
{% mmedia "meting" "server=netease"	"type=playlist"	"id=60198" %}

参数

此部分请熟读 MetingJS 文档](https://github.com/metowolf/MetingJS#option))

  • 使用 : 或 = 分割。
  • 所有 <meting-js> 标签的参数均可添加，只要能写进去就可以。

JSON 参数

mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。

1
2
3
4
5
6
{% mmedias "meting" "server=netease" %}
{
type:"playlist",
id:"60198"
}
{% endmmedias %}

配置

默认配置可写入 _config.yml 下

1
2
3
4
5
6
mmedia:
  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: [http://example.com/api.php](http://example.com/api.php)
    default:
      key: vaule

介绍

可以插入 aplayer 标签

使用

1
{% mmedia "aplayer" "name:songName" "url:a.mp3" %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% 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 %}

参数

此部分请熟读 APlayer 文档](http://aplayer.js.org/))

  • 使用 : 或 = 分割。

详细参数表：

参数默认解释
name-audio name
artist-audio artist
url-audio url
cover-audio cover
lrc-audio lrc
theme-audio theme
typeautoaudio type 可选 ‘auto’, ‘hls’, ‘normal’
autoplayfalseautoplay
loop‘all’player loop play, values: ‘all’, ‘one’, ‘none’
order‘list’player play order, values: ‘list’, ‘random’
volume0.7default volume,
tlistMaxHeight-list max height

不在表格内的参数请使用下面 JSON 类型的参数。

JSON 参数

mmedia 插件允许在 contents 部分使用 JSON 编写配置，由于允许使用 JSON5，此项配置几乎与 APlayer 完全一致。

详情请见上方示例。

配置

默认配置可写入 _config.yml 下

1
2
3
4
5
6
mmedia:
  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:

介绍

可以插入 dplayer 标签。

使用

1
{% mmedia "dplayer" "url:a.mp4" %}
1
2
3
4
5
6
7
8
9
10
11
{% 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 %}

参数

此部分请熟读 DPlayer 文档](http://dplayer.js.org/))

  • 使用 : 或 = 分割。

详细参数表：

参数默认解释
url-video.url
pic-video.pic
thumbnails-video.thumbnails
typeautovideo.type, values: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ or other
autoplayfalsevideo autoplay
loopfalsevideo loop
logo-showing logo in the top left corner, you can adjust its size and position by CSS
volume0.7default volume
screenshotfalseenable screenshot, if true, video and video poster must enable Cross-Origin
id-danmaku.id, danmaku pool id, it must be unique
api-danmaku.api, see Danmaku API](http://dplayer.js.org/guide.html#danmaku-api))

上面有一个比较特殊的参数 flv，这里单独解释一下，这个参数是用于引入其他 js 文件的，目前支持的有：hls dash shaka_dash flv webtorrent，上述参数可多个一起使用，如果后面带有 js 地址，将直接使用，否则将使用 _config.yml 配置或插件默认配置，如：

1
{% mmedia "dplayer" "flv:" "url:a.flv" %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% mmedias "dplayer" "flv:" "hls:[https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"](https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js") %}
{
video:
{
quality:
[
{
name: 'HLS',
url: 'a.m3u8',
type: 'hls',
},
{
name: 'FLV',
url: 'demo.mp4',
type: 'flv',
},
],
efaultQuality: 0,
ic: 'demo.png',
thumbnails: 'thumbnails.jpg',
},
}
{% endmmedias %}

不在表格内的参数请使用下面 JSON 类型的参数。

JSON 参数

mmedia 插件允许在 contents 部分使用 JSON 编写配置，由于允许使用 JSON5，此项配置几乎与 DPlayer 完全一致。

详情请见上方示例。

配置

默认配置可写入 _config.yml 下

1
2
3
4
5
6
7
8
9
10
mmedia:
  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:

介绍

可以插入 artplayer 标签。

使用

1
{% mmedia "artplayer" "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") %}
1
2
3
4
5
{% mmedias "artplayer" "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")
}
{% endmmedias %}

参数

此部分请熟读 ArtPlayer 文档](https://artplayer.org/document/#/options))

  • 使用 : 或 = 分割。

详细参数表：

参数默认解释
url-url
title-title
poster-poster
type-type
autoplayfalsevideo autoplay
loopfalsevideo loop
volume0.7default volume
style-style

上面有一个比较特殊的参数 flv，这里单独解释一下，这个参数是用于引入其他 js 文件的，目前支持的有：hls dash shaka_dash flv webtorrent，上述参数可多个一起使用，如果后面带有 js 地址，将直接使用，否则将使用 _config.yml 配置或插件默认配置，如：

1
{% mmedia "artplayer" "flv:" "url:a.flv" %}
1
2
3
4
5
{% mmedias "artplayer" "flv:" "hls:[https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"](https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js") %}
{
...
}
{% endmmedias %}

不在表格内的参数请使用下面 JSON 类型的参数。

JSON 参数

mmedia 插件允许在 contents 部分使用 JSON 编写配置，由于允许使用 JSON5，此项配置几乎与 ArtPlayer 完全一致。

详情请见上方示例。

配置

默认配置可写入 _config.yml 下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mmedia:
  artplayer:
    js: [https://cdn.jsdelivr.net/npm/artplayer@3/dist/artplayer.js](https://cdn.jsdelivr.net/npm/artplayer@3/dist/artplayer.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:
      style: width:100%;height:650px;max-width:1200px;center
      contents:
        autoSize: true
        autoMini: true
        fullscreen: true
        fullscreenWeb: true

介绍

可以插入 bilibili 视频

使用

1
{% mmedia "bilibili" "bvid:BV1br4y1P7ND" %}
1
{% mmedia "bilibili" "bvid:BV1br4y1P7ND" "danmaku:false" %}

参数

  • 使用 : 或 = 分割。

详细参数表：

参数默认解释
aid-aid
bvid-bvid，与 aid 同时出现时以 bvid 为准
page1page
danmakutrue是否有弹幕 ture or false
allowfullscreenallowfullscreen允许全屏， allowfullscreen 或 true 允许，其他选项不允许
sandbox见 配置iframe sandbox
width100%css 属性
max_width850pxcss 属性
marginautocss 属性

JSON 参数

mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。

配置

默认配置可写入 _config.yml 下

1
2
3
4
5
6
7
8
9
10
mmedia:
  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

介绍

可以插入 西瓜 视频

使用

1
{% mmedia "xigua" "xid=6925997698269053453" %}
1
{% mmedia "xigua" "xid:6925997698269053453" "autoplay:true" %}

参数

  • 使用 : 或 = 分割。

详细参数表：

参数默认解释
xid-西瓜视频的 ID，就是那一串数字
id-一般情况下不需要填写
autoplayfalseautoplay
startTime0开始时间，秒
allowfullscreenallowfullscreen允许全屏， allowfullscreen 或 true 允许，其他选项不允许
sandbox见 配置iframe sandbox
width100%css 属性
max_width850pxcss 属性
marginautocss 属性

JSON 参数

mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。

配置

默认配置可写入 _config.yml 下

1
2
3
4
5
6
7
8
9
10
mmedia:
  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

待开发…

请前往 音乐界面 预览部分效果，分别用到了 Artplayer, Aplayer, Dplayer, Meting