部署
安知鱼教程很清楚
此次仅说明几个不太清楚的地方和一些问题的解决方法
安知鱼教程 (点击查看)
效果 (点击查看)
需要引入meting会与原来的aplayer冲突
如果你使用了aplayer的音乐播放器
原来的播放器会失效
需要更改为meting的引入方式
易出错的地方主要出现在js和css文件引入上
易错
第一个引入meting.js
在butterfly
的config
文件最下面(config里有很多不同插件的CDN引入,注意分辨)
正确的设置如下(注意缩进,meting_js
是属于在option
下引入)
CDN 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 # CDN # Don't modify the following settings unless you know how they work # 非必要請不要修改 CDN: # The CDN provider of internal scripts (主題內部 js 的 cdn 配置) # option: local/jsdelivr/unpkg/cdnjs/custom # Dev version can only choose. ( dev版的主題只能設置為 local ) internal_provider: local # The CDN provider of third party scripts (第三方 js 的 cdn 配置) # option: local/jsdelivr/unpkg/cdnjs/custom # when set it to local, you need to install hexo-butterfly-extjs third_party_provider: jsdelivr # Add version number to url, true or false version: false # Custom format # For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file} custom_format: option: pjax: enable: ture exclude: # 对于一些第三方插件,有些并不支持 pjax 。 你可以把网页加入到 exclude 里,这个网页会被 pjax 排除在外。 点击该网页会重新加载网站 #meting_js: https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js # main_css: # main: # utils: # translate: # local_search: # algolia_js: # algolia_search: # instantsearch: # docsearch_js: # docsearch_css: # pjax: # gitalk: # gitalk_css: # blueimp_md5: # valine: # disqusjs: # disqusjs_css: # twikoo: # waline_js: # waline_css: # giscus: # sharejs: # sharejs_css: # mathjax: # katex: # katex_copytex: # mermaid: # canvas_ribbon: # canvas_fluttering_ribbon: # canvas_nest: # lazyload: # instantpage: # typed: # pangu: # fancybox_css: # fancybox: # medium_zoom: # snackbar_css: # snackbar: # activate_power_mode: # fireworks: # click_heart: # ClickShowText: # fontawesome: # flickr_justified_gallery_js: # flickr_justified_gallery_css: # aplayer_css: # aplayer_js: # meting_js: # prismjs_js: # prismjs_lineNumber_js: # prismjs_autoloader: # artalk_js: # artalk_css: # busuanzi: # abcjs_basic_js:
创建页面
创建页面, 新建 source/music/index.md 文件
1 2 3 4 5 6 7 8 9 --- title: 音乐馆 date: 2021-04-24 21:41:30 type: music aplayer: true top_img: false comments: false aside: false ---
按照安知鱼的教程
创建页面,新建themes/butterfly/layout/includes/page/music.pug
,并方便后续可以使用 css 将页面(page)本身的样式给去除。此处可以自行修改server和歌单 id,我的 id 是 8152976493,歌单 id 是对应的服务商的歌单页面路径最后面的那个数字。
1 2 #anMusic-page meting-js(id="8152976493" server="netease" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list")
其他按照安知鱼的设置即可
js/css引入
直接在
下添加
1 2 # 自定义js - <script async data-pjax src="/js/anzhiyu.js"></script>
1 2 # 自定义css - <link rel="stylesheet" href="/css/music.css">
这个js是负责加载页面背景图anzhiyu.js
在博客目录\source\js\anzhiyu.js
下创建
anzhiyu.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 var anzhiyu = { // 音乐节目切换背景 changeMusicBg: function (isChangeBg = true) { if (window.location.pathname != "/music/") { return; } const anMusicBg = document.getElementById("an_music_bg"); if (isChangeBg) { // player listswitch 会进入此处 const musiccover = document.querySelector("#anMusic-page .aplayer-pic"); anMusicBg.style.backgroundImage = musiccover.style.backgroundImage; } else { // 第一次进入,绑定事件,改背景 let timer = setInterval(() => { const musiccover = document.querySelector("#anMusic-page .aplayer-pic"); // 确保player加载完成 console.info(anMusicBg); if (musiccover) { clearInterval(timer); anMusicBg.style.backgroundImage = musiccover.style.backgroundImage; // 绑定事件 anzhiyu.addEventListenerChangeMusicBg(); // 暂停nav的音乐 if ( document.querySelector("#nav-music meting-js").aplayer && !document.querySelector("#nav-music meting-js").aplayer.audio.paused ) { anzhiyu.musicToggle(); } } }, 100); } }, addEventListenerChangeMusicBg: function () { const anMusicPage = document.getElementById("anMusic-page"); const aplayerIconMenu = anMusicPage.querySelector(".aplayer-info .aplayer-time .aplayer-icon-menu"); anMusicPage.querySelector("meting-js").aplayer.on("loadeddata", function () { anzhiyu.changeMusicBg(); console.info("player loadeddata"); }); aplayerIconMenu.addEventListener("click", function () { document.getElementById("menu-mask").style.display = "block"; document.getElementById("menu-mask").style.animation = "0.5s ease 0s 1 normal none running to_show"; }); document.getElementById("menu-mask").addEventListener("click", function () { if (window.location.pathname != "/music/") return; anMusicPage.querySelector(".aplayer-list").classList.remove("aplayer-list-hide"); }); }, }; // 调用 anzhiyu.changeMusicBg(false);
css文件music.css
在博客目录\source\css\music.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 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 #page:has(#anMusic-page) { border: 0; box-shadow: none !important; padding: 0 !important; background: transparent !important; } #an_music_bg { display: none; filter: blur(63px); opacity: 0.6; position: fixed; z-index: -999; background-attachment: local; background-position: center center; background-size: cover; background-repeat: no-repeat; width: 200%; height: 200%; top: -50%; left: -50%; transform: rotate(0deg); } body:has(#anMusic-page) #an_music_bg { display: block; } body:has(#anMusic-page) { background: rgb(13, 13, 13); } #anMusic-page meting-js .aplayer { display: flex; flex-direction: row-reverse; background: rgba(0, 0, 0, 0); border: none; box-shadow: none; } body:has(#anMusic-page) #web_bg { display: none; } body:has(#anMusic-page) #footer, body:has(#anMusic-page) #nav-music { display: none; } #anMusic-page .aplayer-body { width: 40%; height: 75vh; } #anMusic-page ol > li:hover { background: #ffffff33; border-radius: 6px; } #anMusic-page .aplayer-pic { float: none; width: 180px; height: 180px; border-radius: 12px; margin: auto; left: 0; right: 0; } #anMusic-page .aplayer-info { margin: 0 20px 0 20px; border-bottom: none; } #anMusic-page .aplayer-info .aplayer-music { text-align: center; height: auto; margin: 15px; } #anMusic-page .aplayer-info .aplayer-music .aplayer-author, #anMusic-page .aplayer-info .aplayer-music .aplayer-title { font-size: 2rem; font-weight: 700; color: #fff; } #anMusic-page .aplayer-info .aplayer-lrc { height: 800%; margin-top: 80px; mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, #0000, #0000); } #anMusic-page .aplayer-info .aplayer-lrc p { font-size: 14px; color: #fff; } #anMusic-page .aplayer .aplayer-lrc:after, #anMusic-page .aplayer .aplayer-lrc:before { display: none; } /* 控制器 */ #anMusic-page .aplayer-info .aplayer-controller { position: fixed; max-width: 1500px; margin: auto; left: 0; right: 0; bottom: 50px; } #anMusic-page .aplayer-info .aplayer-controller .aplayer-bar-wrap { margin: 0 160px 0 150px; } #anMusic-page .aplayer-info .aplayer-controller .aplayer-played { background: var(--anzhiyu-white) !important; } #anMusic-page .aplayer-info .aplayer-controller .aplayer-thumb { -webkit-transform: none; transform: none; background: #fff !important; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-back, #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-forward, #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-play { display: inline; position: fixed; } #anMusic-page .aplayer-info .aplayer-time { position: absolute; width: 100%; bottom: 21px; height: 0; display: flex; justify-content: flex-end; } #anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner { margin-right: 18px; margin-top: -8px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-back { position: absolute; left: 0; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-play { position: absolute; left: 40px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-forward { position: absolute; left: 80px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon { width: 2rem; height: 2rem; margin-left: 15px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-menu { display: none; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon path { fill: var(--anzhiyu-white); opacity: 0.8; } #anMusic-page .aplayer-list { width: 60%; max-height: none !important; height: 100%; } #anMusic-page ol { max-height: 75vh !important; padding-right: 25px; } #anMusic-page ol > li { border-top: 1px solid transparent; font-size: 14px; } #anMusic-page ol > li.aplayer-list-light { background: rgb(255 255 255 / 20%); border-radius: 6px; } #anMusic-page ol > li span { color: var(--anzhiyu-white); } #anMusic-page ol > li.aplayer-list-light .aplayer-list-cur { display: none; } #anMusic-page ol > li span.aplayer-list-author { opacity: 0.6; } /* 导航栏 */ .page:has(#anMusic-page) #nav { backdrop-filter: none !important; background: 0 0 !important; border-bottom: none !important; } .page:has(#anMusic-page) #page-header.not-top-img #nav a, .page:has(#anMusic-page) #page-header #nav .back-home-button { color: var(--anzhiyu-white); } body:has(#anMusic-page) .s-sticker div { color: var(--anzhiyu-white) !important; } body:has(#anMusic-page) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop { margin-right: 15px; } [data-theme="dark"] .page:has(#anMusic-page) #page-header:before { background-color: transparent; } /* **** 移动端样式 ***** */ @media screen and (max-width: 768px) { body:has(#anMusic-page) #rightside { display: none; } body:has(#anMusic-page) #content-inner, body:has(#anMusic-page) #page { z-index: auto; } /* 歌曲列表 */ #anMusic-page .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; } #anMusic-page .aplayer-list.aplayer-list-hide { bottom: 0% !important; } #anMusic-page ol { max-height: 60vh !important; padding-right: 0px; } #anMusic-page ol > li { display: flex; margin: 0 10px; } #anMusic-page ol > li span { color: var(--font-color); } #anMusic-page ol > li span.aplayer-list-title { width: 30%; } #anMusic-page ol > li.aplayer-list-light { background: #33a673; padding: 5px 20px; border-radius: 10px; } #anMusic-page ol > li.aplayer-list-light span { color: #fff; } #anMusic-page ol > li span.aplayer-list-title { max-width: 55%; width: auto; display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden; -webkit-box-orient: vertical; } #anMusic-page 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; } #anMusic-page ol > li.aplayer-list-light span.aplayer-list-author { right: 15px; } /* 歌词信息 */ #anMusic-page .aplayer-body { width: 100%; position: fixed; margin: auto; left: 0; right: 0; top: 100px; } #anMusic-page .aplayer-info .aplayer-lrc { margin-top: 40px; height: auto; max-height: 200%; min-height: 100%; mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #0000, #0000); } #anMusic-page .aplayer-info .aplayer-lrc p.aplayer-lrc-current { color: #33a673; } /* 控制按键和进度条 */ #anMusic-page .aplayer-info .aplayer-controller { width: 100%; bottom: 100px; } #anMusic-page .aplayer-info .aplayer-controller .aplayer-bar-wrap { margin: 0 30px; } #anMusic-page .aplayer-info .aplayer-time { bottom: -40px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner { position: absolute; width: 100%; margin-right: 0; margin-top: -33px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-dtime { position: absolute; right: 30px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-ptime { position: absolute; left: 35px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-back { margin: auto; right: 110px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-play { margin: auto; right: 0; left: 0; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-forward { margin: auto; left: 110px; right: 0; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-order { position: absolute; left: 22px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-loop { position: absolute; right: 25px; } #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-menu { display: inline; position: absolute; right: 25px; top: -90px; } #anMusic-page .aplayer-volume-bar-wrap { bottom: 0px; right: 7px; } #anMusic-page .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap { left: -66px; } }
问题
出现跨域问题
自建API或者使用其他人的公益API。
安知鱼教程
开放API
在官方的meting api挂掉以后涌现了一大批优秀的公益api
在安知鱼主题中只需在CDN.option.meting_api 填入下面中的任何一个即可
meting_js没办法和原生的aplayer兼容,引入这个Meting2_js后,左下角的贴底全局音乐播放不了了
如果你使用了aplayer的音乐播放器
原来的播放器会失效,Aplayer音乐都不显示了
需要更改为meting的引入方式
meting引入方式
1 - <meting-js id="${id}" server=${server} type="playlist" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list"></meting-js>
见aplayer教程
引入后没有磁吸,而是显示在底部
参数使用和之前一样的,只不过去除前缀data-,应该是fixed模式。
添加fixed模式
背景全黑,无任何显示
打开F12 控制台一直返回null
确保cdn选项中的meting被正确引入
参见上面的meting引入(检查格式,及引入方式)
建议
js/css文件建议保存在本地再用绝对路径添加