Markdown(md)写作模板--多媒体配置说明

对 hexo 引用 图片 、音乐 、视频 以及 标签插件功能 进行说明。

标签插件参考：https://hexo.io/plugins/
功能插件参考：https://hexo.io/zh-cn/docs/tag-plugins
资源文件夹参考：https://hexo.io/zh-cn/docs/asset-folders.html

标签插件

Hexo官方的标签插件参考链接：
https://hexo.io/zh-cn/docs/tag-plugins
若官方的参考文档表述不明；
请参考官方的 代码库 结合 浏览器的 F12 调试功能进行测试；
标签插件代码库的安装路径为：\node_modules\hexo\lib\plugins\tag
以下的测试说明，基于 Hexo 的官方主题进行，未进行基于其他主题的测试；
其他主题可能存在 bug ，因为其他主题可能会修改官方默认的标签插件设置；
标签插件的固定格式为：花括号% 属性 其他参数 %花括号
属性 指 html 标签 或者 hexo 自定义的标签；
例如：img 、link 、 asset_img 、post_link 等等；

添加图片

打开项目根目录的配置文件 config.yml ，注意，不是主题的配置文件；
将配置文件中的 post_asset_folder 选项设为 true 来打开；
这样的话，在执行 hexo new post 文章 ，新建 文章.md 文件的时候；
会同时建立同名的 文章 资源文件夹；
如果没有资源需要从 文章 资源文件夹 引用，那么可以删除该文件夹，hexo 在执行渲染的时候，不会出错；
而且 文章 资源文件夹在经过 hexo 执行 html 渲染后，文件夹也会被删除；
文件夹的资源会被移动到与 文章.html 相同的目录；
所以，在 文章.md 引用文件夹资源的时候，才不需要包含路径；

方法一：不指定图片的大小；

花括号% 固定属性asset_img 存放在资源文件夹的图片名称及后缀不需要路径 图片说明 %花括号
各参数之间以 空格 分割，图片的默认大小为文章的宽度；实际显示图片高度是按照宽度等比例缩放；
示例：

asset_img 标签插件的 bug 说明及修改：
在 hexo 中，如果 前文 中使用了 三个反引号的 代码块标识符；
那么在后文中出现的 asset_img 标签插件就会解析失败；
解决方法：
修改 \node_modules\hexo\lib\extend\tag.js 代码，替换下面的语句；

// 原代码
// str = str.replace(/<pre><code.*>[\s\S]*?<\/code><\/pre>/gm, escapeContent);
// 修改后：
str = str.replace(/<pre><code.*?>[\s\S]*?<\/code><\/pre>/gm, escapeContent);  
参考文档如下：https://segmentfault.com/q/1010000012070918  
解决方法是添加一个问号  ？ ，将  <code.*>  改为  <code.*?>   ；  
添加一个  ？ 问号，把正则表达式改为非贪婪的；  
修改前：str = str.replace(/(?:<pre>)?<code.*>[\s\S]*?<\/code>(?:<\/pre>)?/gm, escapeContent);  
修改后：str = str.replace(/(?:<pre>)?<code.*?>[\s\S]*?<\/code>(?:<\/pre>)?/gm, escapeContent);  

实际 ijun 站点 和 学习笔记 都进行了 bug 修改；变更了 hexo 的源代码；

方法二：指定图片的大小；

使用hexo官方的标签插件；
参考链接：https://hexo.io/zh-cn/docs/tag-plugins#Image
花括号% 固定属性img 样式表的类名可以是多个以空格分隔也可以留空白 图片完整的http路径不可以省略--可以使用img文件夹或者文章的资源文件夹 图片宽度不可以写上px单位默认单位是px 图片高度不需要单位 '"图片说明文字" "显示图像失败的替代文本"' %花括号
示例：未设置样式表；实际显示图片高度是按照宽度等比例缩放；相当于高度参数实际未起作用，但是不能省略；

链接Link插件

