Hexo博客Fluid主题添加Aplayer组件_hexo-tag-aplayer

本文最后更新于：2024年3月20日 中午

前言

aplayer是一个非常漂亮好用的HTML5音乐播放器，和dplayer师出同门。我用的主题是fluid，记录一下添加音乐插件的过程。

我的HEXO博客

安装aplayer

npm和github两种方式二选一，拿到dist文件夹就可以了。

npm安装

在hexo博客的文件夹根目录打开git bash，并输入:

1
2
npm install --save hexo-tag-aplayer

可以看到在node_module文件夹中多出来一个aplayer文件夹即可

为了方便，将这个dist文件夹复制一份到主题目录下的source文件夹中。

Github下载源码

去github clone源码，并复制dist文件夹到主题下的source。

配置js组件

这一步可以根据教程选择自己喜欢的模式。新建一个music.js（名字随便起），放到主题的source文件夹里（我放在source/js/diy/music.js）例如：

82c62c9febb8838ac376ec641923eba4.png

  • 和我选择一样的跟随模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
	autoplay: true, //自动播放
    audio: [
	{
        name: '',
        artist: '',
        url: '',
        cover: '',
    }, 
	]
});

  • 选择普通模式
1
2
3
4
5
6
7
8
9
10
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: '',
        artist: '',
        url: '',
        cover: '',
    }]
});

等等

搞音乐外链

好用是好用，但是没有cover，逼格不够；包含的音乐也有点少。

  • 自己动手薅

  1. 比如说找deca joins的浴室，在页面按F12进入开发者模式，选择Network。

    82c62c9febb8838ac376ec641923eba4.png

  2. 点击播放，找media类型的Request URL就是音乐的URL。

9579265dea76110e5ffeb00990ee0f7e.png

1b9d17d2cfc785c10c4bb30982d55569.png

  1. 同样的找到想要的cover图片的URL，然后一起填到之前的music.js中。

例如我的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
	autoplay: true, //自动播放
    audio: [
	{
        name: "浴室",
        artist: 'deca joins',
        url: 'https://m704.music.126.net/20211212133437/6298f876daf4b3a20b984659f71f8968/jdyyaac/000c/560b/5153/7f43625368aa52c4fbb0f968fa2007d2.m4a?authSecret=0000017dad0be60506550aa4681408a0',
        cover: 'https://p1.music.126.net/byjfkEIOWI_RmxSKEWTPyw==/18910500486297525.jpg?param=200y200',	
    },
	]
});

布置到想要的页面中

因为我用的是fluid主题，作者在_config.yml文件中预留了修改html的接口，所以我就直接添加在

c099a40292281ff77da40bac39408b07.png

1
2
3
4
5
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/js/diy/music.js"></script>

值得注意的是，这里的id=“aplayer”要和上面music.js中的container: document.getElementById(‘aplayer’)填的Id相同。

然后就保存发布即可！

最终效果：

9b62cb79506030c0ccaa5e2bb91f9a94.png

TODO

如何获取歌词lrc，有哪位老哥知道可以和我分享一下。感谢！