Hexo+Fluid博客添加网易云背景音乐
本文最后更新于:2 年前
前言
看到别人的博客都有音乐插件,我也想要,结果这个主题下好像没有,需要自己折腾一下子。我就做个最简单的好了~
修改记录
首先就是网易云比较简单,只要生成一首歌或者是歌单的外链就可以了。将下述的代码添加到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();
})();
这样的话就大功告成了~~看看效果:
结语
无非就是自己想要做的事,折腾一下总是能够有办法的!!