花括号% 固定属性link 文章显示的文本 链接的http网址 true或者false控制是否添加target="_blank"属性 鼠标悬浮在链接上显式的文本 %花括号
示例：
这是百度的链接 花括号% link 百度网址超链接 https://www.baidu.com/ true 百度 %花括号
这是百度的链接 百度网址超链接

引用其他文章链接地址的方法

以下 post_path 和 post_link 两个属性方法的区别是：
post_path 返回的是字符串；
post_link 返回的是超链接；
可以通过对 \node_modules\hexo\lib\plugins\tag 代码块的修改实现自己想要的功能；
实际未修改；

方法一：花括号% post_path filename %花括号；该方法不常用；

示例：
{% post_path Markdown写作模板 %}
返回 Markdown写作模板 文章的站内链接地址字符串如下所示：
/2020/03/14/Markdown%E5%86%99%E4%BD%9C%E6%A8%A1%E6%9D%BF/
===>> 用来返回 Markdown写作模板 文章的站内链接地址字符串；
===>> 注意：返回的不是超链接；
===>> 可以参考 \node_modules\hexo\lib\plugins\tag\post_link 的代码；
===>> 对 \node_modules\hexo\lib\plugins\tag\post_path 代码进行修改；
===>> 从而实现自己想要的功能；
===>> 实际没有进行代码修改，没有将返回地址修改为 加上前缀域名 ；

方法二：使用 post_link 属性，推荐使用的方法；

语法说明：
{% 固定属性post_link 站内目标文章的标题 用来替代目标文章的标题在本页面内显示的文字，同时作为鼠标悬浮的时候显示的文字，默认链接文字是文章的标题,如果包含空格的话那么使用英文单引号裹起来，否则的话不需要单引号 true或者false，用来控制是否对引用文章的标题和自定义标题里的特殊字符进行转义，默认值为true转义 %}

示例：
{% post_link Markdown写作模板 跳转到–Markdown写作模板–文章 true %}
返回跳转到 Markdown写作模板 文章的站内超链接，效果如下所示：
跳转到-- Markdown写作模板 --文章
生成的链接默认不带有 target=”_blank” 属性；
可以通过修改 \node_modules\hexo\lib\plugins\tag\post_link.js 代码实现此功能；
实际进行了修改，通过修改代码尾部的 return 返回值实现添加 target=”_blank” 属性 ；

在使用此标签时可以 忽略 文章文件所在的 路径 或者 文章的永久链接信息、如语言、日期；
例如，在文章中使用 时；
只需有一个名为 how-to-bake-a-cake.md 的文章文件即可；
即使这个文件位于站点文件夹的 source/posts/2015-02-my-family-holiday 目录下；
或者文章的永久链接是 2018/en/how-to-bake-a-cake，都没有影响；

标签插件参考：https://hexo.io/plugins/
功能插件参考：https://hexo.io/zh-cn/docs/tag-plugins
资源文件夹参考：https://hexo.io/zh-cn/docs/asset-folders.html

资源的引用

参考上文的 添加图片 章节；
打开项目根目录的配置文件 config.yml ，注意，不是主题的配置文件；
将配置文件中的 post_asset_folder 选项设为 true 来打开；
这样的话，在执行 hexo new post 文章 ，新建 文章.md 文件的时候；
会同时建立同名的 文章 资源文件夹；
但是在经过 html 渲染后，文件夹会被删除；
文件夹的资源会被移动到与 文章.html 相同的目录；
所以，在 文章.md 引用文件夹资源的时候，才不需要包含路径；
资源文件夹的 asset_img 、 asset_path 、 asset_link 属性参数 slug 就是指 filename ；

图片资源的引用，不指定图片的大小；

语法：
花括号% 固定属性asset_img 存放在资源文件夹的图片名称及后缀不需要路径 图片说明 %花括号
各参数之间以 空格 分割，图片的默认大小为文章的宽度；实际显示图片高度是按照宽度等比例缩放；

