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

 

 

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

【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）最后效果

 

二、添加“返回顶部”图标

（1）准备一个你喜欢的图片（能够自行P图，把图片里的主角 抠出来~），在本身的博客园管理后台——【相册】/【文件】，上传图片（注意格式 ——【相册】是支持多种图片格式；【文件】支持 gif 格式，就算不是 动图，也能够改成 gif格式，再上传~）

上传成功后，找到相应的图片，鼠标右击，复制连接地址：

https://files.cnblogs.com/files/bigorangecc/longmao.gif

 

 

（2）添加代码

【博客后台管理】——【设置】——【页首Html代码】，将如下代码复制粘贴进去。（注意修改 图片的路径，在代码最后面的<p>标签里，替换 src 以及 alt 属性值）。保存后，从新打开博客的某篇文章，就能够看到添加的小图标啦~

<style>
  #back-top {
 position: fixed; bottom: 10px; right: 5px; z-index: 99; } #back-top a{outline:none}
  </style>
  <script type="text/javascript"> $(function() { // hide #back-top first
      $("#back-top").hide(); // fade in #back-top
 $(window).scroll(function() { if ($(this).scrollTop() > 500) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function() { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); </script>
  <p id="back-top" style="display:none">
　　　<a href="#top"><img style="width:100px;"src="https://files.cnblogs.com/files/bigorangecc/longmao.gif"  alt="龙猫" /></a>
　</p>  # 这里修改 图片的连接地址和属性噢~

（3）效果展现——超Q的龙猫

 

 

 

 【未完待续】

 

 

 

 

【参考阅读】

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

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