博客到现在一直没写什么内容，这应该才是第一篇文章，音乐页面原本也是参照洪哥样式排版的，最近想给音乐播放页换个样式，我自己又比较用QQ音乐多些，于是仿了QQ音乐页面样式。

先看下大概的展示效果吧，感觉还行。

电脑上效果

PC端

手机上效果

移动端

实际展示效果的话可以点击这里去看看，下面开始放我的样式吧。

添加结构

在themes\butterfly\layout\includes\page路径下新建eomusic.pug

1
2
#eoMusic-page
  #eo-music.aplayer.aplayer-withlrc.aplayer-withlist(data-id=歌单id, data-server=平台, data-type='playlist', data-fixed='false', data-autoplay='false')

然后在themes\butterfly\layout\page.pug中引入eomusic.pug

1
2
3
4
5
6
7
8
9
10
11
12
block content
  #page
    if top_img === false
      h1.page-title= page.title
    case page.type
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/mylink.pug
+ 	  //- 音乐页
+     when 'music'
+       include includes/page/eomusic.pug

也可以不用像我上面那样添加，直接在你music页面的.mdmarkdown文档里插入标签，就不用创建pug结构，比如像下面这样。我只是这种页面相关的，习惯用pug。

1
2
3
4
<div id="eoMusic-page">
    <div class="aplayer aplayer-withlrc aplayer-withlist" id="eo-music" data-id="你的歌单id" data-server="音乐平台" data-type="playlist" data-fixed="false" data-autoplay="false">
    </div>
</div>

添加CSS样式

在source\css里新建music.css后复制下面样式粘贴进去，再主题引入就可以

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
#eoMusic-page {
  margin-top: -60px;
}
#eoMusic-page #eo-music {
  display: flex;
  flex-direction: row-reverse;
  background: rgba(0, 0, 0, 0);
  border: none;
  box-shadow: none;
}
.bgCls {
  filter: blur(63px);
  opacity: 0.6;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 信息 */
#eo-music .aplayer-body {
  width: 40%;
  height: 75vh;
}
#eo-music .aplayer-pic {
  float: none;
  width: 180px;
  height: 180px;
  border-radius: 12px;
  margin: auto;
  left: 0;
  right: 0;
}
#eo-music .aplayer-info {
  margin: 0 20px 0 20px;
  border-bottom: none;
}
#eo-music .aplayer-info .aplayer-music{
  text-align: center;
  height: auto;
  margin: 15px;
}
#eo-music .aplayer-info .aplayer-music .aplayer-title, #eo-music .aplayer-info .aplayer-music .aplayer-author{
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
}
#eo-music .aplayer-info .aplayer-lrc{
  height: calc(100vh - 660px);
  margin-top: 80px;
  -webkit-mask-image: linear-gradient(to bottom,#000,#000,#000,#000,#000,#000,#000,#000,#000,#000,#0000,#0000);
}
#eo-music .aplayer-info .aplayer-lrc p{
  font-size: 14px;
  color: #fff;
}
#eo-music .aplayer-info .aplayer-controller{
  position: fixed;
  max-width: 1500px;
  margin: auto;
  left: 0px;
  right: 0px;
  bottom: 50px;
}
#eo-music .aplayer-info .aplayer-controller .aplayer-bar-wrap {
  margin: 0 160px 0px 150px;
}
#eo-music .aplayer-info .aplayer-controller .aplayer-thumb {
  -webkit-transform: none;
  transform: none;
  background: #fff !important;
}
#eo-music .aplayer-info .aplayer-controller .aplayer-played {
  background: #fff !important;
}
/* 控制器 */
#eo-music .aplayer-info .aplayer-time .aplayer-icon-back, #eo-music .aplayer-info .aplayer-time .aplayer-icon-play, #eo-music .aplayer-info .aplayer-time .aplayer-icon-forward {
  display: inline;
  position: fixed;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-menu {
  display: none;
}
#eo-music .aplayer-info .aplayer-time {
  position: absolute;
  width: 100%;
  bottom: 21px;
  height: 0px;
  display: flex;
  justify-content: flex-end;
}
#eo-music .aplayer-info .aplayer-time .aplayer-volume-wrap .aplayer-volume-bar-wrap {
  bottom: 5px;
  margin: auto;
  left: 8px;
  right: 0;
}
#eo-music .aplayer-info .aplayer-time .aplayer-time-inner {
  margin-right: 18px;
  margin-top: -8px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon {
  width: 2rem;
  height: 2rem;
  margin-left: 15px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-back {
  position: absolute;
  left: 0;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-play {
  position: absolute;
  left: 40px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-forward {
  position: absolute;
  left: 80px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon path {
  fill: #fff;
  opacity: .8;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon path:hover {
  fill: #fff;
  opacity: 1;
}

/* 歌曲列表 */
#eo-music .aplayer-list {
  width: 60%;
  max-height: none !important;
  height: 100%;
}
#eo-music ol {
  max-height: 75vh !important;
  /* height: 100%; */
  padding-right: 25px;
}
#eo-music ol::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / 20%);
}
#eo-music ol>li {
  border-top: 1px solid rgb(233 233 233 / 0%);
  font-size: 14px;
}
#eo-music ol>li span {
  color: #fff;
}
#eo-music ol>li.aplayer-list-light {
  background: rgb(255 255 255 / 20%);
  border-radius: 6px;
}
#eo-music ol>li:hover {
  background: rgb(255 255 255 / 20%);
  border-radius: 6px;
}
#eo-music ol>li.aplayer-list-light .aplayer-list-cur {
  display: none;
}
#eo-music ol>li span.aplayer-list-author {
  opacity: .6;
}