asset_img 标签插件的 bug 说明及修改：
在 hexo 中，如果 前文 中使用了 三个反引号的 代码块标识符；
那么在后文中出现的 asset_img 标签插件就会解析失败；
解决方法：
修改 \node_modules\hexo\lib\extend\tag.js 代码，替换下面的语句；

// 原代码
// str = str.replace(/<pre><code.*>[\s\S]*?<\/code><\/pre>/gm, escapeContent);
// 修改后：
str = str.replace(/<pre><code.*?>[\s\S]*?<\/code><\/pre>/gm, escapeContent);
参考文档如下：https://segmentfault.com/q/1010000012070918
解决方法是添加一个问号  ？ ，将  <code.*>  改为  <code.*?>   ；
添加一个  ？ 问号，把正则表达式改为非贪婪的；
修改前：str = str.replace(/(?:<pre>)?<code.*>[\s\S]*?<\/code>(?:<\/pre>)?/gm, escapeContent);
修改后：str = str.replace(/(?:<pre>)?<code.*?>[\s\S]*?<\/code>(?:<\/pre>)?/gm, escapeContent);

实际 ijun 站点 和 学习笔记 都进行了 bug 修改；变更了 hexo 的源代码；
示例：

{% asset_img test.jpg 马勒姆的夜空，英国北约克郡 (© Stephen Dinsdale/Alamy Stock Photo) %}

显示的图片效果如下：

资源存储路径字符串的返回；

语法：
花括号% 固定的属性asset_path 资源文件夹中资源的名称，例如图片名称及后缀不需要路径 %花括号
示例：
{% asset_path test.jpg %}
返回 test.jpg 图片资源的站内链接地址字符串如下所示：
/2020/03/14/Markdown(md)%E5%86%99%E4%BD%9C%E6%A8%A1%E6%9D%BF--%E5%A4%9A%E5%AA%92%E4%BD%93%E9%85%8D%E7%BD%AE%E8%AF%B4%E6%98%8E/test.jpg
===>> 用来返回 test.jpg 图片资源的站内链接地址字符串；
===>> 注意：返回的不是超链接；
===>> 可以参考 \node_modules\hexo\lib\plugins\tag\post_link 的代码；
===>> 对 \node_modules\hexo\lib\plugins\tag\asset_path 代码进行修改；
===>> 从而实现自己想要的功能；
===>> 实际没有进行代码修改，没有将返回地址修改为 加上前缀域名 ；

资源存储路径超链接网址的返回，可以用作附件下载链接生成；

语法：
花括号% 固定的属性asset_link 资源文件夹中资源的名称，例如图片名称及后缀不需要路径 自定义显示的资源名称替换资源文件名同时作为鼠标悬浮时候显示的文字说明，默认显示资源的文件名称 %花括号
示例：
{% asset_link test.jpg test.jpg图片附件的下载测试 %}
返回 test.jpg 图片资源的完整http链接地址：
test.jpg图片附件的下载测试

标签插件参考：https://hexo.io/plugins/
功能插件参考：https://hexo.io/zh-cn/docs/tag-plugins
资源文件夹参考：https://hexo.io/zh-cn/docs/asset-folders.html

添加音乐和视频

直接在文章中引入下面的代码，引用网易云音乐的 外链播放器 ；

// 代码前后需要各空一行，否则会导致文章的其他部分渲染错误；
<div style="position:absolute; bottom: 10px; right: 220px;">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=38592976&auto=1&height=66"></iframe>
</div>
// 代码前后需要各空一行，否则会导致文章的其他部分渲染错误；

播放器默认是显示在页面的右下角；
可以通过变更代码中 div 的 style 样式表 bottom 和 right 参数来调整播放器的位置；

如果是其他的主题，那么将外层的 div 样式修改如下：

<div style="position:fixed; bottom: 10px; right: 10px;">

使用 hexo 的外挂插件扩展功能部署视频和音乐；

音乐和视频插件选用列表如下，按照排序进行优先级的选择

首选推荐使用同时具有音乐和视频功能的插件；

