Netease-music是一款我使用了很久的网易云音乐插件,它可以轻松将我在网易云上创建的歌单,直接调用到WordPress平台上进行播放。而且插件是通过网易云音乐的接口进行播放,不占用服务器空间和带宽资源。这是我喜欢它最重要的原因之一。
但是Netease-music插件的默认样式和我的博客主题在风格上存在一些差异,让它不能很好的融入博客,总让人觉得它“不是亲生的”。所以决定对它进行了一些小幅度的修改,让它可以融入我的主题风格。
一、修改Netease-music的页面宽度
Netease-music插件的默认宽度是1000px,但是我主题的可视宽度是1110像素,为了视觉上保持一致,首先就要改插件宽度。
1、修改歌单封面图的宽度
找到插件netease-music\build\css目录下的page.min.css文件。文件中找到这段代码:
.nm-container{max-width:1000px;margin:0 auto}
然后将max-width的值改为1030,如下所示:
.nm-container{max-width:1130px;margin:0 auto}
为什么是1030,不是1110呢,因为我发现歌单封面图的左右两侧各有10px的边距,为了抵消这20px的边距,1110+20=1130。
2、修歌单标题的宽度
page.min.css文件中找到以下代码:
.nm-songs-title{padding-bottom:5px;border-bottom:1px solid #ddd;max-width:1000px;margin:0 auto 15px}
将max-width的值改为1110,如下所示:
.nm-songs-title{padding-bottom:5px;border-bottom:1px solid #ddd;max-width:1110px;margin:0 auto 15px}
3、修改歌单列表宽度
page.min.css文件中找到以下代码:
.nm-songs-list{position:relative}.album--nice-list,.nm-songs-list{max-width:1000px;margin:0 auto}
将max-width的值改为1110,如下所示:
.nm-songs-list{position:relative}.album--nice-list,.nm-songs-list{max-width:1110px;margin:0 auto}
这时候,整个插件页面的宽度就和主题的默认宽度保持一致了。其实有个快捷的修改方法,就是打开page.min.css,在代码编辑器中直接搜索【1000】,让后替换为【1110】即可。然后再单独搜索【.nm-copyright】,将max-width的值改为1030。
二、隐藏页面标题
博客主菜单中已经有歌单的选项了,所以页面上再加一个标题显得特别累赘,而且在手机上,者个页面标题占用很大的高度,整个页面看起来不协调,所以决定隐藏这个页面标题。page.min.css文件中找到下面这段代码:
.nm-page-title{font-size:24px}
然后将其替换为下面这段代码即可,即是让元素不可见:
.nm-page-title{display:none;}
三、将歌单列表的背景设为透明
这款插件只有当你点击歌单封面,才会展开歌曲列表,这个歌曲列表是带有#f0f0f0的灰色背景的。当主题的页面背景也是#f0f0f0这个颜色时,就能很好的融合在一起。否则就就一种割裂感。另外,发现当我将主题切换成深色模式的时候,这个#f0f0f0的灰色背景没有转换为深色,但是歌单列表的文字却转换为#ffffff的白色了。导致文字看不清了。思前想后,最后将它的背景透明度设为0。
在page.min.css找到这段代码:
.nm-songs{background-color:#f0f0f0;padding:20px 0}
然后将其替换为以下这段代码,即将背景设为#fff白色,而且透明度为0。
.nm-songs{background-color:rgba(255,255,255,0.0);padding:20px 0}
四、修改封面标题的字体颜色
封面的字体标题是直接调用网易云音乐的标题,所以切换深色模式时,没有跟随深色模式而进行变化。但是它的背景却跟随深色模式由白色变成了黑色。导致深色模式下字体不可见。思前想后,将字体颜色修改成了#808080灰色。
page.min.css文件找到这段代码:
.music-info{color:#333;display:block;font-size:12px;line-height:1.5;overflow:hidden;padding:3px 0;text-align:center;text-overflow:ellipsis;white-space:nowrap}
将color的值由#333改为#808080,如下所示:
.music-info{color:#808080;display:block;font-size:12px;line-height:1.5;overflow:hidden;padding:3px 0;text-align:center;text-overflow:ellipsis;white-space:nowrap}
至此,netease-music的样式就修改完毕了,虽然是很简单的修改,但是页面开始融入主题的风格了,应该没有人会怀疑它“是不是亲生”的了吧。