/* **** 移动端样式 ***** */
@media screen and (max-width: 768px) {  
  /* 歌曲列表 */
  #eo-music .aplayer-list {
    position: fixed;
    z-index: 1002;
    width: 100%;
    bottom: -76%;
    left: 0;
    background: var(--sidebar-bg);
    height: auto;
    border-radius: 15px 15px 0px 0px;
    padding: 15px 0px;
  }
  #eo-music .aplayer-list.aplayer-list-hide {
    bottom: 0% !important;
  }
  #eo-music ol {
    max-height: 60vh !important;
    padding-right: 0px;
  }
  #eo-music ol>li {
    display: flex;
    margin: 0 10px;
  }
  #eo-music ol>li span {
    color: var(--font-color);
  }
  #eo-music ol>li span.aplayer-list-title {
    width: 30%;
  }
  #eo-music ol>li.aplayer-list-light {
    background: #33a673;
    padding: 5px 20px;
    border-radius: 10px;
  }
  #eo-music ol>li.aplayer-list-light span {
    color: #fff;
  }
  #eo-music ol>li span.aplayer-list-title{
    max-width: 55%;
    width: auto;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
  #eo-music ol>li span.aplayer-list-author {
    position: absolute;
    right: 10px;
    width: auto;
    max-width: 35%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
  #eo-music ol>li.aplayer-list-light span.aplayer-list-author {
    right: 15px;
  }
  /* 歌词信息 */
  #eo-music .aplayer-body {
    width: 100%;

    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 100px;
    /* height: auto; */
  }
  #eo-music .aplayer-info .aplayer-lrc {
    margin-top: 40px;
    /* height: 400%; */
    height: auto;
    max-height: 200%;
    min-height: 100%;
    -webkit-mask-image: linear-gradient(to bottom,#000,#000,#000,#000,#0000,#0000);
  }
  #eo-music .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
    color: #33a673;
  }
  /* 控制按键和进度条 */
  #eo-music .aplayer-info .aplayer-controller {
    bottom: 100px;
  }
  #eo-music .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    margin: 0 30px;
  }
  #eo-music .aplayer-info .aplayer-time {
    bottom: -40px;
  }
  #eo-music .aplayer-info .aplayer-time .aplayer-time-inner {
    position: absolute;
    width: 100%;
    margin-right: 0;
    margin-top: -33px;
  }
  #eo-music .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-dtime {
    position: absolute;
    right: 30px;
  }
  #eo-music .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-ptime {
    position: absolute;
    left: 35px;
  }
  #eo-music .aplayer-info .aplayer-time .aplayer-icon-back {
    margin: auto;
    right: 110px;
  }
  #eo-music .aplayer-info .aplayer-time .aplayer-icon-play {
    margin: auto;
    right: 0;
    left: 0;
  }
  #eo-music .aplayer-info .aplayer-time .aplayer-icon-forward {
    margin: auto;
    left: 110px;
    right: 0;
  }
  #eo-music .aplayer-info .aplayer-time .aplayer-icon-order {
    position: absolute;
    left: 22px;
  }
  #eo-music .aplayer-info .aplayer-time .aplayer-icon-loop {
    position: absolute;
    right: 25px;
  }
  #eo-music .aplayer-info .aplayer-time .aplayer-icon-menu {
    display: inline;
    position: absolute;
    right: 25px;
    top: -90px;
  }
}

