(调教hexo) hexo 安装aplayer懒人方法

本篇适用于在单个页面硬塞一个aplayer播放器。

关于hexo butterfly主题的官方文档在此~

官方的aplayer教程在此~

之前一直被hexo butterfly主题装aplayer的问题所困扰，网上有不少教程说用npm装aplayer标签外挂插件，终不得解，官方的教程（在上面）又看不懂。

鉴于这个问题实在麻烦，只能自创一个懒人方案，如有雷同，纯属巧合。

配置依赖文件

找到layout.pug，位置如下图：

如图，在此位置加入以下语句：

1
2
3

link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css")
script(src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js")
script(src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js")

注：注意保持缩进一致。 与python类似，缩进在pug中同样属于语法。

这里的操作可以让渲染输出的html文件开头加载类似以下内容：

配置`meting.js`

在需要加入播放器的页面的源文件（***.md）适当位置加入以下内容:

<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    mini: false,
    autoplay: false,
    theme: '#FF8EB3',
    loop: 'all',
    order: 'random',
    preload: 'auto',
    volume: 0.3,
    mutex: true,
    listFolded: true,
    listMaxHeight: '250px',
    lrcType: 3
});
</script>

以及如下内容：

1
2
3

<meting-js
	xxxxxx>
</meting-js>

其中内容参考meting.js文档

或者你还可以…

如果你觉得meting.js搞起来太麻烦，那么你可以在需要加入播放器的页面的源文件（***.md）适当位置加入以下内容:

<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    mini: false,
    autoplay: false,
    theme: '#FF8EB3',
    loop: 'all',
    order: 'random',
    preload: 'auto',
    volume: 0.3,
    mutex: true,
    listFolded: true,
    listMaxHeight: '250px',
    lrcType: 3,
    audio: [
        {
            name: 'xxx',
            artist: 'xxx',
            url: 'xxx',
            cover: 'xxx',
            lrc: 'xxx',
            theme: 'xxx'
        }
	//more...
	]
});
</script>

各个参数根据自身需要调整，具体参阅aplayer文档

配置依赖文件

配置meting.js

或者你还可以…

配置`meting.js`