前言

作者今天看到了糖果屋的一篇文章 DIY外挂标签的简单写法与应用 就突发奇想的想给Dplayer写个标签外挂(其实是想以后的时候偷懒)

教程

在博客根目录下新建scripts文件夹(已建立的不用重复建立)

新建一个随意名称的文件（后缀要是.js）比如diytag.js

填入

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
//参数处理函数
function dplayer (args, content) {
    // args = args.join(' ').split(',')
    // const div_id = args[0]
    // const div_id = args[1]?args[1]:p0
    const div_id = args
    html = `<div id="${div_id}">播放器加载中......</div>
<script>
//立即执行函数
(
    function () {
        import('https://jsd.cxl2020mc.top/npm/dplayer/+esm')
            .then((module) => {
                // Do something with the module.
                // const ${div_id} = new DPlayer({
                const Dplayer = module.default
                const ${div_id} = new Dplayer({
                    container: document.getElementById('${div_id}'),
                    ${content}
                });
            });
    }
)();
</script>`
    return html
}
//标签注册函数
hexo.extend.tag.register('dplayer', dplayer, { ends: true });

然后你就可以在文章里用标签外挂的方法使用deplayer了
（记得先在head引入Dplayer）

1
2
3
4
5
{% dplayer dplayer %}
video: {
    url: 'https://file.cxl2020mc.top/api/raw/?path=/mc1.mp4',
}
{% enddplayer %}

参数

参数dp表示播放器对象名称
参数dplayer表示播放器的容器id
所有参数在一个文章中不能出现2个相同的

演示

1
2
3
4
5
{% dplayer dplayer %}
video: {
    url: 'https://lc-gluttony.s3.amazonaws.com/eABALL5rKFsL/n66RHPuNklJeNRlEgYOPdkCoO2MEJ7HR/fd431739ff26ceeb3010ac561d68446b_345688670889091949.mp4',
}
{% enddplayer %}
播放器加载中......

高级演示

支持切换清晰度（不过给我用成切换视频节点了），默认第1个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% dplayer dplayer2 %}
video: {
    quality: [
        {
            name: 'od',
            url: 'https://file.cxl2020mc.top/api/raw/?path=/video/%E5%8E%9F%E7%A5%9E%E5%AE%98%E6%96%B9%E5%AE%A3%E4%BC%A0%E7%89%87.mp4',
        },
        {
            name: 's3',
            url: 'https://lc-gluttony.s3.amazonaws.com/eABALL5rKFsL/n66RHPuNklJeNRlEgYOPdkCoO2MEJ7HR/fd431739ff26ceeb3010ac561d68446b_345688670889091949.mp4',
        },
    ],
    defaultQuality: 0,
}
{% enddplayer %}
播放器加载中......