昨天閑著無聊，就給自己的電腦裝了一個Ghost的博客，打開博客的第一眼就被震撼到了，我們可以發現界面十分的簡介。。。。上面的都是廢話
我們來看一看我我選擇的音樂播放器——網易云音樂，這個播放器就是在一個歌曲上點開之后有一個生成外鏈播放器的按鈕，然后讓我們看一看模板長個什么樣子

手機版

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="http://music.163.com/outchain/player?type=2&id=103035&auto=1&height=32"></iframe>

電腦版

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=103035&auto=1&height=66"></iframe>

這里我們可以調整auto的參數0\1來調整是否自動播放，通過調整iframe的width來對當前窗口的大小進行調整這里推薦200， 我們可以發現


通過Chrome我們可以發現其中Navbar的寬度為240其中下面的按鈕的寬度是200那么我們也設置成200就行了，然后我們打開

然后在頁腳的位置加入以下的代碼
example:

<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>$(document).ready(function(){var isOnPc=!(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent));if(!isOnPc){$(".nav ul:first").append('<iframe id="music-if" frameborder="no" border="0" marginwidth="0" marginheight="0" width='+200+' height=52 src="http://music.163.com/outchain/player?type=2&id=103035&auto=1&height=32"></iframe>');$("#music-if").css("margin-top", "0px");$("#music-if").css("margin-bottom", "0px");$("#music-if").css("position", "fixed");$("#music-if").css("bottom", "80px");$("#music-if").css("z-index", "10000000");}else{$(".nav ul:first").append('<iframe id="music-if" frameborder="no" border="0" marginwidth="0" marginheight="0" width=200 height=86 src="http://music.163.com/outchain/player?type=2&id=103035&auto=1&height=66"></iframe>');$("#music-if").css("margin-top", "0px");$("#music-if").css("margin-bottom", "0px");$("#music-if").css("position", "fixed");$("#music-if").css("bottom", "80px");$("#music-if").css("z-index", "10000000");}});
</script>

當然你可以將.append()中的內容替換成你自己生成的播放器，同時記得將寬度調整為220或者新建一個div然后把這個div的寬度設置為200px就行了

轉載于:https://www.cnblogs.com/JeremyGJY/p/5921589.html

總結

以上是生活随笔為你收集整理的【Ghost Blog】如何给Ghost Blog添加背景音乐的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。