安装和基本介绍

# 简介

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

# DEMO

http://demo.hexo-tag-mmedia.u2sb.com/ (opens new window)

# 使用

hexo-tag-mmedia 插件和其他 hexo 插件使用方法类似，诸如如何启用一个插件之类的共性问题就不再赘述了，只说 hexo-tag-mmedia 相关的。

# 安装

npm install hexo-tag-mmedia@1 --save

pnpm install hexo-tag-mmedia@1 --save

yarn add hexo-tag-mmedia@1 --save

// Make sure to add code blocks to your code group

# 配置

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

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

注意

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

点击查看

持续更新中，详情见详细文档和源码 (opens new window)

mmedia:
  audio:
    default:
  video:
    default:
  aplayer:
    js: https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js
    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
    api:
    default:
  dplayer:
    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
    dash_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
    flv_js: https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js
    webtorrent_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

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

# 解释

配置项较多目的是给予最大的自定义权限，默认情况下不做配置也可以使用。
配置文件放在博客根目录的 _config.yml 中
default 为默认配置，在 _config.yml 中填写就不需要在每个标签全部写入了，所有允许在 mmedia 标签上写入的配置项，均可在 default 下配置。
default 下 contents 项，用于设置 JSON 类型的默认配置，注意要使用 yaml 格式写默认配置，以下是几个示例。

# 示例

如无法读懂下面的示例，请阅读后面的文档后再回来看。

点击查看

修改 Aplayer 的 js 文件：

mmedia:
  aplayer:
    js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
    css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css

1
2
3
4

将 Aplayer 的 JS 和 CSS 放入博客目录：

首先请下载 APlayer.min.js 和 APlayer.min.js 文件，放入博客下 source/assets/js/ 和 source/assets/css/ 下（路径只是示例）

mmedia:
  aplayer:
    js: /assets/js/APlayer.min.js
    css: /assets/css/APlayer.min.css

1
2
3
4

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

mmedia:
  meting:
    default:
      loop: all
      order: random

1
2
3
4
5

Dplayer 修改弹幕 API：

mmedia:
  dplayer:
    default:
      contents:
        danmaku:
          api: https://api.prprpr.me/dplayer/v3/

1
2
3
4
5
6

# 使用

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

点击查看

{% mmedia "audio" "src:a.mp3" %}

{% mmedia "aplayer" "name:songName" "url:a.mp3" %}

{% mmedia "meting" "auto=https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html" %}

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

{% mmedia "xigua" "xid=6925997698269053453" %}

{% 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" %}
{
  "contextmenu":
  [
    {
      text: "custom1",
      link: "https://github.com/DIYgod/DPlayer"
    }
  ]
}
{% endmmedias %}

1
2
3
4
5
6
7
8
9
10
11
12

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 使用原则

提示

必看

# 规则

# 标签

markdown 内可以使用两种标签作为插件，分别是 mmedia 和 mmedias ，使用方式为：

{% mmedia %}

{% mmedias %}
{% endmmedias %}

1
2

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

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

audio video meting aplayer dplayer bilibili xigua

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

# 参数

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

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

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

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

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

1
2
3

两种写法是等效的。

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

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

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

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

# JSON 传参

支持 JSON 方式传参，其中 JSON 为 JSON5 (opens new window) 规范。

示例：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 从 0.x 升级

考虑到一部分用户 0.x 版本使用时间较长，迁移成本较高，遂将 0.x 单独发布为一个包，可以用 1.x 版本同时安装。

详情见 0.X 版本。

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

# 开发者要说的几句话

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

#开源项目 #hexo-tag-mmedia

上次更新: 10/4/2022, 11:21:17 PM

← FAQ Audio→