Note (Bootstrap Callout)

用法

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

[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

All parameters are optional.

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示块标籤
{% endnote %}

{% note primary no-icon %}
primary 提示块标籤
{% endnote %}

{% note success %}
success 提示块标籤
{% endnote %}

{% note info %}
info 提示块标籤
{% endnote %}

{% note warning %}
warning 提示块标籤
{% endnote %}

{% note danger %}
danger 提示块标籤
{% endnote %}

style: flat

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

自定义图标（阿里图标）及颜色

1
2
3
4
5
6
7
/* default */
<div
  class="note icon custom iconfont icon-weixin"
  style="background: #f7f7f7;border-left-color: #777;"
>
  <p>default</p>
</div>

default

用法

1
2
3
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
</div>

例如

1
2
3
<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
</div>
Group Image Gallery
壁纸

收藏的一些壁纸

用法

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}

例如

1
2
3
4
5
6
7
8
9
10
{% gallery %}
null
null
null
null
null
null
null
null
{% endgallery %}
[]

Tabs

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (full-name, look like 'fas fa-font')
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

Demo 1 - 预设选择第一个【默认】

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.

Demo 2 - 预设选择 tabs

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.

Demo 3 - 没有预设值

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.

Demo 4 - 自定义 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

Tag-hide

inline在文本里面添加按钮隐藏内容，只限文字
( content 不能包含英文逗号，可用&sbquo;)

1
{% hideInline content,display,bg,color %}
  • content: 文本内容
  • display: 按钮显示的文字(可选)
  • bg: 按钮的背景颜色(可选)
  • color: 按钮文字的颜色(可选)

    Demo

1
2
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}
门里站着一个人? {% hideInline 闪 %}

哪个英文字母最酷？ 因为西装裤(C装酷)
门里站着一个人? 闪

block独立的 block 隐藏内容，可以隐藏很多内容，包括图片，代码块等等
(display 不能包含英文逗号，可用&sbquo;)

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content: 文本内容
  • display: 按钮显示的文字(可选)
  • bg: 按钮的背景颜色(可选)
  • color: 按钮文字的颜色(可选)

    Demo

1
2
3
4
查看答案
{% hideBlock 查看答案 %}
傻子，怎么可能有答案
{% endhideBlock %}

傻子，怎么可能有答案

2.3.0 以上支持

如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。 (display 不能包含英文逗号，可用`‚`)

Demo

1
2
3
4
5
6
7
8
9
10
{% hideToggle Butterfly安装方法 %}
在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}
Butterfly安装方法

在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的 dev 分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

mermaid

用法

1
2
3
{% mermaid %}
内容
{% endmermaid %}

例如

1
2
3
4
5
6
7
8
{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

Button

3.0 以上适用

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景顔色(默认style时）
                      按钮字体和边框顔色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮佈局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空

Demo

1
2
3
4
5
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,,outline %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}

This is my website, click the button JerryC This is my website, click the button JerryC This is my website, click the button JerryC This is my website, click the button JerryC This is my website, click the button JerryC

1
2
3
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block center larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block right outline larger %}
JerryC JerryC JerryC
1
2
3
4
5
6
7
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,blue larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,pink larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,red larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,purple larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,orange larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,green larger %}
JerryC JerryC JerryC JerryC JerryC JerryC JerryC
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline blue larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline pink larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline red larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline purple larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline orange larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline green larger %}
</div>
JerryC JerryC JerryC JerryC JerryC JerryC JerryC
## 扩展样式 ### 另一种风格的 note 和小 tag 标签

绿色

红色

黄色

灰色

蓝色

