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

效果图

js代码（用于aplayer加载）

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代码

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

颜色代码

弹窗需要用到的颜色代码

后续

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

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

<link rel="stylesheet" type="text/css" href="/anxkj/fixedcard-dashboard.css">
 <link rel="stylesheet" href="https://jsd.onmicrosoft.cn/npm/aplayer/dist/APlayer.min.css">
 <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>

更新日志

2024.02.04 14:05

修复歌曲无法显示歌词

2024.02.03 18:00

修复赞赏

修复歌曲无法点开列表

取消meting，使用aplayer

该文章来自安凝雪科技

感谢您的访问，Ctrl+D收藏本站吧。