Netease-music是一款我使用了很久的网易云音乐插件，它可以轻松将我在网易云上创建的歌单，直接调用到WordPress平台上进行播放。而且插件是通过网易云音乐的接口进行播放，不占用服务器空间和带宽资源。这是我喜欢它最重要的原因之一。

但是Netease-music插件的默认样式和我的博客主题在风格上存在一些差异，让它不能很好的融入博客，总让人觉得它“不是亲生的”。所以决定对它进行了一些小幅度的修改，让它可以融入我的主题风格。

一、修改Netease-music的页面宽度

Netease-music插件的默认宽度是1000px，但是我主题的可视宽度是1110像素，为了视觉上保持一致，首先就要改插件宽度。

1、修改歌单封面图的宽度

找到插件netease-musicbuildcss目录下的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的样式就修改完毕了，虽然是很简单的修改，但是页面开始融入主题的风格了，应该没有人会怀疑它“是不是亲生”的了吧。