到这里其实就已经差不多了，可以刷新看下样式，如果有不一样的地方可以F12大法查看是否因为自己以前的样式覆盖了。

bug更新说明

按照上面老样式粘贴后歌曲选中会出现错位的bug，歌曲不多就不明显，歌曲几十上百就会比较明显影响了。

因为当时样式li标签border的直接none了，这会使盒子大小不对，播放插件的计算偏移大小就会出错不准确，歌曲越多，就会偏移数值出错越大。

前面文章内容里已经更新，可以使用，已经按老样式添加的可以按照下面样式位置修改。

1
2
3
4
#eo-music ol>li {
  border-top: 1px solid rgb(233 233 233 / 0%);
  font-size: 14px;
}

添加JS

和我一样歌曲切换后会自动改变背景的话需要添加，你也可以自己优化下代码，我一般是能跑就行。

在source\js路径下新建music.js然后主题引入，或者丢到一个任意自己的js文件里都可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var urlinfo = window.location.pathname;
var overtime;

qq_musicpage();
function qq_musicpage() {
  if (urlinfo != '/music/') {
    document.querySelector("#web_bg").classList.remove("bgCls");
    document.getElementById('web_bg').style.backgroundImage = 'none';
    document.getElementById('footer').style.display = 'flex';
    document.getElementsByClassName('pace-running')[0].style.background = 'var(--global-bg)';
    document.getElementsByTagName('body')[0].style.background = 'var(--global-bg)';

    clearInterval(overtime);
  }else {
    document.querySelector("#web_bg").classList.add("bgCls");
    document.getElementById('footer').style.display = 'none';
    document.getElementById('content-inner').style.background = 'none';
    document.getElementById('page').style.margin = 'auto';
    document.getElementById('page').style.background = 'rgba(0,0,0,0)';
    document.getElementsByTagName('body')[0].style.background = '#0d0d0d';

    overtime = window.setInterval('setOverTime()', '500');
  }

  document.body.onmousedown = function(event) {
    if (event.button == 0) {
      var targ = event.target;  
      var tname = targ.tagName; 
      var tClassname = targ.classList[1];
      var tidname = targ.id;

      if (urlinfo == '/music/'){
        if (tname == 'svg') {
          var tsvg = targ.parentNode;
          if(tsvg.classList[1] == 'aplayer-icon-menu' || tClassname == 'aplayer-icon-menu') {
            setTimeout(function() {
              document.getElementById('menu-mask').style.display = "block";
              document.getElementById('menu-mask').style.animation = "0.5s ease 0s 1 normal none running to_show";
            }, 100);
          }
        }else if (tname == 'path') {
          var tpath = targ.parentNode;
          var tpath2 = tpath.parentNode;
          if(tpath2.classList[1] == 'aplayer-icon-menu') {
            setTimeout(function() {
              document.getElementById('menu-mask').style.display = "block";
              document.getElementById('menu-mask').style.animation = "0.5s ease 0s 1 normal none running to_show";
            }, 100);
          }
        }

        if (tidname == 'menu-mask') {
          var domHtml = domAplyerList();
          domHtml.classList.remove("aplayer-list-hide");
        }
      }
    }
  }
}
function domAplyerList() {
  var htmldom = document.getElementById('eo-music');
  var htmldom2 = htmldom.childNodes[3];
  return htmldom2;
}
function setOverTime() {
  imgs = document.getElementById('eo-music').getElementsByClassName('aplayer-pic')[0].style.backgroundImage;
  document.getElementById('web_bg').style.backgroundImage = imgs;
}

到这里就和我一样了，喜欢我这个样式的小伙伴可以试试。

最后祝大家新年健康，财源滚滚。🧨🎉🥳