https://github.com/MonoLogueChi/hexo-tag-mmedia
使用说明：
https://easyhexo.com/3-Plugins-use-and-config/3-5-hexo-tag-mmedia/#简介
演示地址：
https://blog.xxwhite.com/2019/hexo-scripts.html

该插件用时包含了 音乐 和 视频 功能，可以替换以下两个插件的功能；

替换了基于 https://aplayer.js.org/#/ 的音乐插件；注意不是 cplayer ；
https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md#pjax-兼容
该音乐插件原因需要额外修改代码，以便与学习笔记的 pjax 功能兼容，所以没有选用；

替换了基于 https://dplayer.js.org/ 的视频插件：
https://github.com/MoePlayer/hexo-tag-dplayer

备选的音乐插件；

https://github.com/EYHN/hexo-tag-cplayer/blob/master/readme-zh-CN.md
https://github.com/wshunli/hexo-tag-mplayer
以上两个插件的功能相同，都是基于 https://cplayer.js.org/ 的音乐插件；注意不是 aplayer ；

备选的两个插件建议选用最近维护的 https://github.com/wshunli/hexo-tag-mplayer 插件；
使用说明参考：
https://www.wshunli.com/posts/hexo-tag-mplayer.html
https://github.com/MoePlayer/cPlayer
https://cplayer.js.org/

部署 hexo-tag-mmedia 音乐和视频插件；

npm install hexo-tag-mmedia --save
配置项目根目录 _config.yml ，注意：不是主题的 _config.yml 文件；

mmedia:
  aplayer:
    cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
    style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
    default:
  meting:
    cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
    api:
    default:
  dplayer:
    cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
    style_cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
    hls_cdn: https://cdn.jsdelivr.net/npm/hls.j/dist/hls.min.js
    dash_cdn: https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js
    shaka_dash_cdn: https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js
    flv_cdn: https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js
    webtorrent_cdn: https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js
    default:

上述 配置中的 default 项下可配置选项，对应下列各表单的参数，例如：

meting: # MetingJS 配置参数
  cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
  api:
  default:
    order: random # 对应 MetingJS 参数表中的 MetingJS 配置项，取值为 随机播放的 random ；

MetingJS 参数列表：

基本兼容 hexo-tag-aplayer，绝大部分可以直接从 hexo-tag-aplayer 迁移；
参数形式为 “option:vaule” ；
不懂的可以参考 MetingJS：https://github.com/metowolf/MetingJS#option
默认配置文件位于 \node_modules\hexo-tag-mmedia\util\constant.js 脚本文件中；

MetingJS 使用示例：

默认配置文件位于 \node_modules\hexo-tag-mmedia\util\constant.js 脚本文件中；

{% meting "001Mf4Ic1aNYYK" "tencent" "album" "order:random" "listmaxheight:180px" %}

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

使用 MetingJS 部署我的 网易云音乐 歌单

Aplayer 参数列表：

Aplayer 使用示例：

当开启 Hexo 的 文章资源文件夹 功能时，可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中，然后直接引用；

默认配置文件位于 ` \node_modules\hexo-tag-mmedia\util\constant.js ` 脚本文件中；