红色小标签 绿色小标签 蓝色小标签 黄色小标签 灰色小标签 小标签参数说明：`

你的文字

` 写法如下
1
2
3
4
5
6
7
8
9
10
11
12
/* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>
以上代码的效果可以看本段开头处的效果（不写颜色默认为灰色）。当然了你也可以设置某个边框加粗。例如 `

绿色

` ### 渐变 note
1
2
3
4
<div class='tip' ><p>默认情况<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>

默认情况

success

error

warning

### volantis 主题的 note 标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="snote red"><p>默认 red</p></div>
<div class="snote quote"><p>quote</p></div>
<div class="snote info"><p>info</p></div>
<div class="snote done"><p>done</p></div>
<div class="snote success"><p>success</p></div>
<div class="snote danger"><p>danger</p></div>
<div class="snote error"><p>error</p></div>
<div class="snote radiation"><p>radiation</p></div>
<div class="snote bug"><p>bug</p></div>
<div class="snote idea yellow"><p>idea-yellow</p></div>
<div class="snote link blue"><p>link- blue</p></div>
<div class="snote paperclip"><p>paperclip</p></div>
<div class="snote todo"><p>todo</p></div>
<div class="snote msg cyan"><p>msg cyan</p></div>
<div class="snote guide"><p>guide</p></div>
<div class="snote download"><p>download</p></div>
<div class="snote up"><p>up</p></div>
<div class="snote undo"><p>undo</p></div>

默认 red

quote

info

done

success

danger

error

radiation

bug

idea-yellow

link- blue

paperclip

todo

msg cyan

guide

download

up

undo

### Checkbox & Radio
1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
参数列表： ~ 颜色 `red, yellow, green, cyan, blue` ~ 样式 `plus, minus, times` ~ 选中状态 `checked` tag 标签格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% 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, 叉 %}
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<div class="checkbox">
  <input type="checkbox" />
  <p>纯文本测试</p>
</div>

<div class="checkbox checked">
  <input type="checkbox" checked />
  <p>
    支持简单的
    <a
      href="https://guides.github.com/features/mastering-markdown/"
      target="_blank"
      rel="noopener"
      >markdown</a
    >
    语法
  </p>
</div>

<div class="checkbox red">
  <input type="checkbox" />
  <p>支持自定义颜色</p>
</div>

<div class="checkbox green checked">
  <input type="checkbox" checked />
  <p>绿色 + 默认选中</p>
</div>

<div class="checkbox yellow checked">
  <input type="checkbox" checked />
  <p>黄色 + 默认选中</p>
</div>

<div class="checkbox cyan checked">
  <input type="checkbox" checked />
  <p>青色 + 默认选中</p>
</div>

<div class="checkbox blue checked">
  <input type="checkbox" checked />
  <p>蓝色 + 默认选中</p>
</div>

<div class="checkbox plus green checked">
  <input type="checkbox" checked />
  <p>增加</p>
</div>

<div class="checkbox minus yellow checked">
  <input type="checkbox" checked />
  <p>减少</p>
</div>

<div class="checkbox times red checked">
  <input type="checkbox" checked />
  <p>叉</p>
</div>

<div class="checkbox">
  <input type="radio" />
  <p>纯文本测试</p>
</div>

<div class="checkbox checked">
  <input type="radio" checked />
  <p>
    支持简单的
    <a
      href="https://guides.github.com/features/mastering-markdown/"
      target="_blank"
      rel="noopener"
      >markdown</a
    >
    语法
  </p>
</div>

<div class="checkbox red">
  <input type="radio" />
  <p>支持自定义颜色</p>
</div>

<div class="checkbox green">
  <input type="radio" />
  <p>绿色</p>
</div>

<div class="checkbox yellow">
  <input type="radio" />
  <p>黄色</p>
</div>

<div class="checkbox cyan">
  <input type="radio" />
  <p>青色</p>
</div>

<div class="checkbox blue">
  <input type="radio" />
  <p>蓝色</p>
</div>

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

### 富文本按钮
1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
- 圆角样式 `rounded, circle` - 布局方式 默认为自动宽度，适合视野内只有一两个的情况。 | 参数 | 含义 | | :----: | :--------------------------------------: | | wide | 宽一点的按钮 | | fill | 填充布局，自动铺满至少一行，多了会换行。 | | center | 居中，按钮之间是固定间距。 | | around | 居中分散 | | grid2 | 等宽最多 2 列，屏幕变窄会适当减少列数。 | | grid3 | 等宽最多 3 列，屏幕变窄会适当减少列数。 | | grid4 | 等宽最多 4 列，屏幕变窄会适当减少列数。 | | grid5 | 等宽最多 5 列，屏幕变窄会适当减少列数。 | - 增加文字样式 可以在容器内增加`标题`和`描述文字`
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
{% btns circle grid5 %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% endbtns %}

{% btns rounded grid5 %}
{% cell 下载源码, /, fa fa-download %}
{% cell 查看文档, /, fa fa-book %}
{% endbtns %}

{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
<i class='fa fa-apple'></i>
<b>心率管家</b>
{% p red, 专业版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/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='fa fa-apple'></i>
<b>心率管家</b>
{% p green, 免费版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}
Dreamy.TZK Dreamy.TZK Dreamy.TZK Dreamy.TZK Dreamy.TZK

下载源码 查看文档
心率管家

专业版

 心率管家

免费版

Folding

1
2
3
{% folding 参数（可选）, 标题 %}
null
{% endfolding %}

标题

null

参数位置可以填写颜色和状态，多个参数用空格隔开。

  • 颜色
    blue, cyan, green, yellow, red
  • 状态
    状态填写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 查看图片测试 %}

null

{% 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/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

查看图片测试

null

查看默认打开的折叠框

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

查看代码测试

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

Fancybox

1
2
3
4
{% fancybox 参数, 列数 %}
null
null
{% endfancybox %}

null
null

  • 对齐方向
    left, center, right
  • 缩放
    stretch
  • 列数
    逗号后面直接写列数，支持 2 ～ 8 列。设定列列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配stretch来时图片放大填充。

单张图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="gallery ">
    <p>
    <div class="fancybox">
        <img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg"
            alt="图片描述">
        <span class="image-caption">
            图片描述
        </span>
    </div>
    </p>
</div>
<!-- TAG写法（不建议）
{% fancybox %}
null
{% endfancybox %}
-->

图片描述 图片描述

一行多个图片（不换行）

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
<div class="gallery ">
    <p>
    <div class="fancybox">
        <img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg"
             alt="图片描述">
        <span class="image-caption">图片描述</span>
    </div><br>
    <div class="fancybox">
        <img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg"
             alt="图片描述">
        <span class="image-caption">图片描述</span>
    </div><br>
    <div class="fancybox">
        <img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg"
             alt="图片描述">
        <span class="image-caption">图片描述</span>
    </div>
    </p>
</div>

<!-- TAG写法 不推荐
{% fancybox %}
null
null
null
{% endfancybox %}
-->

图片描述 图片描述

图片描述 图片描述

图片描述 图片描述

多行多个图片（每行 2 ～ 8 个图片）

1
2
3
4
5
6
7
8
9
10
{% fancybox stretch, 4 %}
null
null
null
null
null
null
null
null
{% endfancybox %}

null
null
null
null
null
null
null
null

文章内音乐

Aplayer

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
{% aplayerlist %}
{
    "narrow": false,// （可选）播放器袖珍风格
    "autoplay": true,// （可选) 自动播放，移动端浏览器暂时不支持此功能
    "mode": "random",// （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation'
    "showlrc": 3,// （可选）歌词显示配置项，可选项有：1,2,3
    "mutex": true,// （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
    "theme": "#e6d0b2",// （可选）播放器风格色彩设置，默认：#b7daff
    "preload": "metadata",// （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'
    "listmaxheight": "513px",// (可选) 该播放列表的最大长度
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}

简单示例

1
{% meting "60198" "netease" "playlist" %}

进阶示例

1
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

Audio

1
2
3
4
5
6
7
<audio controls="" preload="" __idm_id__="269361153">
  <source
    src="http://music.163.com/song/media/outer/url?id=574566207.mp3"
    type="audio/mp3"
  />
  Your browser does not support the audio tag.
</audio>