子比主题添加一个悬浮伸缩侧边栏

效果图

js代码（用于aplayer加载）

audio需要在里面添加歌曲，首页才能正常播放

wordpress无法支持meting的播放器，所以这边使用了aplayer作为音乐播放器

使用lrcType: 3作为歌词显示

const ap = new APlayer({
              container: document.getElementById('aplayer'),
              fixed: true,
              order: 'random',
              preload: 'none',
              volume: 0.25,
              lrcType: 3,
              audio: [
                {
                name: '不眠之夜：星穹铁道',
                artist: '张杰/MOYO-Mix',
                url: 'https://cn-sy1.rains3.com/anxkj.fun/music/%E5%BC%A0%E6%9D%B0%20_%20HOYO-MiX%20-%20%E4%B8%8D%E7%9C%A0%E4%B9%8B%E5%A4%9C.ogg',
                lrc: '/music/lrc/1.lrc',
                cover: 'https://y.qq.com/music/photo_new/T002R300x300M000004ItRwk3R0LYz_1.jpg?max_age=2592000'
                }
              ]
            });

html代码

悬浮伸缩侧边栏的html（轻笑Chuckle的教程里面的主题是hexo butterfly，主题语言是pug格式，这边用到的代码是pug转换为html）

里面的东西可以试着修改一下

此处内容已隐藏，请评论后刷新页面查看.

CSS代码

侧边栏css代码

css代码还未写完，播放器样式功能可能跟轻笑的不一样

比轻笑Chuckle提供的css多一些（用轻笑Chuckle提供的css会出现赞赏无法正常使用)

此处内容已隐藏，请评论后刷新页面查看.

颜色代码

弹窗需要用到的颜色代码

此处内容已隐藏，请评论后刷新页面查看.

后续

如果你有安装音乐播放器的插件，可以不用外部引用js和css文件。

如果没有，需要在你的主题头部添加代码

<link rel="stylesheet" type="text/css" href="/anxkj/fixedcard-dashboard.css" rel="external nofollow" >
 <link rel="stylesheet" href="https://jsd.onmicrosoft.cn/npm/aplayer/dist/APlayer.min.css" rel="external nofollow" >
 <script src="https://jsd.onmicrosoft.cn/npm/aplayer/dist/APlayer.min.js"></script>
 <!-- require MetingJS -->
 <script src="https://jsd.onmicrosoft.cn/npm/meting@2/dist/Meting.min.js"></script>

版权声明 1 本网站名称：星空知
2 本站永久网址：https://www.xkzhi.cn/
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ1397403557进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END