Flexblock添加Aplayer全盘吸底音乐播放器

安装aplayer

在博客文件夹根目录打开git bash 并执行以下命令

1	npm install --save hexo-tag-aplayer

安装完之后会发现/node_modules下多了一个aplayer

将其中的dist文件夹复制粘贴到主题目录下source文件中。

创建aplayer播放器样式

新建一个music.js 文件，并输入以下内容，放到主题的source文件夹中(我放在source/js/diy/music.js)

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    autoplay: false, 
    loop: 'all',
    volume: 0.7,
    listFolded: true,
    listMaxHeight: 60,
    fixed: true,
    audio: [
        {
        name: "MOM", //歌曲名字
        artist: '是二智呀', //歌曲作者
        url: 'http://music.163.com/song/media/outer/url?id=1433338551.mp3', //歌曲url链接
        cover: 'https://p2.music.126.net/xpLjGFEOzWFhs_-4iMsnNw==/109951165112858259.jpg?param=130y130', //歌曲封面
        },
        { //如果只有一首歌以下部分可不要，如果有多首歌就就按此格式添加
            name: "Take me Hand",
            artist: 'Cécile Corbel',
            url: 'https://nf-sycdn.kuwo.cn/161f4edbf309527a7284755fb8c31f1c/65b317df/resource/n2/31/83/2354335626.mp3',
            cover: 'https://img1.kuwo.cn/star/albumcover/500/21/99/3057700581.jpg',	
            }
    ]
});

更多aplayer播放器参数配置信息请查看hexo上的aplayer应用

部署到页面

如果你只需要在主页面吸底显示，则将以下代码添加到主题文件下的\layout\_partial\footer.ejs即可

<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> <!-- 注意这里的src的链接是你自己创建的music.js文件的地址 -->

如果你想要实现全局吸底，请将以上代码移动到主题文件下的layout\_partial\footer-other.ejs

使用pjax实现全局播放

将以下代码放入layout/layout.ejs 文件中的在head标签里面，body标签外(比如在开头)

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
  // 对所有链接跳转事件绑定pjax容器pjax-container 
  $(document).pjax('a', '#pjax-container', {
    fragment:'#pjax-container',
    timeout:8000
    });   
</script>