【博客园使用小指南】DIY美化博客园指南

 

 

1、添加音乐播放器（例如 网易云音乐）

【html5 音乐播放器】

源码

GitHub - MoePlayer/APlayer: Wow, such a beautiful HTML5 music player

中文使用指南

https://aplayer.js.org/#/zh-Hans/?id=cdn

cdn链接

https://cdnjs.com/libraries/aplayer

（1）添加html代码 （事先需要申请并通过 博客园的JS 权限 ）

【博客园后台管理】——【设置】——【页脚Html代码】——粘贴以下代码(下面的播放器 是 迷你版的，更多样式 可以参考 播放器源码文件)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/yjlaugus/APlayer.min.js"></script>
<div id="aplayer" class="aplayer"  data-id="3220493480" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

 

（2）获取歌单链接，修改上面代码的  data-id="3220493480" 

如何获取歌单 id 呢？

（现在网页版和PC版的网易云音乐 歌单界面 没有生成“外链播放器‘的功能了。。）

使用 移动端（手机）分享一个歌单，分享方式选为”复制链接“；

例如 我用手机 网易云APP 分享自己的一个歌单：

分享锦蝶生创建的歌单「老树花开锦蝶生」: http://music.163.com/playlist/3220493480/438654155/?userid=438654155 (来自@网易云音乐)

歌单 id 就是 playlist 后面的 3220493480，修改代码 data-id="3220493480"。保存后，重新进入博客园个人主页就可以听心爱的歌啦~

（3）最后效果

 

 

 

 

 

 

 

【参考阅读】

https://www.cnblogs.com/guanxiying/category/1652463.html

https://www.zhihu.com/question/37316681

 

来源：oschina

链接：https://my.oschina.net/u/4275057/blog/4286778