【博客園使用小指南】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