Hexo+Fluid博客添加网易云背景音乐

本文最后更新于:1 个月前

前言


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

修改记录


首先就是网易云比较简单,只要生成一首歌或者是歌单的外链就可以了。将下述的代码添加到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();
})();

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

f872b5a47c9ee5daf6fe7da5810d6853.png

结语


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



本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!