前言

---

看到别人的博客都有音乐插件，我也想要，结果这个主题下好像没有，需要自己折腾一下子。我就做个最简单的好了~

修改记录

---

首先就是网易云比较简单，只要生成一首歌或者是歌单的外链就可以了。将下述的代码添加到footer对应的content里，因为想要把它的位置固定在左下角。

<div id="music_div" style="position: fixed; bottom: 0px; left: 30px;">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 
    	src="//music.163.com/outchain/player?type=0&id=919444742&auto=1&height=90">
    </iframe>
    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <script src="/js/musicshow.js"></script>
</div>

然后引入了jQuery，hexo g之后这样就可以看到左下角有一个音乐框，我们可以使用iframe参数控制其显示大小。

但是当首页的时候会比较违和，所以我们引入一个musicshow.js控制一下，如果页面是首页的话下拉多少的时候音乐框显示，小于多少就隐藏。

在主题的source目录js目录里边新建一个musicshow.js文件：

!(function() {
  function show() {
     //简单判断首页，因为我的域名是tomorrow50.xyz，所以首页就会触发
	if (location.href.match(/xyz.{0,1}$/)){
         //直接把音乐框隐藏
		$("#music_div").attr("style","display:none;");
         //滚动条事件
		$(window).scroll(function(){
			//获取滚动条的滑动距离
			var scroH = $(this).scrollTop();
			//滚动条的滑动距离大于120，就显示，反之就隐藏
			if(scroH >= 120){
				$("#music_div").attr("style","display:block;position:fixed;bottom:0px;left:30px;");
			}else if(scroH < 120){
				$("#music_div").attr("style","display:none;");
			}
		 })
	}

  }
  show();
})();

这样的话就大功告成了~~看看效果：

结语

---

无非就是自己想要做的事，折腾一下总是能够有办法的！！