当你打开我的博客，想惬意的边听音乐边看（虽然并没有人这么做）时，去打开音乐软件放音乐显然不可能，这样太浪费时间了，那干脆直接在博客上加一个
https://github.com/xfcnl/xfcnl.github.io/blob/main/assets/js/player.js
https://github.com/xfcnl/xfcnl.github.io/blob/main/assets/js/player-dock.js
https://github.com/xfcnl/xfcnl.github.io/blob/main/assets/js/pjax.js
这是所用到的所有用到的 js 代码
https://github.com/xfcnl/xfcnl.github.io/blob/main/_includes/player.html
https://github.com/xfcnl/xfcnl.github.io/blob/main/_includes/player-style.html
这个就是用到的所有显示在页面上的 html 和 css 代码
https://github.com/xfcnl/xfcnl.github.io/blob/main/_config.yml
里面的 netease_player 就是播放器的配置文件了
| 文件 | 行数 | 核心功能 | 关键代码 / 逻辑 |
|---|---|---|---|
_config.yml |
7 行 | 全局配置 | enable, playlist_id, theme, volume, order — 控制播放器开关、歌单、主题色 |
_includes/player.html |
36 行 | 播放器入口模板 | 加载 APlayer + MetingJS CDN；<meting-js> 标签声明歌单；include 样式和 JS |
_includes/player-style.html |
200 行 | 深色主题 CSS | docked 缩略态（56×56px）、迷你模式、进度/音量蓝色、响应式（≤768px 移右下） |
assets/js/player.js |
129 行 | 交互微调 | adjustPlayerPosition() 锁定位置；adjustPlayerIcons() 缩放按钮；MutationObserver 强行展开完整模式 |
assets/js/player-dock.js |
70 行 | 闲置停靠 | 1 秒无操作 → .docked 缩成小方块；鼠标/触摸/键盘交互 → 展开；mouseenter 保持展开 |
如果你正在看我的文章就可以看到了