{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

Aplayer 引用单首歌曲的时候，不存在 样式表宽度 width 的 bug ；因为配置项中存在 width 属性可以配置 ；
但是使用 播放列表 AplayerList 功能的时候，存在样式表宽度 width 的 bug ；需要 修复，方法如下：

AplayerList 存在样式表宽度的 bug，需要 修复，方法如下：
修改 \node_modules\hexo-tag-mmedia\util\tag\aplayerList.js 代码，
将其中的 ${width} 替换为 width:100%;

使用 Aplayer 导致 toc 目录跳转失效的解决方法：
参考链接：
使用 Aplayer 导致博客目录跳转失效：https://blog.wangriyu.wang/2018/06-Aplayer.html
Hexo使用Aplayer后目录跳转的bug：https://ds666.fun/2019/08/07/Hexo%E4%BD%BF%E7%94%A8Aplayer%E5%90%8E%E7%9B%AE%E5%BD%95%E8%B7%B3%E8%BD%AC%E7%9A%84bug/
加载 1.10.1 版本的 Aplayer 后，页面内带中文字符的锚标签均无法跳转，而纯英文的正常；
打开控制台，看了下锚标签的点击事件；

发现 smoothscroll 有点眼生啊，好像没用过；
再试着把播放器去掉，发现目录跳转一切正常，果然是此问题；
发现是播放器的问题之后，继续找问题出在哪；
发现去掉播放器之后，锚标签的点击事件少了刚才的 smoothscroll，应该是这个插件的问题；
先去 Aplayer 的仓库看了下依赖，果然使用这插件：

再去看了下 smoothscroll 的仓库，克隆了一份做了下测试；
smooth-scroll 官方代码库：https://github.com/cferdinandi/smooth-scroll/blob/master/dist/smooth-scroll.js
然后发现它处理 hash 时只测试了英文；
而使用中文时，中文字符转成了 Unicode 码；
导致下面函数的判断条件无法成立，后面的点击处理也就失效了；
相关代码如下：
smooth-scroll 官方已经大幅度变更源代码；var linkHandler 好像变成了 var clickHandler ；

var linkHandler = function(ev) {
    if (!ev.defaultPrevented) {
        ev.preventDefault();

        if (location.hash !== this.hash) window.history.pushState(null, null, this.hash)
        // using the history api to solve issue #1 - back doesn't work
        // most browser don't update :target when the history api is used:
        // THIS IS A BUG FROM THE BROWSERS.
        // change the scrolling duration in this call
        var node = document.getElementById(this.hash.substring(1))
        if (!node) return; // Do not scroll to non-existing node

        smoothScroll(node, 500, function (el) {
            location.replace('#' + el.id)
            // this will cause the :target to be activated.
        });
    }
}

需要修改的地方是对 hash 进行 decodeURIComponent 处理；
这样就能正常处理中文的标签和 location 的对应问题了；
smooth-scroll 官方代码库：https://github.com/cferdinandi/smooth-scroll/blob/master/dist/smooth-scroll.js
smooth-scroll 官方已经大幅度变更源代码；var linkHandler 好像变成了 var clickHandler ；

var linkHandler = function(ev) {
    if (!ev.defaultPrevented) {
        ev.preventDefault();

        // 修改此处的 if 判断条件；
        // smooth-scroll 官方：https://github.com/cferdinandi/smooth-scroll/blob/master/dist/smooth-scroll.js
        // smooth-scroll 官方已经大幅度变更源代码，同时添加了 decodeURIComponent 功能；
        // smooth-scroll 官方已经大幅度变更源代码；var linkHandler 好像变成了 var clickHandler ；
        // 参见上述网址的代码：hash = escapeCharacters(decodeURIComponent(toggle.hash));
        if (decodeURIComponent(location.hash) !== decodeURIComponent(this.hash)) window.history.pushState(null, null, decodeURIComponent(this.hash))
        // using the history api to solve issue #1 - back doesn't work
        // most browser don't update :target when the history api is used:
        // THIS IS A BUG FROM THE BROWSERS.
        // change the scrolling duration in this call
        var node = document.getElementById(decodeURIComponent(this.hash).substring(1))
        if (!node) return; // Do not scroll to non-existing node

        smoothScroll(node, 500, function (el) {
            location.replace('#' + el.id)
            // this will cause the :target to be activated.
        });
    }
}

如果是使用 Aplayer 的用户，可以先自行修改依赖；
重新编译一份带正常功能的 smoothscroll 的 Aplayer；
这有已经打包修复的: https://src.wangriyu.wang/lib/Aplayer/APlayer.min.js
如果自己手动修改，那么修改方法如下：
下载代码：https://github.com/MoePlayer/APlayer/tree/master/dist
打开 APlayer.min.js 文件，搜索 defaultPrevented 定位到要修改的地方；
然后替换成以下代码，进行 hash 的 decodeURIComponent 处理；
这样就能正常处理中文的标签和位置的对应问题了；

if (!e.defaultPrevented) {
    e.preventDefault(), decodeURIComponent(location.hash) !== decodeURIComponent(this.hash) && window.history.pushState(null, null, decodeURIComponent(this.hash));
    var n = document.getElementById(decodeURIComponent(this.hash).substring(1));
    if (!n) return;
    t(n, 500, function(e) {
        location.replace("#" + e.id)
    })
}

Aplayer导致toc失效的解决方法

使用 Aplayer 导致  toc  目录跳转失效的详细说明文档，参见上文的详细说明及代码注释；

解决方案：

1. 下载 https://github.com/MoePlayer/APlayer/tree/master/dist 文件；
2. 分别移入对应的 \themes\nexmoe\source\js 和 \themes\nexmoe\source\css 文件夹；
3. 使用 https://src.wangriyu.wang/lib/Aplayer/APlayer.min.js 下载的文件 替换 官方的 APlayer.min.js 文件；
4. 移除 Source map，在下载替换的 min.css 和 min.js 代码尾部，删除一行就可以了，代码如下：　　
   　　/# sourceMappingURL=APlayer.min.css.map/
   　　//# sourceMappingURL=APlayer.min.js.map
   启用 Source map，在下载替换的 min.css 和 min.js 代码尾部，加上一行就可以了，代码如下：　　
   　　/# sourceMappingURL=APlayer.min.css.map/
   　　//# sourceMappingURL=APlayer.min.js.map
5. 修改项目根目录的 CDN 配置，注意：不是主题的配置文件；
6. 修改： cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
   改为： cdn: https://www.ijun0210.club/js/APlayer.min.js
7. 修改： style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
   改为： style_cdn: https://www.ijun0210.club/css/APlayer.min.css
8. 执行 hexo clean && hexo g && hexo s 测试修改；

AplayerList（不推荐使用）

警告:此模式测试不够完善，如果遇到问题请提 issue ;
当开启 Hexo 的 文章资源文件夹 功能时，可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中，然后直接引用；
https://github.com/MonoLogueChi/hexo-tag-mmedia/issues

Aplayer 引用单首歌曲的时候，不存在 样式表宽度 width 的 bug ；因为配置项中存在 width 属性可以配置 ； 
但是使用 播放列表 AplayerList 功能的时候，存在样式表宽度 width 的 bug ；需要 修复，方法如下：
修改 \node_modules\hexo-tag-mmedia\util\tag\aplayerList.js 代码，
将其中的 ${width} 替换为 width:100%;

使用 Aplayer 导致  toc  目录跳转失效的解决方法参见上文的说明；

AplayerList（不推荐使用）使用方式：

默认配置文件位于 ` \node_modules\hexo-tag-mmedia\util\constant.js ` 脚本文件中；
{% 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 %}

使用 AplayerList（不推荐使用） 部署资源文件夹的本地歌曲

警告:此模式测试不够完善，如果遇到问题请提 issue ;
当开启 Hexo 的 文章资源文件夹 功能时，可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中，然后直接引用；
https://github.com/MonoLogueChi/hexo-tag-mmedia/issues

Aplayer 引用单首歌曲的时候，不存在 样式表宽度 width 的 bug ；因为配置项中存在 width 属性可以配置 ； 
但是使用 播放列表 AplayerList 功能的时候，存在样式表宽度 width 的 bug ；需要 修复，方法如下：
修改 \node_modules\hexo-tag-mmedia\util\tag\aplayerList.js 代码，
将其中的 ${width} 替换为 width:100%;

Dplayer 视频播放的参数列表；非必填项，如果不清楚请不要填写：

Dplayer 使用示例，id 为必须填写的属性；

Dplayer 使用示例，id 为弹幕的编号必须填写的属性；且取值不可以为空白，因为自己不需要弹幕，直接填写文件名称即可；
{% dplayer "url:KeyCastOW.mp4" "id:DDEC4F882C0B66FAD" "hotkey:false" "volume:1" "addition:addition0" "addition:addition1" %}

更多属性设置参见 \node_modules\hexo-tag-mmedia\util\tag\dplayer.js 代码文件；
默认配置文件位于 \node_modules\hexo-tag-mmedia\util\constant.js 脚本文件中；
修改 \node_modules\hexo-tag-mmedia\util\tag\dplayer.js 代码文件，移除 视频播放的 弹幕 功能；

${video}
${subtitle}
${dankamu} -------------- 删除该句代码，移除弹幕，仅删除这一行即可；

修改 DPlayer.min.js 的 CDN 引用：

1. 下载 以下 文件；
   cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
   style_cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
2. 分别移入对应的 \themes\nexmoe\source\js 和 \themes\nexmoe\source\css 文件夹；
3. 移除 Source map，在下载替换的 min.css 和 min.js 代码尾部，删除一行就可以了，代码如下：　　
   　　/# sourceMappingURL=DPlayer.min.css.map/
   　　//# sourceMappingURL=DPlayer.min.js.map
   启用 Source map，在下载替换的 min.css 和 min.js 代码尾部，加上一行就可以了，代码如下：　　
   　　/# sourceMappingURL=DPlayer.min.css.map/
   　　//# sourceMappingURL=DPlayer.min.js.map
4. 修改项目根目录的 CDN 配置，注意：不是主题的配置文件；
5. 修改： cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
   改为： cdn: https://www.ijun0210.club/js/DPlayer.min.js
6. 修改： style_cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
   改为： style_cdn: https://www.ijun0210.club/css/DPlayer.min.css
7. 执行 hexo clean && hexo g && hexo s 测试修改；

部署本地视频示例：

{% dplayer "url:test.mp4" "id:test" "hotkey:false" "volume:1" %}

Bilibili 视频播放的参数列表；非必填项，如果不清楚请不要填写：

Bilibili 使用示例：

// 视频 bv 号，bvid、aid 和 av 必填一项，推荐使用 bvid ；
// "quality:high" 视频质量，可选 high、low ，要求浏览器对于 b站 的账号状态处于登录状态才可以显示高清视频；
// 默认配置文件位于 ` \node_modules\hexo-tag-mmedia\util\constant.js ` 脚本文件中；
{% bilibili "bvid:BV1Hs411U7XT" "quality:high" "danmaku" "allowfullscreen" %}

使用备选的 hexo-tag-cplayer 部署音乐插件；

https://github.com/EYHN/hexo-tag-cplayer/blob/master/readme-zh-CN.md
https://github.com/wshunli/hexo-tag-mplayer
以上两个插件的功能相同，都是基于 https://cplayer.js.org/ 的音乐插件；注意不是 aplayer ；

备选的两个插件建议选用最近维护的 https://github.com/wshunli/hexo-tag-mplayer 插件；
使用说明参考：
https://www.wshunli.com/posts/hexo-tag-mplayer.html
https://github.com/MoePlayer/cPlayer
https://cplayer.js.org/

安装：npm install hexo-tag-mplayer --save
使用配置：更多属性参考 https://github.com/MoePlayer/cPlayer 或者 已经安装的源代码
{% mplayer %}
    playlist: [
        {
            src: '歌曲资源链接...',
            poster: '封面链接...',
            name: '歌曲名称...',
            artist: '歌手名称...',
            lyric: '歌词...',  --------- "[time]text\n[time]text\n 即连续的 \n 换行，后续参考使用 aplayer 的脚本，改为读取文本文件；
                               --------- 后来看不懂 aplayer 的脚本，懒的修改了；                               
            sublyric: '副歌词，一般为翻译...', -----------  一般删除不设置
            album: '专辑，唱片...' -----------  一般删除不设置
        }
    ],
    showPlaylist: true,
    width:"100%",
    autoplay: true,
    volume: 1,
    big: false,  --------- 小图模式无法拖到播放器的进度条，大图模式可以，但是大图模式图片会失真，一般不拖动进度条，所以使用小图模式；
    dark: false
{% endmplayer %}

部署示例：

Markdown(md)写作多媒体配置说明结束！