sinzmise-cetastories 2.0.0-1729401485124 → 2.0.0-1730024687183

Sign up to get free protection for your applications and to get access to all the features.
Files changed (221) hide show
  1. package/404/index.html +1 -1
  2. package/about/index.html +1 -1
  3. package/album/index.html +1 -1
  4. package/archives/2021/12/index.html +1 -1
  5. package/archives/2021/index.html +1 -1
  6. package/archives/2022/12/index.html +1 -1
  7. package/archives/2022/index.html +1 -1
  8. package/archives/2023/01/index.html +1 -1
  9. package/archives/2023/02/index.html +1 -1
  10. package/archives/2023/03/index.html +1 -1
  11. package/archives/2023/04/index.html +1 -1
  12. package/archives/2023/07/index.html +1 -1
  13. package/archives/2023/08/index.html +1 -1
  14. package/archives/2023/09/index.html +1 -1
  15. package/archives/2023/10/index.html +1 -1
  16. package/archives/2023/11/index.html +1 -1
  17. package/archives/2023/12/index.html +1 -1
  18. package/archives/2023/index.html +1 -1
  19. package/archives/2023/page/2/index.html +1 -1
  20. package/archives/2023/page/3/index.html +1 -1
  21. package/archives/2024/01/index.html +1 -1
  22. package/archives/2024/02/index.html +1 -1
  23. package/archives/2024/03/index.html +1 -1
  24. package/archives/2024/04/index.html +1 -1
  25. package/archives/2024/05/index.html +1 -1
  26. package/archives/2024/06/index.html +1 -1
  27. package/archives/2024/07/index.html +1 -1
  28. package/archives/2024/08/index.html +1 -1
  29. package/archives/2024/09/index.html +1 -1
  30. package/archives/2024/10/index.html +1 -1
  31. package/archives/2024/index.html +1 -1
  32. package/archives/2024/page/2/index.html +1 -1
  33. package/archives/index.html +1 -1
  34. package/archives/page/2/index.html +1 -1
  35. package/archives/page/3/index.html +1 -1
  36. package/archives/page/4/index.html +1 -1
  37. package/archives/page/5/index.html +1 -0
  38. package/assets/algolia/algoliasearch.js +2 -1
  39. package/assets/algolia/algoliasearchLite.js +2 -1
  40. package/atom.xml +114 -204
  41. package/bbs/bbs.html +1 -1
  42. package/bbs/bbs.js +2 -1
  43. package/bbs/index.html +1 -1
  44. package/categories/index.html +1 -1
  45. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  46. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  47. package/categories//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  48. package/categories//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  49. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  50. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  51. package/categories//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  52. package/charts/index.html +1 -1
  53. package/comments/index.html +1 -1
  54. package/css/custom2.css +2 -1
  55. package/css/first.css +2 -0
  56. package/css/pace/big-counter.css +2 -1
  57. package/css/pace/corner-indicator.css +2 -1
  58. package/css/pace/flash.css +2 -1
  59. package/css/pace/mac-osx.css +2 -1
  60. package/css/pace/pace.css +2 -1
  61. package/css/plane.css +2 -1
  62. package/css/style.css +2 -0
  63. package/css/tags.css +2 -1
  64. package/essay/index.html +1 -1
  65. package/fcircle/index.html +1 -1
  66. package/games +3831 -509
  67. package/index.html +1 -1
  68. package/js/app.js +2 -0
  69. package/js/autoload.js +2 -1
  70. package/js/ceta/fancybox.css +2 -0
  71. package/js/ceta/fancybox.umd.js +2 -0
  72. package/js/ceta/iconfontInkss.js +2 -0
  73. package/js/ceta/lazyload.min.js +1 -0
  74. package/js/ceta/message.css +2 -0
  75. package/js/ceta/message.js +2 -0
  76. package/js/ceta/pjax.min.js +1 -0
  77. package/js/clock.js +2 -1
  78. package/js/kslink.js +2 -1
  79. package/js/newyear.js +2 -1
  80. package/js/plane.js +2 -1
  81. package/js/plugins/aplayer.js +2 -0
  82. package/js/plugins/parallax.js +2 -0
  83. package/js/plugins/rightMenus.js +2 -0
  84. package/js/plugins/tags/contributors.js +2 -0
  85. package/js/plugins/tags/friends.js +2 -0
  86. package/js/plugins/tags/sites.js +2 -0
  87. package/js/search/algolia.js +2 -0
  88. package/js/search/hexo.js +2 -0
  89. package/js/search/meilisearch.js +2 -0
  90. package/js/txmap.js +2 -1
  91. package/link/index.html +1 -1
  92. package/load.html +1 -1
  93. package/maps/assets/algolia/algoliasearch.js.map +1 -0
  94. package/maps/assets/algolia/algoliasearchLite.js.map +1 -0
  95. package/maps/bbs/bbs.js.map +1 -0
  96. package/maps/css/custom2.css.map +1 -0
  97. package/maps/css/first.css.map +1 -0
  98. package/maps/css/pace/big-counter.css.map +1 -0
  99. package/maps/css/pace/corner-indicator.css.map +1 -0
  100. package/maps/css/pace/flash.css.map +1 -0
  101. package/maps/css/pace/mac-osx.css.map +1 -0
  102. package/maps/css/pace/pace.css.map +1 -0
  103. package/maps/css/plane.css.map +1 -0
  104. package/maps/css/style.css.map +1 -0
  105. package/maps/css/tags.css.map +1 -0
  106. package/maps/js/app.js.map +1 -0
  107. package/maps/js/autoload.js.map +1 -0
  108. package/maps/js/ceta/fancybox.css.map +1 -0
  109. package/maps/js/ceta/fancybox.umd.js.map +1 -0
  110. package/maps/js/ceta/iconfontInkss.js.map +1 -0
  111. package/maps/js/ceta/message.css.map +1 -0
  112. package/maps/js/ceta/message.js.map +1 -0
  113. package/maps/js/clock.js.map +1 -0
  114. package/maps/js/kslink.js.map +1 -0
  115. package/maps/js/newyear.js.map +1 -0
  116. package/maps/js/plane.js.map +1 -0
  117. package/maps/js/plugins/aplayer.js.map +1 -0
  118. package/maps/js/plugins/parallax.js.map +1 -0
  119. package/maps/js/plugins/rightMenus.js.map +1 -0
  120. package/maps/js/plugins/tags/contributors.js.map +1 -0
  121. package/maps/js/plugins/tags/friends.js.map +1 -0
  122. package/maps/js/plugins/tags/sites.js.map +1 -0
  123. package/maps/js/search/algolia.js.map +1 -0
  124. package/maps/js/search/hexo.js.map +1 -0
  125. package/maps/js/search/meilisearch.js.map +1 -0
  126. package/maps/js/txmap.js.map +1 -0
  127. package/maps/sw.js.map +1 -0
  128. package/maps/weichuncai/css/style.css.map +1 -0
  129. package/maps/weichuncai/js/common.js.map +1 -0
  130. package/maps/weichuncai/js/jquery.js.map +1 -0
  131. package/maps/weichuncai/wcc-config.js.map +1 -0
  132. package/music/index.html +1 -1
  133. package/package.json +1 -1
  134. package/page/2/index.html +1 -1
  135. package/page/3/index.html +1 -1
  136. package/page/4/index.html +1 -1
  137. package/page/5/index.html +1 -0
  138. package/posts/10021/index.html +5 -1
  139. package/posts/10045/index.html +1 -1
  140. package/posts/10733/index.html +1 -1
  141. package/posts/10996/index.html +5 -1
  142. package/posts/12779/index.html +1 -1
  143. package/posts/13624/index.html +1 -1
  144. package/posts/15688/index.html +1 -1
  145. package/posts/15748/index.html +5 -1
  146. package/posts/15799/index.html +1 -1
  147. package/posts/15842/index.html +5 -1
  148. package/posts/16107/index.html +1 -1
  149. package/posts/18063/index.html +1 -1
  150. package/posts/20412/index.html +1 -1
  151. package/posts/21375/index.html +1 -1
  152. package/posts/22945/index.html +4 -1
  153. package/posts/23021/index.html +1 -1
  154. package/posts/27531/index.html +5 -1
  155. package/posts/28536/index.html +1 -1
  156. package/posts/28733/index.html +1 -1
  157. package/posts/29196/index.html +1 -1
  158. package/posts/38917/index.html +1 -1
  159. package/posts/38964/index.html +1 -1
  160. package/posts/42487/index.html +1 -1
  161. package/posts/42580/index.html +1 -1
  162. package/posts/45875/index.html +1 -1
  163. package/posts/46640/index.html +1 -1
  164. package/posts/48762/index.html +1 -1
  165. package/posts/50710/index.html +1 -1
  166. package/posts/52677/index.html +1 -1
  167. package/posts/53662/index.html +1 -1
  168. package/posts/54386/index.html +1 -1
  169. package/posts/54481/index.html +1 -1
  170. package/posts/54787/index.html +5 -1
  171. package/posts/56467/index.html +1 -1
  172. package/posts/57692/index.html +1 -1
  173. package/posts/58203/index.html +1 -1
  174. package/posts/61417/index.html +1 -1
  175. package/posts/61712/index.html +1 -0
  176. package/posts/646/index.html +1 -1
  177. package/posts/64856/index.html +1 -1
  178. package/posts/64935/index.html +1 -1
  179. package/search.xml +256 -343
  180. package/seas/index.html +1 -1
  181. package/sw.js +2 -1
  182. package/tags/Flash/347/233/270/345/205/263/index.html +1 -1
  183. package/tags/Steam/346/270/270/346/210/217/index.html +1 -1
  184. package/tags/Windows/350/275/257/344/273/266/index.html +1 -1
  185. package/tags/index.html +1 -1
  186. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  187. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  188. package/tags//345/205/266/345/256/203/346/270/270/346/210/217/index.html +1 -1
  189. package/tags//345/212/240/350/275/275/345/212/250/347/224/273/index.html +1 -1
  190. package/tags//346/202/254/346/265/256/345/256/240/347/211/251-/347/234/213/346/235/277/345/250/230/index.html +1 -1
  191. package/tags//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  192. package/tags//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  193. package/tags//347/253/231/347/202/271/345/272/225/351/203/250/351/255/224/346/224/271/index.html +1 -1
  194. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  195. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  196. package/tags//350/207/252/345/273/272/351/203/250/347/275/262/index.html +1 -1
  197. package/tags//351/241/265/351/235/242/351/255/224/346/224/271/index.html +1 -1
  198. package/tags//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  199. package/update/index.html +1 -1
  200. package/weichuncai/css/style.css +2 -1
  201. package/weichuncai/js/common.js +2 -1
  202. package/weichuncai/js/jquery.js +2 -1
  203. package/weichuncai/wcc-config.js +2 -1
  204. package/css/index.css +0 -1
  205. package/css/plugins/bootstrap.min.css +0 -6
  206. package/css/plugins/bootstrap.row.css +0 -1
  207. package/css/plugins/font-awesome.min.css +0 -1
  208. package/failure.ico +0 -0
  209. package/fonts/webfonts/fa-brands-400.woff2 +0 -0
  210. package/fonts/webfonts/fa-regular-400.woff2 +0 -0
  211. package/fonts/webfonts/fa-solid-900.woff2 +0 -0
  212. package/img/404.jpg +0 -0
  213. package/img/avatar.jpg +0 -0
  214. package/img/banner.png +0 -0
  215. package/img/block.jpg +0 -0
  216. package/img/favicon.svg +0 -39
  217. package/js/main.js +0 -1
  218. package/js/plugins/danmu.js +0 -1
  219. package/js/plugins/local_search.js +0 -1
  220. package/js/plugins/typing.js +0 -1
  221. package/serviceworker.js +0 -1
package/posts/22945/index.html CHANGED
@@ -1 +1,4 @@
1
- <!DOCTYPE html><html lang="zh-Hans"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="x5-fullscreen" content="true"><meta name="full-screen" content="yes"><meta name="theme-color" content="#317EFB"><meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport"><meta name="description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:type" content="article"><meta property="og:title" content="butterfly主题添加音乐页面（适配手机）"><meta property="og:url" content="https://blog.sinzmise.top/posts/22945/"><meta property="og:site_name" content="汐塔魔法屋"><meta property="og:description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="article:published_time" content="2023-01-08T22:31:46.000Z"><meta property="article:modified_time" content="2024-10-20T05:17:28.694Z"><meta property="article:author" content="王九弦SZ·Ninty"><meta property="article:tag" content="站点折腾"><meta property="article:tag" content="页面魔改"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://blog.sinzmise.top/img/404.jpg"><title>butterfly主题添加音乐页面（适配手机）</title><link href="/images/siteicon/favicon-16x16.png?v=2.2.3" rel="icon" type="image/png" sizes="16x16"><link href="/images/siteicon/favicon-32x32.png?v=2.2.3" rel="icon" type="image/png" sizes="32x32"><link href="/images/siteicon/apple-touch-icon.png?v=2.2.3" rel="apple-touch-icon" sizes="180x180"><link href="/manifest.json" rel="manifest"><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="stylesheet" href="/css/plugins/bootstrap.row.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0/dist/fancybox.css"><script src="https://jsd.cdn.storisinz.site/npm/jquery/dist/jquery.min.js"></script><link rel="stylesheet" href="/css/plugins/font-awesome.min.css"><script>window.ASYNC_CONFIG={hostname:"blog.sinzmise.top",author:"王九弦SZ·Ninty",root:"/",typed_text:null,theme_version:"2.2.3",theme:{switch:!0,default:"auto"},favicon:{logo:"/images/siteicon/favicon.ico",icon16:"/images/siteicon/favicon-16x16.png",icon32:"/images/siteicon/favicon-32x32.png",apple_touch_icon:"/images/siteicon/apple-touch-icon.png",webmanifest:"/manifest.json",visibilitychange:!0,hidden:"/images/siteicon/favicon.ico",show_text:"那人却在，灯火阑珊处",hide_text:"众里寻他千百度，蓦然回首"},i18n:{placeholder:"搜索文章...",empty:"找不到您查询的内容: ${query}",hits:"找到 ${hits} 条结果",hits_time:"找到 ${hits} 条结果（用时 ${time} 毫秒）",author:"本文作者：",copyright_link:"本文链接：",copyright_license_title:"版权声明：",copyright_license_content:"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。",copy_success:"复制成功",copy_failure:"复制失败",open_read_mode:"进入阅读模式",exit_read_mode:"退出阅读模式",notice_outdate_message:"距离上次更新已经 undefined 天了, 文章内容可能已经过时。",sticky:"置顶",just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},swup:!0,plugin:{flickr_justified_gallery:"https://jsd.cdn.storisinz.site/npm/flickr-justified-gallery@latest/dist/fjGallery.min.js"},icons:{sun:"far fa-sun",moon:"far fa-moon",play:"fas fa-play",email:"far fa-envelope",next:"fas fa-arrow-right",calendar:"far fa-calendar-alt",clock:"far fa-clock",user:"far fa-user",back_top:"fas fa-arrow-up",close:"fas fa-times",search:"fas fa-search",reward:"fas fa-hand-holding-usd",toc_tag:"fas fa-th-list",read:"fas fa-book-reader",arrows:"fas fa-arrows-alt-h",double_arrows:"fas fa-angle-double-down",copy:"fas fa-copy"},icontype:"font",highlight:{plugin:"highlighjs",theme:!0,copy:!0,lang:!0,title:"default",height_limit:!1},toc:{post_title:!0},live_time:{start_time:"12/17/2021 14:53:00",prefix:"这个魔法屋已经经历了 undefined 天的故事"},danmu:{enable:!0,el:".trm-banner"}}</script><script id="async-page-config">window.PAGE_CONFIG={isPost:!0,isHome:!1,postUpdate:"2024-10-20 05:17:28"}</script><link data-swup-theme rel="stylesheet" href="/css/index.css?v=2.2.3" id="trm-switch-style"><script>let defaultMode="auto"!==ASYNC_CONFIG.theme.default?ASYNC_CONFIG.theme.default:window.matchMedia("(prefers-color-scheme: light)").matches?"style-light":"style-dark",catchMode=localStorage.getItem("theme-mode")||defaultMode,type="style-dark"===catchMode?"add":"remove";document.documentElement.classList[type]("dark")</script><link data-swup-theme rel="stylesheet" href="/css/tags.css"><link data-swup-theme rel="stylesheet" href="/css/custom2.css"><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"></head><body><div class="trm-app-frame"><div class="trm-preloader"><div class="trm-holder"><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="trm-mode-swich-animation-frame"><div class="trm-mode-swich-animation"><i class="i-sun"><i class="iconfont far fa-sun"></i></i><div class="trm-horizon"></div><i class="i-moon"><i class="iconfont far fa-moon"></i></i></div></div><div id="trm-dynamic-content" class="trm-swup-animation"><div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0"><header class="trm-top-bar"><div class="container"><div class="trm-left-side"><a href="/" class="trm-logo-frame trm-anima-link"><img alt="logo" src="/images/siteicon/favicon.ico"><div class="trm-logo-text">汐塔<span>魔法屋</span></div></a></div><div class="trm-right-side"><div class="trm-menu"><nav><ul><li class="menu-item-has-children"><a href="#" target="">站点</a><ul><li><a href="/archives/" target="">归档</a></li><li><a href="/categories/" target="">分类</a></li><li><a href="/tags/" target="">标签</a></li></ul></li><li class="menu-item-has-children"><a href="#" target="">友链</a><ul><li><a href="/link/" target="">友人帐</a></li><li><a href="/comments/" target="">留言板</a></li></ul></li><li class="menu-item-has-children"><a href="#" target="">关于</a><ul><li><a href="/games/" target="">游戏库</a></li></ul></li><li class="menu-item-has-children"><a href="https://www.travellings.cn/go.html" target="_blank">开往</a></li></ul></nav></div><div class="trm-mode-switcher-place"><div class="trm-mode-switcher"><i class="iconfont far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"><label class="trm-swich" for="trm-swich"></label><i class="iconfont far fa-moon"></i></div></div><div id="trm-search-btn" class="trm-search-btn"><i class="iconfont fas fa-search"></i></div></div><div class="trm-menu-btn"><span></span></div></div></header><div class="trm-content-start h-entry"><div class="trm-banner"><img style="object-position:top;object-fit:cover" alt="banner" class="trm-banner-cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><div class="trm-banner-content trm-overlay"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-8"><div class="trm-banner-text"><div class="trm-label trm-mb-20">NEWS LETTER</div><h1 class="trm-mb-30 trm-hsmb-font p-name">butterfly主题添加音乐页面（适配手机）</h1><ul class="trm-breadcrumbs trm-label"><li><a href="/" class="trm-anima-link">Home</a></li><li><span>posts</span></li></ul></div><span id="scroll-triger" class="trm-scroll-hint-frame"><div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></span></div></div></div></div></div><div class="container"><div class="row"><div class="trm-page-sidebar col-lg-4 hidden-sm"><div class="trm-main-card-frame trm-sidebar"><div class="trm-main-card h-card"><div class="trm-mc-header"><div class="trm-avatar-frame trm-mb-20"><img alt="Avatar" class="trm-avatar u-photo" src="/img/avatar.png"></div><h5 class="trm-name trm-mb-15 p-name">王九弦SZ·Ninty</h5></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="trm-social"><a href="/atom.xml" title="RSS" rel="me" target="_blank" class="u-url"><i class="iconfont fas fa-rss"></i></a><a href="https://github.com/SinzMise" title="Github" rel="me" target="_blank" class="u-url"><i class="iconfont fab fa-github"></i></a></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><ul class="trm-table trm-mb-20"><li><div class="trm-label">邮件:</div><div class="trm-label trm-label-light u-email">email@sinzmise.top</div></li><li><div class="trm-label">省份:</div><div class="trm-label trm-label-light p-region">广东</div></li><li><div class="trm-label">城市:</div><div class="trm-label trm-label-light p-locality">潮州</div></li></ul><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="text-center"><a href="mailto:email@sinzmise.top" class="trm-btn">联系我<i class="iconfont far fa-envelope"></i></a></div></div></div></div><div class="trm-page-content col-lg-8"><div id="trm-content" class="trm-content"><div class="trm-post-info row hidden-sm"><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-calendar-alt trm-icon"></i><br>01/08</div></div><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-clock trm-icon"></i><br>22:31</div></div><div class="col-sm-4"><div id="post-author" class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-user trm-icon"></i><br><a href="https://blog.sinzmise.top" class="p-author h-card">王九弦SZ·Ninty</a></div></div></div><div class="trm-card"><article id="article-container" class="trm-publication e-content"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><div class="trm-note info"><div class="trm-note-title">INFO</div><p>本博客已经更换主题</p></div><p>没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，<del>但考虑到我不会写样式（虽然我可以自学）</del> 所以我音乐页面用的是<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/3322c8a8.html">Chuckle的方案</a><br><psw>（等会为啥开头这么像<a href="https://www.chuckle.top/article/3322c8a8.html">这篇文章</a>）</psw><br>原本我是想做<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/eb3a4679.html">单页背景透明</a>的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画<br>以下是我之前的音乐页面：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" alt="msedge_x1MaJIbBQg" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-09-59-57-499_com.2sej4yl2vuw0.webp" alt="Screenshot_2023-01-09-09-59-57-499_com" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-10-02-41-554_com.6tcc3lty2uo0.webp" alt="Screenshot_2023-01-09-10-02-41-554_com" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<del>但我懒得适配，于是就有了这个教程</del> ）</p><h1 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h1><div class="trm-tabs" id="教程开始"><ul class="trm-nav-tabs"><li class="trm-tab"><button type="button" data-href="#教程开始-1">1.0</button></li><li class="trm-tab active"><button type="button" data-href="#教程开始-2">2.0</button></li></ul><div class="trm-tab-contents"><div class="trm-tab-item-content" id="教程开始-1"><p></p><div class="trm-note info"><div class="trm-note-title">INFO</div><p>这个教程是我基于<a target="_blank" rel="noopener" href="https://www.php.cn/xiazai/js/6169">https://www.php.cn/xiazai/js/6169</a> 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p><br>&lt;/div&gt;<p></p><p></p><div class="trm-note warning"><div class="trm-note-title">WARNING</div><p>目前博客已经弃用这个方案，改用2.0版本</p><br>&lt;/div&gt;<p></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug，内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">link(rel=&#x27;stylesheet&#x27; href=&#x27;/css/musics.css&#x27;)</span><br><span class="line">.player</span><br><span class="line"> .player__header</span><br><span class="line"> .player__img.player__img--absolute.slider</span><br><span class="line"> button.player__button.player__button--absolute--nw.playlist</span><br><span class="line"> img(src=&#x27;/svg/playlist.svg&#x27;, alt=&#x27;playlist-icon&#x27;)</span><br><span class="line"> button.player__button.player__button--absolute--center.play</span><br><span class="line"> img(src=&#x27;/svg/play.svg&#x27;, alt=&#x27;play-icon&#x27;)</span><br><span class="line"> img(src=&#x27;/svg/pause.svg&#x27;, alt=&#x27;pause-icon&#x27;)</span><br><span class="line"> .slider__content</span><br><span class="line"> each item in theme.musicplayer.musics</span><br><span class="line"> img.img.slider__img(src=item.image, alt=&#x27;cover&#x27;)</span><br><span class="line"> .player__controls</span><br><span class="line"> button.player__button.back</span><br><span class="line"> img.img(src=&#x27;/svg/back.svg&#x27;, alt=&#x27;back-icon&#x27;)</span><br><span class="line"> p.player__context.slider__context</span><br><span class="line"> strong.slider__title</span><br><span class="line"> span.slider__name.player__title</span><br><span class="line"> button.player__button.next</span><br><span class="line"> img.img(src=&#x27;/svg/next.svg&#x27;, alt=&#x27;next-icon&#x27;)</span><br><span class="line"> .progres</span><br><span class="line"> .progres__filled</span><br><span class="line"> ul.player__playlist.list</span><br><span class="line"> each musics in theme.musicplayer.musics</span><br><span class="line"> li.player__song</span><br><span class="line"> img.player__img.img(src=musics.image, alt=&#x27;cover&#x27;)</span><br><span class="line"> p.player__context</span><br><span class="line"> b.player__song-name=musics.name</span><br><span class="line"> span.flex</span><br><span class="line"> span.player__title=musics.author</span><br><span class="line"> span.player__song-time</span><br><span class="line"> audio.audio(src=musics.url)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> p#hitokoto</span><br><span class="line"> a#hitokoto_text(href=&quot;#&quot;,target=&quot;_blank&quot;) :D 获取中...</span><br><span class="line">script(src=&#x27;/js/player.js&#x27;)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch(&#x27;https://v1.hitokoto.cn&#x27;)</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; &#123;</span><br><span class="line"> const hitokoto = document.querySelector(&#x27;#hitokoto_text&#x27;)</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=$&#123;data.uuid&#125;`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + &quot; —— &quot; + data.creator + &quot;「&quot; + data.from + &quot;」&quot;</span><br><span class="line"> &#125;)</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></table></figure></div></details></li><li>在[blogroot]\themes\butterfly\source\css\目录下新建musics.css,内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br></pre></td><td class="code"><pre><span class="line">::root &#123;</span><br><span class="line"> <span class="attr">--parent-height</span> : <span class="number">20em</span> ;</span><br><span class="line"> <span class="attr">--duration</span>: <span class="number">1s</span> ;</span><br><span class="line"> <span class="attr">--duration-text-wrap</span>: <span class="number">12s</span> <span class="number">1.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.82</span>, <span class="number">0.82</span>, <span class="number">1</span>, <span class="number">1.01</span>) ;</span><br><span class="line"> <span class="attr">--cubic-header</span>: <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0.71</span>, <span class="number">0.21</span>, <span class="number">0.3</span>, <span class="number">0.95</span>) ;</span><br><span class="line"> <span class="attr">--cubic-slider</span> : <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0.4</span>, <span class="number">0</span>, <span class="number">0.2</span>, <span class="number">1</span>) ;</span><br><span class="line"> <span class="attr">--cubic-play-list</span> : .<span class="number">35s</span> <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0</span>, <span class="number">0.85</span>, <span class="number">0.11</span>, <span class="number">1.64</span>) ;</span><br><span class="line"> <span class="attr">--cubic-slider-context</span> : <span class="built_in">cubic-bezier</span>(<span class="number">1</span>, -<span class="number">0.01</span>, <span class="number">1</span>, <span class="number">1.01</span>) ; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.img</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: block ;</span><br><span class="line"> <span class="attribute">object-fit</span>: cover ;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.list</span> &#123;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">list-style-type</span>: none ;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flex</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">justify-content</span>: space-between ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.uppercase</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">text-transform</span>: uppercase ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">17.15em</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">1.22em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1.35em</span> ;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column ;</span><br><span class="line"> <span class="attribute">background-color</span>: white ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="built_in">var</span>(--parent-height) ;</span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">0</span> auto ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">1</span> ;</span><br><span class="line"> <span class="attribute">gap</span>: <span class="number">0</span> .<span class="number">4em</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">5.85em</span> ;</span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">align-items</span>: flex-start ;</span><br><span class="line"> <span class="attribute">border-radius</span>: inherit ;</span><br><span class="line"> <span class="attribute">justify-content</span>: flex-end ;</span><br><span class="line"> <span class="attribute">background-color</span>: white ;</span><br><span class="line"> <span class="attribute">padding</span>: .<span class="number">95em</span> <span class="number">0.6em</span> <span class="number">0</span> <span class="number">1.2em</span> ;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">6px</span> <span class="number">1px</span> <span class="number">#0000001f</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: height <span class="built_in">var</span>(--cubic-header), box-shadow <span class="built_in">var</span>(--duration), padding <span class="built_in">var</span>(--duration) ease-in-out ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span><span class="selector-class">.open-header</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">box-shadow</span>: unset ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">3.2em</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">3.2em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1.32em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img--absolute</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">1.4em</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">1.2em</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header), height <span class="built_in">var</span>(--cubic-header), top <span class="built_in">var</span>(--cubic-header), left <span class="built_in">var</span>(--cubic-header);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">14.6em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__content</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-slider);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__img</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">75%</span>) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__name</span>, </span><br><span class="line"><span class="selector-class">.slider__title</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.text-wrap</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: block ;</span><br><span class="line"> <span class="attribute">white-space</span>: pre ;</span><br><span class="line"> <span class="attribute">width</span>: fit-content ;</span><br><span class="line"> <span class="attribute">animation</span>: text-wrap <span class="built_in">var</span>(--duration-text-wrap) infinite ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> text-wrap &#123;</span><br><span class="line"></span><br><span class="line"> <span class="number">75%</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">51.5%</span>, <span class="number">0</span>, <span class="number">0</span>) ;</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="number">100%</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">51.5%</span>, <span class="number">0</span>, <span class="number">0</span>) ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">all</span>: unset ;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">100</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">2.5em</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">2.5em</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>) ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">calc</span>(<span class="built_in">var</span>(--duration) / <span class="number">2</span>) ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span> <span class="selector-class">.playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>) ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-play-list) ;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--nw</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">top</span>: <span class="number">5.5%</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">5.5%</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--center</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">margin</span>: auto ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[alt =<span class="string">&quot;pause-icon&quot;</span>]</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: none ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">77%</span> ;</span><br><span class="line"> <span class="attribute">gap</span>: .<span class="number">5em</span> <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">flex-wrap</span>: wrap ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">will-change</span>: contents ;</span><br><span class="line"> <span class="attribute">align-content</span>: center ;</span><br><span class="line"> <span class="attribute">justify-content</span>: center ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-header) , width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">88%</span> ;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">1.1em</span> , <span class="built_in">calc</span>(<span class="built_in">var</span>(--parent-height) - <span class="number">153%</span>) , <span class="number">0</span>) ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.8</span> ;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column ;</span><br><span class="line"> <span class="attribute">justify-content</span>: center ;</span><br><span class="line"> <span class="attribute">text-transform</span>: capitalize ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">56.28%</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">text-align</span>: center ;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: .<span class="number">2em</span> ;</span><br><span class="line"> <span class="attribute">will-change</span>: contents ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"> <span class="attribute">animation</span>: <span class="built_in">calc</span>(<span class="built_in">var</span>(--duration) / <span class="number">2</span>) <span class="built_in">var</span>(--cubic-slider-context) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> opacity &#123;</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="number">0%</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0</span> ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="number">90%</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">1</span> ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> <span class="selector-class">.slider__context</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">49.48%</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__title</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">7em</span> ;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold ;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#00000086</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">90%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: .<span class="number">25em</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1em</span> ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#e5e7ea</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> <span class="selector-class">.progres</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">98%</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">position</span>: relative ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">border-radius</span>: inherit ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#78adfe</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: .<span class="number">35em</span> ;</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">&quot; &quot;</span> ;</span><br><span class="line"> <span class="attribute">height</span>: .<span class="number">35em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#5781bd</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">overflow</span>: auto ; </span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">1.05em</span> .<span class="number">9em</span> <span class="number">0</span> <span class="number">1.2em</span> ; </span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span>::-webkit-scrollbar &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> &#123;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* gap: 0 .65em ; */</span></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: .<span class="number">5em</span> ;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: .<span class="number">7em</span> ;</span><br><span class="line"> <span class="attribute">border-bottom</span>: .<span class="number">1em</span> solid <span class="number">#d8d8d859</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> <span class="selector-class">.player__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.5</span> ;</span><br><span class="line"> <span class="attribute">margin-left</span>: .<span class="number">65em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-name</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">88em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-time</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">65em</span> ;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold ;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#00000079</span> ; </span><br><span class="line"> <span class="attribute">height</span>: fit-content ;</span><br><span class="line"> <span class="attribute">align-self</span>: flex-end ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.audio</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: none <span class="meta">!important</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.player__song-name</span>,<span class="selector-class">.slider__title</span>&#123;</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#000</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#hitokoto</span>&#123;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div></details></li><li>在[blogroot]\themes\butterfly\source\js\目录下新建player.js,内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Designed by: Mauricio Bucardo</span></span><br><span class="line"><span class="comment">// Original image: https://dribbble.com/shots/6957353-Music-Player-Widget</span></span><br><span class="line"><span class="meta"></span></span><br><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// add elemnts</span></span><br><span class="line"><span class="keyword">const</span> bgBody = [<span class="string">&quot;#e5e7e9&quot;</span>, <span class="string">&quot;#ff4545&quot;</span>, <span class="string">&quot;#f8ded3&quot;</span>, <span class="string">&quot;#ffc382&quot;</span>, <span class="string">&quot;#f5eda6&quot;</span>, <span class="string">&quot;#ffcbdc&quot;</span>, <span class="string">&quot;#dcf3f3&quot;</span>];</span><br><span class="line"><span class="keyword">const</span> body = <span class="variable language_">document</span>.<span class="property">body</span>;</span><br><span class="line"><span class="keyword">const</span> player = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.player&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerHeader = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.player__header&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerControls = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.player__controls&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerPlayList = player.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;.player__song&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerSongs = player.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;.audio&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.play&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> nextButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.next&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> backButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.back&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playlistButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.playlist&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> slider = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContext = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__context&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderName = sliderContext.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__name&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderTitle = sliderContext.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__title&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContent = slider.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__content&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContentLength = playerPlayList.<span class="property">length</span> - <span class="number">1</span>;</span><br><span class="line"><span class="keyword">const</span> sliderWidth = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">let</span> left = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> song = playerSongs[count];</span><br><span class="line"><span class="keyword">let</span> isPlay = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">const</span> pauseIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">&quot;img[alt = &#x27;pause-icon&#x27;]&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">&quot;img[alt = &#x27;play-icon&#x27;]&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> progres = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.progres&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> progresFilled = progres.<span class="title function_">querySelector</span>(<span class="string">&quot;.progres__filled&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> isMove = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// creat functions</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">openPlayer</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> playerHeader.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;open-header&quot;</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;move&quot;</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;open-slider&quot;</span>);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">closePlayer</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> playerHeader.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;open-header&quot;</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;move&quot;</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;open-slider&quot;</span>);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">next</span>(<span class="params"></span>) &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength) &#123;</span><br><span class="line"> count = count;</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> left += sliderWidth;</span><br><span class="line"> left = <span class="title class_">Math</span>.<span class="title function_">min</span>(left, (sliderContentLength) * sliderWidth);</span><br><span class="line"> sliderContent.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">`translate3d(-<span class="subst">$&#123;left&#125;</span>%, 0, 0)`</span>;</span><br><span class="line"> count++;</span><br><span class="line"></span><br><span class="line"> <span class="title function_">changeSliderContext</span>();</span><br><span class="line"> <span class="title function_">changeBgBody</span>();</span><br><span class="line"> <span class="title function_">selectSong</span>();</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">back</span>(<span class="params"></span>) &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == <span class="number">0</span>) &#123;</span><br><span class="line"> count = count</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> left -= sliderWidth;</span><br><span class="line"> left = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, left);</span><br><span class="line"> sliderContent.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">`translate3d(-<span class="subst">$&#123;left&#125;</span>%, 0, 0)`</span>;</span><br><span class="line"> count--;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeSliderContext</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> = <span class="string">&quot;opacity&quot;</span>;</span><br><span class="line"> </span><br><span class="line"> sliderName.<span class="property">textContent</span> = playerPlayList[count].<span class="title function_">querySelector</span>(<span class="string">&quot;.player__title&quot;</span>).<span class="property">textContent</span>;</span><br><span class="line"> sliderTitle.<span class="property">textContent</span> = playerPlayList[count].<span class="title function_">querySelector</span>(<span class="string">&quot;.player__song-name&quot;</span>).<span class="property">textContent</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (sliderName.<span class="property">textContent</span>.<span class="property">length</span> &gt; <span class="number">16</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> textWrap = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;span&quot;</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">&quot;text-wrap&quot;</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderName.<span class="property">textContent</span> + <span class="string">&quot; &quot;</span> + sliderName.<span class="property">textContent</span>; </span><br><span class="line"> sliderName.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> sliderName.<span class="title function_">append</span>(textWrap);</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (sliderTitle.<span class="property">textContent</span>.<span class="property">length</span> &gt;= <span class="number">18</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> textWrap = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;span&quot;</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">&quot;text-wrap&quot;</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderTitle.<span class="property">textContent</span> + <span class="string">&quot; &quot;</span> + sliderTitle.<span class="property">textContent</span>; </span><br><span class="line"> sliderTitle.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> sliderTitle.<span class="title function_">append</span>(textWrap);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeBgBody</span>(<span class="params"></span>) &#123;</span><br><span class="line"> body.<span class="property">style</span>.<span class="property">backgroundColor</span> = bgBody[count];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">selectSong</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> song = playerSongs[count];</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> item <span class="keyword">of</span> playerSongs) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (item != song) &#123;</span><br><span class="line"> item.<span class="title function_">pause</span>();</span><br><span class="line"> item.<span class="property">currentTime</span> = <span class="number">0</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (isPlay) song.<span class="title function_">play</span>();</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">playSong</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (song.<span class="property">paused</span>) &#123;</span><br><span class="line"> song.<span class="title function_">play</span>();</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;none&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line"></span><br><span class="line"> &#125;<span class="keyword">else</span>&#123;</span><br><span class="line"> song.<span class="title function_">pause</span>();</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">progresUpdate</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> progresFilledWidth = (<span class="variable language_">this</span>.<span class="property">currentTime</span> / <span class="variable language_">this</span>.<span class="property">duration</span>) * <span class="number">100</span> + <span class="string">&quot;%&quot;</span>;</span><br><span class="line"> progresFilled.<span class="property">style</span>.<span class="property">width</span> = progresFilledWidth;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">duration</span> == <span class="variable language_">this</span>.<span class="property">currentTime</span>) &#123;</span><br><span class="line"> <span class="title function_">next</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength &amp;&amp; song.<span class="property">currentTime</span> == song.<span class="property">duration</span>) &#123;</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">scurb</span>(<span class="params">e</span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// If we use e.offsetX, we have trouble setting the song time, when the mousemove is running</span></span><br><span class="line"> <span class="keyword">const</span> currentTime = ( (e.<span class="property">clientX</span> - progres.<span class="title function_">getBoundingClientRect</span>().<span class="property">left</span>) / progres.<span class="property">offsetWidth</span> ) * song.<span class="property">duration</span>;</span><br><span class="line"> song.<span class="property">currentTime</span> = currentTime;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">durationSongs</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> min = <span class="built_in">parseInt</span>(<span class="variable language_">this</span>.<span class="property">duration</span> / <span class="number">60</span>);</span><br><span class="line"> <span class="keyword">if</span> (min &lt; <span class="number">10</span>) min = <span class="string">&quot;0&quot;</span> + min;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> sec = <span class="built_in">parseInt</span>(<span class="variable language_">this</span>.<span class="property">duration</span> % <span class="number">60</span>);</span><br><span class="line"> <span class="keyword">if</span> (sec &lt; <span class="number">10</span>) sec = <span class="string">&quot;0&quot;</span> + sec;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> playerSongTime = <span class="string">`<span class="subst">$&#123;min&#125;</span>:<span class="subst">$&#123;sec&#125;</span>`</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">closest</span>(<span class="string">&quot;.player__song&quot;</span>).<span class="title function_">querySelector</span>(<span class="string">&quot;.player__song-time&quot;</span>).<span class="title function_">append</span>(playerSongTime);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title function_">changeSliderContext</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// add events</span></span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, openPlayer);</span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">&quot;animationend&quot;</span>, <span class="function">() =&gt;</span> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> =<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">playlistButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, closePlayer);</span><br><span class="line"></span><br><span class="line">nextButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, next);</span><br><span class="line"></span><br><span class="line">backButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">back</span>();</span><br><span class="line"> <span class="title function_">changeSliderContext</span>();</span><br><span class="line"> <span class="title function_">changeBgBody</span>();</span><br><span class="line"> <span class="title function_">selectSong</span>();</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">playButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> isPlay = <span class="literal">true</span>;</span><br><span class="line"> <span class="title function_">playSong</span>();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">playerSongs.<span class="title function_">forEach</span>(<span class="function"><span class="params">song</span> =&gt;</span> &#123;</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">&quot;loadeddata&quot;</span> , durationSongs);</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">&quot;timeupdate&quot;</span> , progresUpdate);</span><br><span class="line"> </span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">progres.<span class="title function_">addEventListener</span>(<span class="string">&quot;mousedown&quot;</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">scurb</span>(e);</span><br><span class="line"> isMove = <span class="literal">true</span>;</span><br><span class="line"> song.<span class="property">muted</span> = <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;mousemove&quot;</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> isMove &amp;&amp; <span class="title function_">scurb</span>(e));</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;mouseup&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> isMove = <span class="literal">false</span></span><br><span class="line"> song.<span class="property">muted</span> = <span class="literal">false</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">ondragstart</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></div></details></li><li>编辑[blogroot]\themes\butterfly\layout\page.pug<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"> case page.type</span><br><span class="line"> when &#x27;tags&#x27;</span><br><span class="line"> include includes/page/tags.pug</span><br><span class="line"> when &#x27;link&#x27;</span><br><span class="line"> include includes/page/flink.pug</span><br><span class="line"> when &#x27;bb&#x27;</span><br><span class="line"> include includes/page/bb.pug</span><br><span class="line"> when &#x27;categories&#x27;</span><br><span class="line"> include includes/page/categories.pug</span><br><span class="line"><span class="addition">+ when &#x27;music&#x27;</span></span><br><span class="line"><span class="addition">+ include includes/page/music.pug</span></span><br><span class="line"> default</span><br><span class="line"> include includes/page/default-page.pug</span><br></pre></td></tr></table></figure></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">musicplayer:</span></span><br><span class="line"> <span class="attr">hitokoto:</span> <span class="literal">true</span> <span class="comment"># 一言</span></span><br><span class="line"> <span class="attr">musics:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Eutopia&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yoohsic Roomz&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29129889.mp3&#x27;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Everything&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yinyues&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29544794.mp3&#x27;</span></span><br><span class="line"><span class="comment"># - name: &#x27;歌曲名字&#x27;</span></span><br><span class="line"><span class="comment"># author: &#x27;歌曲作者&#x27;</span></span><br><span class="line"><span class="comment"># image: &#x27;歌曲图片&#x27;</span></span><br><span class="line"><span class="comment"># url: &#x27;歌曲链接&#x27;</span></span><br></pre></td></tr></table></figure></li><li>将svg.7z压缩包里的五个文件放在[blogroot]\themes\butterfly\source\svg 里面<div class="btns rounded grid5"><a class="button" target="_blank" rel="noopener" href="https://sinz.lanzouw.com/iFMmG0kjkuvg" title="（密码：gt97）"><i class="fas fa-download"></i> （密码：gt97）</a></div></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">type: &#x27;music&#x27;</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure></li></ol></div><div class="trm-tab-item-content active" id="教程开始-2"><p><a href="/music/old/">2.0效果预览</a></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug（有搞1.0的话直接把music.pug里面的内容全都替换成下面的内容），内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">link(</span><br><span class="line"> href=&quot;/assets/css/tplayer.css&quot;</span><br><span class="line"> rel=&quot;stylesheet&quot;</span><br><span class="line"> type=&quot;text/css&quot;</span><br><span class="line">)</span><br><span class="line">link(</span><br><span class="line"> href=&quot;/assets/plugins/FontAwesome4.1/css/font-awesome.min.css&quot;</span><br><span class="line"> rel=&quot;stylesheet&quot;</span><br><span class="line"> type=&quot;text/css&quot;</span><br><span class="line">)</span><br><span class="line">script(src=&quot;/assets/js/jquery.js&quot;)</span><br><span class="line">script(src=&quot;/assets/js/jquery-ui.js&quot;)</span><br><span class="line">script(src=&quot;/assets/js/tPlayer.js&quot;)</span><br><span class="line">#t_wrapper</span><br><span class="line"> #t_cover</span><br><span class="line"> img(src=&quot;/assets/images/logo.png&quot;)</span><br><span class="line"> #t_top</span><br><span class="line"> #t_title_info</span><br><span class="line"> span.artist</span><br><span class="line"> span.title</span><br><span class="line"> #t_middle</span><br><span class="line"> #play</span><br><span class="line"> #pause.hidden</span><br><span class="line"> #t_progress.ui-corner-all.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content</span><br><span class="line"> #trackInfo</span><br><span class="line"> #error</span><br><span class="line"> #current 0:00</span><br><span class="line"> #duration 0:00</span><br><span class="line"> .ui-corner-all.ui-slider-range.ui-slider-range-min.ui-widget-header(style=&quot;width: 0%;&quot;)</span><br><span class="line"> span.ui-corner-all.ui-slider-handle.ui-state-default(style=&quot;left: 0%;&quot; tabindex=&quot;0&quot;)</span><br><span class="line"> span#prev</span><br><span class="line"> span#next</span><br><span class="line"> #t_bottom</span><br><span class="line"> #range</span><br><span class="line"> #val</span><br><span class="line"> #vol</span><br><span class="line"> #rangeVal</span><br><span class="line"> #t_pls_show.noselectpls</span><br><span class="line">#playlist</span><br><span class="line"> ul</span><br><span class="line"> each musics in theme.musicplayer.musics</span><br><span class="line"> li(</span><br><span class="line"> t_artist=musics.author</span><br><span class="line"> t_cover=musics.image</span><br><span class="line"> t_name=musics.name</span><br><span class="line"> )</span><br><span class="line"> a(href=&quot;#&quot;)=musics.name + &#x27; - &#x27; + musics.author</span><br><span class="line"> audio(preload=&quot;none&quot; src=musics.url type=&quot;audio/mp3&quot;)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> p#hitokoto</span><br><span class="line"> a#hitokoto_text(href=&quot;#&quot;,target=&quot;_blank&quot;,style=&quot;text-align:center;color: #fff;&quot;) :D 获取中...</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch(&#x27;https://v1.hitokoto.cn&#x27;)</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; &#123;</span><br><span class="line"> const hitokoto = document.querySelector(&#x27;#hitokoto_text&#x27;)</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=$&#123;data.uuid&#125;`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + &quot; —— &quot; + data.creator + &quot;「&quot; + data.from + &quot;」&quot;</span><br><span class="line"> &#125;)</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></table></figure></div></details></li><li>将下面压缩包内五个文件夹全都解压在[blogroot]\themes\butterfly\source\assets 文件夹里面<div class="btns rounded grid5"><a class="button" target="_blank" rel="noopener" href="https://sinz.lanzouw.com/iUJTx0krafpi" title="（密码：3r5i）"><i class="fas fa-download"></i> （密码：3r5i）</a></div><div class="trm-note info"><div class="trm-note-title">INFO</div><p>1.0想升级成2.0的，下面的步骤可以不用做</p></div></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">musicplayer:</span></span><br><span class="line"> <span class="attr">hitokoto:</span> <span class="literal">true</span> <span class="comment"># 一言</span></span><br><span class="line"> <span class="attr">musics:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Eutopia&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yoohsic Roomz&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29129889.mp3&#x27;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Everything&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yinyues&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29544794.mp3&#x27;</span></span><br><span class="line"><span class="comment"># - name: &#x27;歌曲名字&#x27;</span></span><br><span class="line"><span class="comment"># author: &#x27;歌曲作者&#x27;</span></span><br><span class="line"><span class="comment"># image: &#x27;歌曲图片&#x27;</span></span><br><span class="line"><span class="comment"># url: &#x27;歌曲链接&#x27;</span></span><br></pre></td></tr></table></figure></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">type: &#x27;music&#x27;</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure></li></ol></div></div></div><h1 id="TO-DO"><a href="#TO-DO" class="headerlink" title="TO DO"></a>TO DO</h1><div class="checkbox checked"><input type="checkbox" checked><p>播放列表</p></div><div class="checkbox checked"><input type="checkbox" checked><p>适配手机端</p></div><div class="checkbox"><input type="checkbox"><p>npm插件化<psw>（Akilar行为）</psw></p></div></div></div></article></div><div class="trm-post-next-prev row"><div class="col-lg-12"><h5 class="trm-title-with-divider">其他文章<span data-number="02"></span></h5></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/posts/38964/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></div><h5><a href="/posts/38964/" class="trm-anima-link">小康大佬的说说方案 ———— ispeak搭建教程</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/01/13</li><li>21:01</li><li>5.6k</li><li>29</li></ul></div></div></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/posts/23021/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230104/Goodbye2022.21ppwx94kqf4.webp"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/categories/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/">个人小记</a></div><h5><a href="/posts/23021/" class="trm-anima-link">再见2022，你好2023</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>22/12/31</li><li>14:53</li><li>108</li><li>1</li></ul></div></div></div></div><div class="trm-card trm-scroll-animation comment-container"><div id="Twikoo-warp"><div id="tcomment"></div><script src="https://jsd.cdn.storisinz.site/npm/twikoo/dist/twikoo.all.min.js" data-swup-reload-script data-reset="true"></script><script data-swup-reload-script>twikoo.init({enable:!1,envId:"https://tk.pl.blog.sinzmise.top/",el:"#tcomment"})</script></div><script data-swup-reload-script>function hidecomment(){document.getElementById("Twikoo-warp").style.display="none"}function Twikooset(){hidecomment(),document.getElementById("Twikoo-warp").style.display="block"}hidecomment(),document.getElementById("Twikoo-warp").style.display="block"</script></div><div class="trm-divider footer-divider"></div><footer class="trm-footer-card trm-scroll-animation"><div class="trm-footer-item"><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a> An&nbsp;<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a>&nbsp;🕸💍 <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a></div><div class="trm-footer-item"><span>© 2021 - 2024</span><span class="footer-separator" data-separator=" · "></span> <span class="trm-accent-color">王九弦SZ·Ninty</span></div><div class="trm-footer-item"><span>由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 v7.3.0</span><span class="footer-separator" data-separator=" | "></span> <span>主题 - <a rel="noopener" href="https://github.com/MaLuns/hexo-theme-async" target="_blank">Async</a> v2.2.3</span></div><div class="trm-footer-item blog-run-long"></div><div class="trm-footer-item"><p><a href="https://icp.gov.moe/?keyword=20231033" target="_blank">萌ICP备20231033号</a>&nbsp;| <a target="_blank" href="https://beian.miit.cn.com/gov/search.php?query=blog.sinzmise.top" title="MIIT备20240818号">MIIT备20240818号</a>&nbsp;| <a target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/" title="官码2024000155号"><img src="https://style.wmou.com/images/guanma.png" alt="官码" width="9">官码2024000155号</a></p><p><span>我加入的：</span> <a href="https://zhblogs.ohyee.cc/" target="_blank">中文博客列表</a>&nbsp;| <a href="https://storeweb.cn/member/o/1585" target="_blank">个站商店</a>&nbsp;| <a href="https://bf.zzxworld.com/s/995" target="_blank">BlogFinder</a>&nbsp;| <a href="https://sites.link/site-info?siteType=life&siteId=64cb373190e35300a8eec654" target="_blank">站点聚合平台</a>&nbsp;| <a href="https://boke.lu" target="_blank">博客录</a>&nbsp;| <a href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/" target="_blank">RssBlog</a>&nbsp;| <a href="https://blogscn.fun" target="_blank">笔墨迹</a>&nbsp;| <a href="https://forever.dreamerhe.cn/" target="_blank">梦境列车</a>&nbsp;| <a href="https://firewood.news/" target="_blank">积薪</a>&nbsp;| <a href="https://daohang.lusongsong.com/" target="_blank">博客大全</a></p></div></footer></div></div></div></div></div><div class="trm-fixed-container"><div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()"><i class="iconfont fas fa-book-reader"></i></div><div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部"><i class="iconfont fas fa-arrow-up"></i></div></div></div></div></div><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div></div><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@docsearch/css/dist/style.min.css"><script src="https://jsd.cdn.storisinz.site/npm/@docsearch/js/dist/umd/index.min.js"></script><script>(()=>{docsearch({appId:"QAS05YI2PH",apiKey:"67ffd4c9fa1234148ec4f8b27dfdb2a7",indexName:"sinzmise",container:"#docsearch"});const e=()=>{document.querySelector(".DocSearch-Button").click()},c=()=>{document.querySelector("#trm-search-btn").addEventListener("click",e)};c(),window.addEventListener("pjax:complete",c)})()</script><script src="https://jsd.cdn.storisinz.site/npm/swup@2.0.19/dist/swup.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script><script src="https://jsd.cdn.storisinz.site/npm/axios/dist/axios.min.js"></script><script src="/js/plugins/danmu.js?v=2.2.3"></script><link rel="stylesheet" href="/weichuncai/css/style.css"><script data-swup-reload-script src="/weichuncai/js/common.js"></script><script data-swup-reload-script src="/weichuncai/wcc-config.js"></script><script>"serviceWorker"in navigator?navigator.serviceWorker.register("/sw.js").then((function(){navigator.serviceWorker.controller?console.log("Assets cached by the controlling service worker."):console.log("Please reload this page to allow the service worker to handle network operations.")})).catch((function(e){console.log("ERROR: "+e)})):console.log("Service workers are not supported in the current browser.")</script><script id="async-script" src="/js/main.js?v=2.2.3"></script><script data-pjax src="https://jsd.cdn.storisinz.site/npm/oh-my-live2d"></script><script>const oml2d=OML2D.loadOml2d({menus:{items:t=>[t[0],t[2],t[3]]},mobileDisplay:!1,models:[{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_6/dujiaoshou_6.model3.json",mobilePosition:[-10,23],mobileScale:.1,mobileStageStyle:{width:180,height:166},motionPreloadStrategy:"IDLE",position:[-120,-30],scale:.06,stageStyle:{width:250,height:400}},{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_4/dujiaoshou_4.model3.json",scale:.06,position:[-50,-25],stageStyle:{width:250,height:300},mobileScale:.08,mobilePosition:[0,0],mobileStageStyle:{width:180}}],parentElement:document.body,primaryColor:"var(--primary)",sayHello:!1,tips:{style:{width:230,height:120,left:"calc(50% + 6px)",top:"-100px"},mobileStyle:{width:180,height:80,left:"calc(50% - 30px)",top:"-100px"},idleTips:{interval:15e3,message:function(){return axios.get("https://v1.hitokoto.cn?c=i").then((function(t){return t.data.hitokoto})).catch((function(t){console.error(t)}))}}}})</script></body></html>
1
+ <!DOCTYPE html><html lang="zh-CN"><head hexo-theme="https://github.com/volantis-x/hexo-theme-volantis/#6.0.0-alpha.0"><meta name="generator" content="Hexo 7.3.0"><meta charset="utf-8"><link rel="canonical" href="https://blog.sinzmise.top/posts/22945/"><meta name="renderer" content="webkit"><meta name="force-rendering" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="HandheldFriendly" content="True"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><link rel="preload" href="/css/style.css" as="style"><link rel="preload" href="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/fonts/VarelaRound/VarelaRound-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous"><link rel="preload" href="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"><title>butterfly主题添加音乐页面（适配手机） - 汐塔魔法屋</title><meta name="keywords" content="站点折腾,页面魔改,null"><meta desc name="description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码 - 王九弦SZ·Ninty - 汐塔魔法屋"><meta property="og:type" content="article"><meta property="og:title" content="butterfly主题添加音乐页面（适配手机）"><meta property="og:url" content="https://blog.sinzmise.top/posts/22945/"><meta property="og:site_name" content="汐塔魔法屋"><meta property="og:description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"><meta property="article:published_time" content="2023-01-08T22:31:46.000Z"><meta property="article:modified_time" content="2024-10-27T10:23:58.814Z"><meta property="article:author" content="王九弦SZ·Ninty"><meta property="article:tag" content="站点折腾"><meta property="article:tag" content="页面魔改"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"><style>#safearea{display:none}.fa-duotone.red,.fa-light.red,.fa-regular.red,.fa-solid.red,.fa-thin.red,.fa.red,.fad.red,.fal.red,.far.red,.fas.red,.iziToast>.iziToast-body .iziToast-icon.red{color:#f44336}.fa-duotone.pink,.fa-light.pink,.fa-regular.pink,.fa-solid.pink,.fa-thin.pink,.fa.pink,.fad.pink,.fal.pink,.far.pink,.fas.pink,.iziToast>.iziToast-body .iziToast-icon.pink{color:#e91e63}.fa-duotone.purple,.fa-light.purple,.fa-regular.purple,.fa-solid.purple,.fa-thin.purple,.fa.purple,.fad.purple,.fal.purple,.far.purple,.fas.purple,.iziToast>.iziToast-body .iziToast-icon.purple{color:#9c27b0}.fa-duotone.indigo,.fa-light.indigo,.fa-regular.indigo,.fa-solid.indigo,.fa-thin.indigo,.fa.indigo,.fad.indigo,.fal.indigo,.far.indigo,.fas.indigo,.iziToast>.iziToast-body .iziToast-icon.indigo{color:#3f51b5}.fa-duotone.light-blue,.fa-light.light-blue,.fa-regular.light-blue,.fa-solid.light-blue,.fa-thin.light-blue,.fa.light-blue,.fad.light-blue,.fal.light-blue,.far.light-blue,.fas.light-blue,.iziToast>.iziToast-body .iziToast-icon.light-blue{color:#4ba7ee}.fa-duotone.deep-blue,.fa-light.deep-blue,.fa-regular.deep-blue,.fa-solid.deep-blue,.fa-thin.deep-blue,.fa.deep-blue,.fad.deep-blue,.fal.deep-blue,.far.deep-blue,.fas.deep-blue,.iziToast>.iziToast-body .iziToast-icon.deep-blue{color:#3367d6}.fa-duotone.teal,.fa-light.teal,.fa-regular.teal,.fa-solid.teal,.fa-thin.teal,.fa.teal,.fad.teal,.fal.teal,.far.teal,.fas.teal,.iziToast>.iziToast-body .iziToast-icon.teal{color:#009688}.fa-duotone.light-green,.fa-light.light-green,.fa-regular.light-green,.fa-solid.light-green,.fa-thin.light-green,.fa.light-green,.fad.light-green,.fal.light-green,.far.light-green,.fas.light-green,.iziToast>.iziToast-body .iziToast-icon.light-green{color:#8bc34a}.fa-duotone.orange,.fa-light.orange,.fa-regular.orange,.fa-solid.orange,.fa-thin.orange,.fa.orange,.fad.orange,.fal.orange,.far.orange,.fas.orange,.iziToast>.iziToast-body .iziToast-icon.orange{color:#ff9800}.fa-duotone.deep-orange,.fa-light.deep-orange,.fa-regular.deep-orange,.fa-solid.deep-orange,.fa-thin.deep-orange,.fa.deep-orange,.fad.deep-orange,.fal.deep-orange,.far.deep-orange,.fas.deep-orange,.iziToast>.iziToast-body .iziToast-icon.deep-orange{color:#ff5722}.fa-duotone.brown,.fa-light.brown,.fa-regular.brown,.fa-solid.brown,.fa-thin.brown,.fa.brown,.fad.brown,.fal.brown,.far.brown,.fas.brown,.iziToast>.iziToast-body .iziToast-icon.brown{color:#795548}.fa-duotone.blue-grey,.fa-light.blue-grey,.fa-regular.blue-grey,.fa-solid.blue-grey,.fa-thin.blue-grey,.fa.blue-grey,.fad.blue-grey,.fal.blue-grey,.far.blue-grey,.fas.blue-grey,.iziToast>.iziToast-body .iziToast-icon.blue-grey{color:#607d8b}.fa-duotone.yellow,.fa-light.yellow,.fa-regular.yellow,.fa-solid.yellow,.fa-thin.yellow,.fa.yellow,.fad.yellow,.fal.yellow,.far.yellow,.fas.yellow,.iziToast>.iziToast-body .iziToast-icon.yellow{color:#fcec60}.fa-duotone.TURQUOISE,.fa-light.TURQUOISE,.fa-regular.TURQUOISE,.fa-solid.TURQUOISE,.fa-thin.TURQUOISE,.fa.TURQUOISE,.fad.TURQUOISE,.fal.TURQUOISE,.far.TURQUOISE,.fas.TURQUOISE,.iziToast>.iziToast-body .iziToast-icon.TURQUOISE{color:#1abc9c}.fa-duotone.EMERALD,.fa-light.EMERALD,.fa-regular.EMERALD,.fa-solid.EMERALD,.fa-thin.EMERALD,.fa.EMERALD,.fad.EMERALD,.fal.EMERALD,.far.EMERALD,.fas.EMERALD,.iziToast>.iziToast-body .iziToast-icon.EMERALD{color:#2ecc71}.fa-duotone.PETERRIVE,.fa-light.PETERRIVE,.fa-regular.PETERRIVE,.fa-solid.PETERRIVE,.fa-thin.PETERRIVE,.fa.PETERRIVE,.fad.PETERRIVE,.fal.PETERRIVE,.far.PETERRIVE,.fas.PETERRIVE,.iziToast>.iziToast-body .iziToast-icon.PETERRIVE{color:#3498db}.fa-duotone.AMETHYST,.fa-light.AMETHYST,.fa-regular.AMETHYST,.fa-solid.AMETHYST,.fa-thin.AMETHYST,.fa.AMETHYST,.fad.AMETHYST,.fal.AMETHYST,.far.AMETHYST,.fas.AMETHYST,.iziToast>.iziToast-body .iziToast-icon.AMETHYST{color:#9b59b6}.fa-duotone.WETASPHALT,.fa-light.WETASPHALT,.fa-regular.WETASPHALT,.fa-solid.WETASPHALT,.fa-thin.WETASPHALT,.fa.WETASPHALT,.fad.WETASPHALT,.fal.WETASPHALT,.far.WETASPHALT,.fas.WETASPHALT,.iziToast>.iziToast-body .iziToast-icon.WETASPHALT{color:#34495e}.fa-duotone.GREENSEA,.fa-light.GREENSEA,.fa-regular.GREENSEA,.fa-solid.GREENSEA,.fa-thin.GREENSEA,.fa.GREENSEA,.fad.GREENSEA,.fal.GREENSEA,.far.GREENSEA,.fas.GREENSEA,.iziToast>.iziToast-body .iziToast-icon.GREENSEA{color:#16a085}.fa-duotone.NEPHRITIS,.fa-light.NEPHRITIS,.fa-regular.NEPHRITIS,.fa-solid.NEPHRITIS,.fa-thin.NEPHRITIS,.fa.NEPHRITIS,.fad.NEPHRITIS,.fal.NEPHRITIS,.far.NEPHRITIS,.fas.NEPHRITIS,.iziToast>.iziToast-body .iziToast-icon.NEPHRITIS{color:#27ae60}.fa-duotone.BELIZEHOLE,.fa-light.BELIZEHOLE,.fa-regular.BELIZEHOLE,.fa-solid.BELIZEHOLE,.fa-thin.BELIZEHOLE,.fa.BELIZEHOLE,.fad.BELIZEHOLE,.fal.BELIZEHOLE,.far.BELIZEHOLE,.fas.BELIZEHOLE,.iziToast>.iziToast-body .iziToast-icon.BELIZEHOLE{color:#2980b9}.fa-duotone.WISTERIA,.fa-light.WISTERIA,.fa-regular.WISTERIA,.fa-solid.WISTERIA,.fa-thin.WISTERIA,.fa.WISTERIA,.fad.WISTERIA,.fal.WISTERIA,.far.WISTERIA,.fas.WISTERIA,.iziToast>.iziToast-body .iziToast-icon.WISTERIA{color:#8e44ad}.fa-duotone.MIDNIGHTBLUE,.fa-light.MIDNIGHTBLUE,.fa-regular.MIDNIGHTBLUE,.fa-solid.MIDNIGHTBLUE,.fa-thin.MIDNIGHTBLUE,.fa.MIDNIGHTBLUE,.fad.MIDNIGHTBLUE,.fal.MIDNIGHTBLUE,.far.MIDNIGHTBLUE,.fas.MIDNIGHTBLUE,.iziToast>.iziToast-body .iziToast-icon.MIDNIGHTBLUE{color:#2c3e50}.fa-duotone.SUNFLOWER,.fa-light.SUNFLOWER,.fa-regular.SUNFLOWER,.fa-solid.SUNFLOWER,.fa-thin.SUNFLOWER,.fa.SUNFLOWER,.fad.SUNFLOWER,.fal.SUNFLOWER,.far.SUNFLOWER,.fas.SUNFLOWER,.iziToast>.iziToast-body .iziToast-icon.SUNFLOWER{color:#f1c40f}.fa-duotone.CARROT,.fa-light.CARROT,.fa-regular.CARROT,.fa-solid.CARROT,.fa-thin.CARROT,.fa.CARROT,.fad.CARROT,.fal.CARROT,.far.CARROT,.fas.CARROT,.iziToast>.iziToast-body .iziToast-icon.CARROT{color:#e67e22}.fa-duotone.ALIZARIN,.fa-light.ALIZARIN,.fa-regular.ALIZARIN,.fa-solid.ALIZARIN,.fa-thin.ALIZARIN,.fa.ALIZARIN,.fad.ALIZARIN,.fal.ALIZARIN,.far.ALIZARIN,.fas.ALIZARIN,.iziToast>.iziToast-body .iziToast-icon.ALIZARIN{color:#e74c3c}.fa-duotone.CLOUDS,.fa-light.CLOUDS,.fa-regular.CLOUDS,.fa-solid.CLOUDS,.fa-thin.CLOUDS,.fa.CLOUDS,.fad.CLOUDS,.fal.CLOUDS,.far.CLOUDS,.fas.CLOUDS,.iziToast>.iziToast-body .iziToast-icon.CLOUDS{color:#ecf0f1}.fa-duotone.CONCRETE,.fa-light.CONCRETE,.fa-regular.CONCRETE,.fa-solid.CONCRETE,.fa-thin.CONCRETE,.fa.CONCRETE,.fad.CONCRETE,.fal.CONCRETE,.far.CONCRETE,.fas.CONCRETE,.iziToast>.iziToast-body .iziToast-icon.CONCRETE{color:#95a5a6}.fa-duotone.ORANGE,.fa-light.ORANGE,.fa-regular.ORANGE,.fa-solid.ORANGE,.fa-thin.ORANGE,.fa.ORANGE,.fad.ORANGE,.fal.ORANGE,.far.ORANGE,.fas.ORANGE,.iziToast>.iziToast-body .iziToast-icon.ORANGE{color:#f39c12}.fa-duotone.PUMPKIN,.fa-light.PUMPKIN,.fa-regular.PUMPKIN,.fa-solid.PUMPKIN,.fa-thin.PUMPKIN,.fa.PUMPKIN,.fad.PUMPKIN,.fal.PUMPKIN,.far.PUMPKIN,.fas.PUMPKIN,.iziToast>.iziToast-body .iziToast-icon.PUMPKIN{color:#d35400}.fa-duotone.POMEGRANATE,.fa-light.POMEGRANATE,.fa-regular.POMEGRANATE,.fa-solid.POMEGRANATE,.fa-thin.POMEGRANATE,.fa.POMEGRANATE,.fad.POMEGRANATE,.fal.POMEGRANATE,.far.POMEGRANATE,.fas.POMEGRANATE,.iziToast>.iziToast-body .iziToast-icon.POMEGRANATE{color:#c0392b}.fa-duotone.SILVER,.fa-light.SILVER,.fa-regular.SILVER,.fa-solid.SILVER,.fa-thin.SILVER,.fa.SILVER,.fad.SILVER,.fal.SILVER,.far.SILVER,.fas.SILVER,.iziToast>.iziToast-body .iziToast-icon.SILVER{color:#bdc3c7}.fa-duotone.ASBESTOS,.fa-light.ASBESTOS,.fa-regular.ASBESTOS,.fa-solid.ASBESTOS,.fa-thin.ASBESTOS,.fa.ASBESTOS,.fad.ASBESTOS,.fal.ASBESTOS,.far.ASBESTOS,.fas.ASBESTOS,.iziToast>.iziToast-body .iziToast-icon.ASBESTOS{color:#7f8c8d}.article-title,.md .footer .header,.meta-v3,.new-meta-box,.prev-next,.widget header,details summary{font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace}:root{--color-site-body:#f4f4f4;--color-site-bg:#f4f4f4;--color-site-inner:#fff;--color-site-footer:#666;--color-card:#fff;--color-text:#444;--color-block:#f4f4f4;--color-inlinecode:#444;--color-codeblock:#f4f4f4;--color-h1:#3a3a3a;--color-h2:#3a3a3a;--color-h3:#333;--color-h4:#444;--color-h5:#555;--color-h6:#666;--color-p:#444;--color-list:#666;--color-list-hl:#30ad91;--color-meta:#888;--color-read-bkg:#e0d8c8;--color-read-post:#f8f1e2;--color-copyright-bkg:#f5f5f5;--color-white-png:#fff;--color-img-error:#f5f5f5}*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;outline:0;margin:0;padding:0}::-webkit-scrollbar{height:4px;width:4px}::-webkit-scrollbar-track-piece{background:0 0}::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ff5722}html{color:var(--color-text);width:100%;height:100%;font-family:UbuntuMono,"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;font-size:16px}html>::-webkit-scrollbar{height:4px;width:4px}html>::-webkit-scrollbar-track-piece{background:0 0}html>::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}html>::-webkit-scrollbar-thumb:hover{background:#ff5722}body{background-color:var(--color-site-body);text-rendering:optimizelegibility;-webkit-tap-highlight-color:transparent;line-height:1.6;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body.modal-active{overflow:hidden}@media screen and (max-width:680px){body.modal-active{position:fixed;top:0;right:0;bottom:0;left:0}}a{color:#2092ec;cursor:pointer;text-decoration:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}a:active,a:hover{outline:0}ol,ul{padding-left:0}ol li,ul li{list-style:none}header{display:block}img{border:0;background:0 0;max-width:100%}svg:not(:root){overflow:hidden}hr{-moz-box-sizing:content-box;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;height:0;border:0;border-radius:1px;-webkit-border-radius:1px;border-bottom:1px solid rgba(68,68,68,.1)}article hr{background-image:none;height:2em;border:none;margin:1em 0 1em;text-align:center}article hr:after{content:"···";letter-spacing:2em;padding-left:2em;font-weight:700}button,input{color:inherit;font:inherit;margin:0}button{overflow:visible;text-transform:none;-webkit-appearance:button;cursor:pointer}@supports (backdrop-filter:blur(20px)){.blur{background:rgba(255,255,255,.9)!important;backdrop-filter:saturate(200%) blur(20px)}}@supports (backdrop-filter:blur(20px)){.blur#comments{backdrop-filter:unset}}.shadow{box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.shadow.floatable{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.shadow.floatable:hover{box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}#l_cover{min-height:64px}.cover-wrapper{top:0;left:0;max-width:100%;height:100vh;display:flex;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:center;align-self:center;align-content:center;color:var(--color-site-inner);padding:0 16px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;position:relative;overflow:hidden;margin-bottom:-100px}.cover-wrapper .cover-bg{position:absolute;width:100%;height:100%;background-position:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover}.cover-wrapper .cover-bg.lazyload:not(.loaded){opacity:0;-webkit-opacity:0;-moz-opacity:0}.cover-wrapper .cover-bg.lazyload.loaded{animation-delay:0s;animation-duration:.5s;animation-fill-mode:forwards;animation-timing-function:ease-out;animation-name:fadeIn}@-moz-keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-o-keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}.cover-wrapper .cover-body{z-index:1;position:relative;width:100%;height:100%}.cover-wrapper#full{height:calc(100vh + 100px);padding-bottom:100px}.cover-wrapper#half{max-height:640px;min-height:460px;height:calc(36vh - 64px + 200px)}.cover-wrapper #scroll-down{width:100%;height:64px;position:absolute;bottom:100px;text-align:center;cursor:pointer}.cover-wrapper #scroll-down .scroll-down-effects{color:#fff;font-size:24px;line-height:64px;position:absolute;width:24px;left:calc(50% - 12px);text-shadow:0 1px 2px rgba(0,0,0,.1);animation:scroll-down-effect 1.5s infinite;-webkit-animation:scroll-down-effect 1.5s infinite;-khtml-animation:scroll-down-effect 1.5s infinite;-moz-animation:scroll-down-effect 1.5s infinite;-o-animation:scroll-down-effect 1.5s infinite;-ms-animation:scroll-down-effect 1.5s infinite}@-moz-keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-webkit-keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-o-keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}@keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}.cover-wrapper .cover-body{margin-top:64px;margin-bottom:120px}.cover-wrapper .cover-body,.cover-wrapper .cover-body .bottom,.cover-wrapper .cover-body .top{display:flex;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:center;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;max-width:100%}.cover-wrapper .cover-body .bottom{margin-top:32px}.cover-wrapper .cover-body .title{font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace;font-size:3.125rem;text-shadow:0 1px 2px rgba(0,0,0,.1);text-align:center}.cover-wrapper .cover-body .subtitle{font-size:16px}.cover-wrapper .cover-body .logo{max-height:120px;max-width:calc(100% - 4 * 16px)}@media screen and (min-height:1024px){.cover-wrapper .cover-body .title{font-size:3rem}.cover-wrapper .cover-body .subtitle{font-size:.875rem}.cover-wrapper .cover-body .logo{max-height:150px}}.cover-wrapper .cover-body .m_search{position:relative;max-width:calc(100% - 16px);width:320px;vertical-align:middle}.cover-wrapper .cover-body .m_search .form{position:relative;display:block;width:100%}.cover-wrapper .cover-body .m_search .icon,.cover-wrapper .cover-body .m_search .input{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.cover-wrapper .cover-body .m_search .icon{position:absolute;display:block;line-height:2.5rem;width:32px;top:0;left:5px;color:rgba(68,68,68,.75)}.cover-wrapper .cover-body .m_search .input{display:block;height:2.5rem;width:100%;box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-size:.875rem;-webkit-appearance:none;padding-left:36px;border-radius:1.4rem;-webkit-border-radius:1.4rem;background:rgba(255,255,255,.6);backdrop-filter:blur(10px);border:none;color:var(--color-text)}@media screen and (max-width:500px){.cover-wrapper .cover-body .m_search .input{padding-left:36px}}.cover-wrapper .cover-body .m_search .input:hover{background:rgba(255,255,255,.8)}.cover-wrapper .cover-body .m_search .input:focus{background:#fff}.cover-wrapper .list-h{display:flex;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:stretch;border-radius:4px;-webkit-border-radius:4px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.cover-wrapper .list-h a{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 0;-ms-flex:1 0;flex:1 0;display:flex;font-weight:600}.cover-wrapper .list-h a img{display:block;border-radius:2px;-webkit-border-radius:2px;margin:4px;min-width:40px;max-width:44px}@media screen and (max-width:768px){.cover-wrapper .list-h a img{min-width:36px;max-width:40px}}@media screen and (max-width:500px){.cover-wrapper .list-h a img{margin:2px 4px;min-width:32px;max-width:36px}}@media screen and (max-width:375px){.cover-wrapper .list-h a img{min-width:28px;max-width:32px}}.cover-wrapper{max-width:100%}.cover-wrapper.search .bottom .menu{margin-top:8px}.cover-wrapper.search .bottom .menu .list-h a{white-space:nowrap;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;align-items:baseline;padding:2px;margin:4px;color:var(--color-site-inner);opacity:.75;-webkit-opacity:0.75;-moz-opacity:0.75;text-shadow:0 1px 2px rgba(0,0,0,.05);border-bottom:2px solid transparent}.cover-wrapper.search .bottom .menu .list-h a i{margin-right:4px}.cover-wrapper.search .bottom .menu .list-h a p{font-size:.9375rem}.cover-wrapper.search .bottom .menu .list-h a.active,.cover-wrapper.search .bottom .menu .list-h a:active,.cover-wrapper.search .bottom .menu .list-h a:hover{opacity:1;-webkit-opacity:1;-moz-opacity:1;border-bottom:2px solid var(--color-site-inner)}@font-face{font-family:UbuntuMono;src:url("https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf");font-weight:'normal';font-style:'normal';font-display:swap}@font-face{font-family:'Varela Round';src:url("https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/fonts/VarelaRound/VarelaRound-Regular.ttf");font-weight:'normal';font-style:'normal';font-display:swap}.l_header{position:fixed;z-index:1000;top:0;width:100%;height:64px;background:var(--color-card);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.l_header.auto{transition:opacity .4s ease;-webkit-transition:opacity .4s ease;-khtml-transition:opacity 0.4s ease;-moz-transition:opacity .4s ease;-o-transition:opacity .4s ease;-ms-transition:opacity .4s ease;visibility:hidden}.l_header.auto.showed{opacity:1!important;-webkit-opacity:1!important;-moz-opacity:1!important;visibility:visible}.l_header .container{margin-left:16px;margin-right:16px}.l_header #wrapper{height:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.l_header #wrapper .nav-main,.l_header #wrapper .nav-sub{display:flex;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;align-items:center}.l_header #wrapper .nav-main{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.l_header #wrapper.sub .nav-main{transform:translateY(-64px);-webkit-transform:translateY(-64px);-khtml-transform:translateY(-64px);-moz-transform:translateY(-64px);-o-transform:translateY(-64px);-ms-transform:translateY(-64px)}.l_header #wrapper .nav-sub{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;opacity:0;-webkit-opacity:0;-moz-opacity:0;height:64px;width:calc(100% - 2 * 16px);position:absolute}.l_header #wrapper .nav-sub ::-webkit-scrollbar{display:none}@media screen and (min-width:2048px){.l_header #wrapper .nav-sub{max-width:55vw;margin:auto}}.l_header #wrapper.sub .nav-sub{opacity:1;-webkit-opacity:1;-moz-opacity:1}.l_header #wrapper .title{position:relative;color:var(--color-text);padding-left:24px;max-height:64px}.l_header #wrapper .nav-main .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;line-height:64px;padding:0 8px;font-size:1.25rem;font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace}.l_header #wrapper .nav-main .title img{height:64px;padding:8px}.l_header .nav-sub{max-width:1080px;margin:auto}.l_header .nav-sub .title{font-weight:700;font-family:UbuntuMono,"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;line-height:1.2;max-height:64px;white-space:normal;flex-shrink:1}.l_header .switcher{display:none;line-height:64px;align-items:center}.l_header .switcher .s-toc{display:none}@media screen and (max-width:768px){.l_header .switcher .s-toc{display:flex}}.l_header .switcher>li{height:48px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;margin:2px}@media screen and (max-width:500px){.l_header .switcher>li{margin:0 1px;height:48px}}.l_header .switcher>li>a{display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;width:48px;height:48px;padding:.85em 1.1em;border-radius:100px;-webkit-border-radius:100px;border:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;color:#3dd9b6}.l_header .switcher>li>a:hover{border:none}.l_header .switcher>li>a.active,.l_header .switcher>li>a:active{border:none;background:var(--color-site-bg)}@media screen and (max-width:500px){.l_header .switcher>li>a{width:36px;height:48px}}.l_header .nav-sub .switcher{display:flex}.l_header .m_search{display:flex;height:64px;width:240px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (max-width:1024px){.l_header .m_search{width:44px;min-width:44px}.l_header .m_search input::placeholder{opacity:0;-webkit-opacity:0;-moz-opacity:0}.l_header .m_search:hover{width:240px}.l_header .m_search:hover input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@media screen and (min-width:500px){.l_header .m_search:hover .input{width:100%}.l_header .m_search:hover .input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@media screen and (max-width:500px){.l_header .m_search{min-width:0}.l_header .m_search input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}.l_header .m_search .form{position:relative;display:flex;width:100%;align-items:center}.l_header .m_search .icon{position:absolute;width:36px;left:5px;color:var(--color-meta)}@media screen and (max-width:500px){.l_header .m_search .icon{display:none}}.l_header .m_search .input{display:block;padding-top:8px;padding-bottom:8px;line-height:1.3;width:100%;color:var(--color-text);background:#fafafa;box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding-left:40px;font-size:.875rem;border-radius:8px;-webkit-border-radius:8px;border:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (min-width:500px){.l_header .m_search .input:focus{box-shadow:0 4px 8px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.1)}}@media screen and (max-width:500px){.l_header .m_search .input{background:var(--color-block);padding-left:8px;border:none}.l_header .m_search .input:focus,.l_header .m_search .input:hover{border:none}}@media (max-width:500px){.l_header .m_search{left:0;width:0;overflow:hidden;position:absolute;background:#fff;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.l_header .m_search .input{border-radius:32px;-webkit-border-radius:32px;margin-left:16px;padding-left:16px}.l_header.z_search-open .m_search{width:100%}.l_header.z_search-open .m_search .input{width:calc(100% - 120px)}}ul.list-v li:hover>ul.list-v,ul.m-pc li:hover>ul.list-v{display:block}ul.nav-list-h{display:flex;align-items:stretch}ul.nav-list-h>li{position:relative;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;height:100%;line-height:2.4;border-radius:4px;-webkit-border-radius:4px}ul.nav-list-h>li>a{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul.nav-list-h>li>a span{font-weight:600}ul.list-v{z-index:1;display:none;position:absolute;background:var(--color-card);box-shadow:0 2px 4px 0 rgba(0,0,0,.08),0 4px 8px 0 rgba(0,0,0,.08),0 8px 16px 0 rgba(0,0,0,.08);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.08),0 4px 8px 0 rgba(0,0,0,.08),0 8px 16px 0 rgba(0,0,0,.08);margin-top:-6px;border-radius:4px;-webkit-border-radius:4px;padding:8px 0}ul.list-v.show{display:block}ul.list-v hr{margin-top:8px;margin-bottom:8px}ul.list-v>li{white-space:nowrap;word-break:keep-all}ul.list-v>li.header{font-size:.78125rem;font-weight:700;line-height:2em;color:var(--color-meta);margin:8px 16px 4px}ul.list-v>li.header i{margin-right:8px}ul.list-v>li ul{margin-left:0;display:none;margin-top:-40px}ul.list-v .aplayer-container{min-height:64px;padding:6px 16px}ul.list-v>li>a{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;display:block;color:var(--color-list);font-size:.875rem;line-height:36px;padding:0 20px 0 16px;text-overflow:ellipsis;margin:0 4px;border-radius:4px;-webkit-border-radius:4px}@media screen and (max-width:1024px){ul.list-v>li>a{line-height:40px}}ul.list-v>li>a>i{margin-right:8px}ul.list-v>li>a.active,ul.list-v>li>a:active{color:var(--color-list-hl)}ul.list-v>li>a:hover{color:var(--color-list-hl);background:var(--color-site-bg)}.l_header .menu>ul>li>a{display:block;padding:0 8px;display:flex}.l_header .menu>ul>li>a .icon{width:16px;margin-right:6px}.l_header .menu>ul>li>a .icon i{display:inline-block}.l_header .menu>ul>li>ul .icon{width:16px;margin-right:2px}.l_header .menu>ul>li>ul .icon i{display:inline-block}.l_header ul.nav-list-h>li{color:var(--color-list);line-height:64px}.l_header ul.nav-list-h>li>a{max-height:64px;overflow:hidden;color:inherit}.l_header ul.nav-list-h>li>a.active span,.l_header ul.nav-list-h>li>a:active span{color:#3dd9b6}.l_header ul.nav-list-h>li:hover>a{color:var(--color-list-hl)}.l_header ul.nav-list-h>li i.music{animation:rotate-effect 1.5s linear infinite;-webkit-animation:rotate-effect 1.5s linear infinite;-khtml-animation:rotate-effect 1.5s linear infinite;-moz-animation:rotate-effect 1.5s linear infinite;-o-animation:rotate-effect 1.5s linear infinite;-ms-animation:rotate-effect 1.5s linear infinite}@-moz-keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}@-webkit-keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}@-o-keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}@keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}.menu-phone li ul.list-v{right:calc(100% - .5 * 16px)}.menu-phone li ul.list-v ul{right:calc(100% - .5 * 16px)}#wrapper{max-width:1080px;margin:auto}@media screen and (min-width:2048px){#wrapper{max-width:55vw}}#wrapper .menu{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1;-ms-flex:1 1;flex:1 1;margin:0 16px 0 0}#wrapper .menu .list-v ul{left:calc(100% - .5 * 16px)}.menu-phone{display:none;margin-top:16px;right:8px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.menu-phone ul{right:calc(100% - .5 * 16px)}@media screen and (max-width:500px){.menu-phone{display:block}}.l_header{max-width:65vw;left:calc((100% - 65vw) * .5);border-bottom-left-radius:8px;border-bottom-right-radius:8px}@media screen and (max-width:2048px){.l_header{max-width:1112px;left:calc((100% - 1112px) * .5)}}@media screen and (max-width:1112px){.l_header{left:0;border-radius:0;-webkit-border-radius:0;max-width:100%}}@media screen and (max-width:500px){.l_header .container{margin-left:0;margin-right:0}.l_header #wrapper .nav-main .title{padding-left:16px;padding-right:16px}.l_header #wrapper .nav-sub{width:100%}.l_header #wrapper .nav-sub .title{overflow-y:scroll;margin-top:2px;padding:8px 16px}.l_header #wrapper .switcher{display:flex;margin-right:8px;height:64px}.l_header .menu{display:none}}@media screen and (max-width:500px){.list-v li{max-width:270px}}@media screen and (min-width:768px){#l_cover,#l_header{display:none}}#u-search{display:none;position:fixed;top:0;left:0;width:100%;height:100%;padding:60px 20px;z-index:1001}@media screen and (max-width:680px){#u-search{padding:0}}</style><link rel="stylesheet" href="/css/style.css" media="print" onload='this.media="all",this.onload=null'><noscript><link rel="stylesheet" href="/css/style.css"></noscript><script>document.addEventListener("error",(function(t){const a=t.target,e=t.target.parentElement,r=e.classList.toString(),s=e.parentElement.classList.toString();"img"===a.tagName.toLowerCase()&&(a.classList.add("fix-cursor-default","error"),"fancybox"===r&&"fancybox"===s?(e.parentElement.classList.add("hideFancybox"),e.parentElement.classList.remove("fancybox"),e.classList.remove("fancybox")):"img-bg"===r&&"img-wrap"===s?e.parentElement.classList.add("hideFancybox"):"author"===r?e.parentElement.classList.add("fix-author-imgError"):-1!=r.indexOf("tk-avatar")&&e.parentElement.classList.add("fix-avatar-imgError"))}),!0)</script><script>window.MSInputMethodContext&&document.documentMode&&document.write('<style>html{overflow-x: hidden !important;overflow-y: hidden !important;}.kill-ie{text-align:center;height: 100%;margin-top: 15%;margin-bottom: 5500%;}.kill-t{font-size: 2rem;}.kill-c{font-size: 1.2rem;}#l_header,#l_body{display: none;}</style><div class="kill-ie"><span class="kill-t"><b>抱歉，您的浏览器无法访问本站</b></span><br/><span class="kill-c">微软已经于2016年终止了对 Internet Explorer (IE) 10 及更早版本的支持，<br/>继续使用存在极大的安全隐患，请使用当代主流的浏览器进行访问。</span><br/><a target="_blank" rel="noopener" href="https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/"><strong>了解详情 ></strong></a></div>')</script><noscript><style>html{overflow-x:hidden!important;overflow-y:hidden!important}.kill-noscript{text-align:center;height:100%;margin-top:15%;margin-bottom:5500%}.kill-t{font-size:2rem}.kill-c{font-size:1.2rem}#l_body,#l_header{display:none}</style><div class="kill-noscript"> <span class="kill-t"><b>抱歉，您的浏览器无法访问本站</b></span><br> <span class="kill-c">本页面需要浏览器支持（启用）JavaScript</span><br> <a target="_blank" rel="noopener" href="https://www.baidu.com/s?wd=启用JavaScript"><strong>了解详情 ></strong></a></div></noscript><script>function volantisEventListener(e,t,n){this.type=e,this.f=t,this.ele=n}function volantisDom(e){return e||(e=document.createElement("div")),this.ele=e,this.ele.find=e=>{let t=this.ele.querySelector(e);if(t)return new volantisDom(t)},this.ele.hasClass=e=>this.ele.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)")),this.ele.addClass=e=>(this.ele.classList.add(e),this.ele),this.ele.removeClass=e=>(this.ele.classList.remove(e),this.ele),this.ele.toggleClass=e=>(this.ele.hasClass(e)?this.ele.removeClass(e):this.ele.addClass(e),this.ele),this.ele.on=(e,t,n=1)=>(this.ele.addEventListener(e,t,!1),n&&volantis.EventListener.list.push(new volantisEventListener(e,t,this.ele)),this.ele),this.ele.click=(e,t)=>(this.ele.on("click",e,t),this.ele),this.ele.scroll=(e,t)=>(this.ele.on("scroll",e,t),this.ele),this.ele.html=e=>(this.ele.innerHTML=e,this.ele),this.ele.hide=e=>(this.ele.style.display="none",this.ele),this.ele.show=e=>(this.ele.style.display="block",this.ele),this.ele}function RunItem(){function e(e,t){this.name=t||e.name,this.run=()=>{try{e()}catch(e){console.log(e)}}}this.list=[],this.start=()=>{for(var e=0;e<this.list.length;e++)this.list[e].run()},this.push=(t,n,s=!0)=>{let o=t;s&&(o=()=>{volantis.requestAnimationFrame(t)});var l=new e(o,n);this.list.push(l)},this.remove=e=>{for(let t=0;t<this.list.length;t++){this.list[t].name==e&&this.list.splice(t,1)}}}function errorImgAvatar(e){e.src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/avatar/round/3442075.svg",e.onerror=null}function errorImgCover(e){e.src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/cover/76b86c0226ffd.svg",e.onerror=null}window.volantis={},volantis.debug="env",volantis.dom={},volantis.EventListener={},volantis.EventListener.list=[],volantis.EventListener.remove=()=>{volantis.EventListener.list.forEach((function(e){e.ele.removeEventListener(e.type,e.f,!1)})),volantis.EventListener.list=[]},volantis.dom.$=e=>e?new volantisDom(e):null,volantis.pjax={},volantis.pjax.method={complete:new RunItem,error:new RunItem,send:new RunItem},volantis.pjax=Object.assign(volantis.pjax,{push:volantis.pjax.method.complete.push,error:volantis.pjax.method.error.push,send:volantis.pjax.method.send.push}),volantis.rightmenu={},volantis.rightmenu.method={handle:new RunItem},volantis.rightmenu=Object.assign(volantis.rightmenu,{handle:volantis.rightmenu.method.handle.push}),volantis.dark={},volantis.dark.method={toggle:new RunItem},volantis.dark=Object.assign(volantis.dark,{push:volantis.dark.method.toggle.push}),volantis.js=(e,t)=>new Promise((n=>{setTimeout((function(){var s=document.getElementsByTagName("head")[0]||document.documentElement,o=document.createElement("script");if(o.setAttribute("type","text/javascript"),t)if(JSON.stringify(t))for(let e in t)"onload"==e?o[e]=()=>{t[e](),n()}:(o[e]=t[e],o.onload=n);else o.onload=()=>{t(),n()};else o.onload=n;o.setAttribute("src",e),s.appendChild(o)}))})),volantis.css=e=>new Promise((t=>{setTimeout((function(){var n=document.createElement("link");n.rel="stylesheet",n.href=e,n.onload=t,document.getElementsByTagName("head")[0].appendChild(n)}))})),volantis.import={jQuery:()=>"undefined"==typeof jQuery?volantis.js("https://jsd.cdn.storisinz.site/npm/jquery@3.6.0/dist/jquery.min.js"):new Promise((e=>{e()}))},volantis.requestAnimationFrame=e=>{window.requestAnimationFrame||(window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame),window.requestAnimationFrame(e)},volantis.layoutHelper=(e,t,n)=>{function s(e,t,n){volantis.tempDiv=document.createElement("div"),volantis.tempDiv.innerHTML=t;let s=document.querySelector("#layoutHelper-"+e);s&&(n&&(s.innerHTML=""),s.append(volantis.tempDiv))}n=Object.assign({clean:!1,pjax:!0},n),s(e,t,n.clean),n.pjax&&volantis.pjax.push((()=>{s(e,t,n.clean)}),"layoutHelper-"+e)},volantis.scroll={engine:new RunItem,unengine:new RunItem},volantis.scroll=Object.assign(volantis.scroll,{push:volantis.scroll.engine.push}),volantis.scroll.getScrollTop=()=>{let e;return window.pageYOffset?e=window.pageYOffset:document.compatMode&&"BackCompat"!=document.compatMode?e=document.documentElement.scrollTop:document.body&&(e=document.body.scrollTop),e},volantis.scroll.scrollHeight=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)},volantis.scroll.offsetHeight=function(){return Math.max(document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},volantis.scroll.progress=function(){return volantis.scroll.getScrollTop()/(volantis.scroll.scrollHeight()-volantis.scroll.offsetHeight())},volantis.scroll.handleScrollEvents=()=>{volantis.scroll.lastScrollTop=volantis.scroll.getScrollTop(),volantis.requestAnimationFrame((function e(){const t=volantis.scroll.getScrollTop();volantis.scroll.lastScrollTop!==t?(volantis.scroll.del=t-volantis.scroll.lastScrollTop,volantis.scroll.lastScrollTop=t,volantis.scroll.unengine.list=[],volantis.scroll.engine.start()):volantis.scroll.unengine.start(),volantis.requestAnimationFrame(e)}))},volantis.scroll.handleScrollEvents(),volantis.scroll.ele=null,volantis.scroll.to=(e,t={})=>{e&&(volantis.scroll.ele=e,opt={top:e.getBoundingClientRect().top+document.documentElement.scrollTop,behavior:"smooth"},"top"in t&&(opt.top=t.top),"behavior"in t&&(opt.behavior=t.behavior),"addTop"in t&&(opt.top+=t.addTop),"observerDic"in t||(t.observerDic=100),window.scrollTo(opt),t.observer&&setTimeout((()=>{volantis.scroll.ele==e&&volantis.scroll.unengine.push((()=>{let n=e.getBoundingClientRect().top;n>=-t.observerDic&&n<=t.observerDic||volantis.scroll.to(e,t),volantis.scroll.unengine.remove("unengineObserver")}),"unengineObserver")}),1e3))},volantis.cleanContentVisibility=()=>{document.querySelector(".post-story")&&(console.log("cleanContentVisibility"),document.querySelectorAll(".post-story").forEach((e=>{e.classList.remove("post-story")})))}</script><script>volantis.GLOBAL_CONFIG={root:"/",debug:"env",default:{avatar:"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/avatar/round/3442075.svg",link:"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/link/8f277b4ee0ecd.svg",cover:"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/cover/76b86c0226ffd.svg",image:"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/image/2659360.svg"},lastupdate:new Date(1730024666073),cdn:{izitoast_css:"https://jsd.cdn.storisinz.site/npm/izitoast@1.4.0/dist/css/iziToast.min.css",izitoast_js:"https://jsd.cdn.storisinz.site/npm/izitoast@1.4.0/dist/js/iziToast.min.js",fancybox_css:"https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0.31/dist/fancybox.css",fancybox_js:"https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0.31/dist/fancybox.umd.js"},sidebar:{for_page:["nextsite","nextblogger","category","tagcloud","webinfo"],for_post:["nextsite","nextblogger","category","tagcloud","webinfo"],webinfo:{lastupd:{enable:!0,friendlyShow:!0},runtime:{data:"2020/01/01",unit:"天"}}},plugins:{message:{enable:!0,icon:{default:"fa-solid fa-info-circle light-blue",quection:"fa-solid fa-question-circle light-blue"},time:{default:5e3,quection:2e4},position:"topRight",transitionIn:"bounceInLeft",transitionOut:"fadeOutRight",titleColor:"var(--color-text)",messageColor:"var(--color-text)",backgroundColor:"var(--color-card)",zindex:2147483647,copyright:{enable:!0,title:"知识共享许可协议",message:"请遵守 CC BY-NC-SA 4.0 协议。",icon:"far fa-copyright light-blue"},aplayer:{enable:!0,play:"fa-solid fa-play",pause:"fa-solid fa-pause"},rightmenu:{enable:!0,notice:!0}}},search:{appId:"72TOQYD33Q",indexName:"hexo",apiKey:"608d2f3acd06140a2473153f6cb61eda",hitsPerPage:"5",placeholder:"Search...",searchAsYouType:!0},languages:{search:{hits_empty:"找不到您查询的内容：${query}",hits_stats:"找到 ${hits} 条结果，用时 ${time} 毫秒"}}}</script><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><script src="https://jsd.cdn.storisinz.site/npm/axios@1.7.7/dist/axios.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script>(async()=>{document.querySelector.bind(document);"serviceWorker"in navigator&&(Number(window.localStorage.getItem("CetaHouseHelper_Set"))<1&&(window.localStorage.setItem("CetaHouseHelper_Set",1),window.stop(),document.body.innerHTML=await(await fetch("/load.html")).text()),navigator.serviceWorker.register(`/sw.js?time=${Math.ceil(1e19*Math.random())}`).then((async()=>{Number(window.localStorage.getItem("CetaHouseHelper_Set"))<2&&setTimeout((()=>{window.localStorage.setItem("CetaHouseHelper_Set",2),window.location.reload()}),500)})).catch((e=>console.error(`CetaHouseHelperError:${e}`))))})()</script></head><body itemscope itemtype="http://schema.org/WebPage"><header itemscope itemtype="http://schema.org/WPHeader" id="l_header" class="l_header auto shadow floatable blur show showed" style="opacity:0"><div class="container"><div id="wrapper"><div class="nav-sub"><p class="title fix-header-title"></p><ul class="switcher nav-list-h m-phone" id="pjax-header-nav-list"><li><a id="s-comment" class="fa-solid fa-comments fa-fw" target="_self" title="comment"></a></li><li><a id="s-toc" class="s-toc fa-solid fa-list fa-fw" target="_self" title="toc"></a></li></ul></div><div class="nav-main"><a class="title flat-box" target="_self" href="/"><i class="fa fa-home"></i> <span>汐塔魔法屋</span></a><div class="menu navigation"><ul class="nav-list-h m-pc"><li><a class="menuitem flat-box faa-parent animated-hover" href="/categories/" title="分类" active-action="action-categories"><span class="icon"><i class="fa-solid fa-folder-open fa-fw"></i></span> <span>分类</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/tags/" title="标签" active-action="action-tags"><span class="icon"><i class="fa-solid fa-tags fa-fw"></i></span> <span>标签</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/archives/" title="归档" active-action="action-archives"><span class="icon"><i class="fa-solid fa-archive fa-fw"></i></span> <span>归档</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/link/" title="友链" active-action="action-link"><span class="icon"><i class="fa-solid fa-link fa-fw"></i></span> <span>友链</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" title="开往" active-action="action-https:wwwtravellingscngohtml"><span class="icon"><i class="fa-solid fa-subway fa-fw"></i></span> <span>开往</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://en.blog.sinzmise.top/" title="English" active-action="action-https:enblogsinzmisetop"><span class="icon"><i class="fa fa-language fa-fw fa-fw"></i></span> <span>English</span></a></li></ul></div><div class="m_search"><form name="searchform" class="form u-search-form"><i class="icon fas fa-search fa-fw"></i> <input type="text" class="input u-search-input" placeholder="Search..."></form></div><ul class="switcher nav-list-h m-phone"><li><a class="s-search fa-solid fa-search fa-fw" target="_self" title="search"></a></li><li><a class="s-menu fa-solid fa-bars fa-fw" target="_self" title="menu"></a><ul class="menu-phone list-v navigation white-box"><li><a class="menuitem flat-box faa-parent animated-hover" href="/categories/" title="分类" active-action="action-categories"><span class="icon"><i class="fa-solid fa-folder-open fa-fw"></i></span> <span>分类</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/tags/" title="标签" active-action="action-tags"><span class="icon"><i class="fa-solid fa-tags fa-fw"></i></span> <span>标签</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/archives/" title="归档" active-action="action-archives"><span class="icon"><i class="fa-solid fa-archive fa-fw"></i></span> <span>归档</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/link/" title="友链" active-action="action-link"><span class="icon"><i class="fa-solid fa-link fa-fw"></i></span> <span>友链</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" title="开往" active-action="action-https:wwwtravellingscngohtml"><span class="icon"><i class="fa-solid fa-subway fa-fw"></i></span> <span>开往</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://en.blog.sinzmise.top/" title="English" active-action="action-https:enblogsinzmisetop"><span class="icon"><i class="fa fa-language fa-fw fa-fw"></i></span> <span>English</span></a></li></ul></li></ul></div></div></div></header><div id="l_body"><div id="l_cover"></div><div id="safearea"><div class="body-wrapper"><div id="l_main" class=""><article itemscope itemtype="http://schema.org/Article" class="h-entry article post white-box reveal md shadow floatable blur article-type-post" id="post" itemscope itemprop="blogPost"><link itemprop="mainEntityOfPage" href="https://blog.sinzmise.top/posts/22945/"><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="汐塔魔法屋"></span><span hidden itemprop="post" itemscope itemtype="http://schema.org/Post"><meta itemprop="name" content="汐塔魔法屋"><meta itemprop="description" content="The Story,The Dream."></span><span hidden><meta itemprop="image" content="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"></span><div class="article-meta" id="top"><h1 class="title allow-select p-name" itemprop="name headline"> butterfly主题添加音乐页面（适配手机）</h1><div class="new-meta-box"><div class="new-meta-item author p-author h-card" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" class="author u-url" href="https://blog.sinzmise.top/" rel="nofollow"><img itemprop="image" class="u-photo" no-lazy src="/img/avatar.png" alt="Author"><p itemprop="name" class="p-name">王九弦SZ·Ninty</p></a></div><div class="new-meta-item category"><i class="fa-solid fa-folder-open fa-fw" aria-hidden="true"></i> <a class="category-link" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a> <span hidden itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" itemprop="url"><span itemprop="name p-category">站点折腾</span></a></span></div><div class="new-meta-item date" itemprop="dateCreated datePublished"><a class="notlink"><i class="fa-solid fa-calendar-alt fa-fw" aria-hidden="true"></i><p>发布于：<time class="dataToShow dt-published" datetime="2023-01-08T22:31:46+00:00" title="2023年1月8日">2023年1月8日</time></p></a></div><div class="new-meta-item browse"><a class="notlink"><p><i class="fa-solid fa-eye fa-fw" aria-hidden="true"></i><span id="busuanzi_value_page_pv"><i class="fa-solid fa-loader fa-spin fa-fw" aria-hidden="true"></i></span> <span>次浏览</span></p></a></div></div></div><div id="layoutHelper-page-plugins"></div><div id="post-body" itemprop="articleBody" class="e-content"><div class="note info"><p>本博客已经更换主题</p></div><p>没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，<del>但考虑到我不会写样式（虽然我可以自学）</del> 所以我音乐页面用的是<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/3322c8a8.html">Chuckle的方案</a><br><psw>（等会为啥开头这么像<a href="https://www.chuckle.top/article/3322c8a8.html">这篇文章</a>）</psw><br>原本我是想做<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/eb3a4679.html">单页背景透明</a>的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画<br>以下是我之前的音乐页面：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_x1MaJIbBQg"><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-09-59-57-499_com.2sej4yl2vuw0.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-09-59-57-499_com.2sej4yl2vuw0.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Screenshot_2023-01-09-09-59-57-499_com"><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-10-02-41-554_com.6tcc3lty2uo0.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-10-02-41-554_com.6tcc3lty2uo0.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Screenshot_2023-01-09-10-02-41-554_com"><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<del>但我懒得适配，于是就有了这个教程</del> ）<br><span id="more"></span></p><h1 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h1><div class="tabs" id="tab-教程开始"><ul class="nav-tabs"><li class="tab"><a class="#教程开始-1">1.0</a></li><li class="tab active"><a class="#教程开始-2">2.0</a></li></ul><div class="tab-content"><div class="tab-pane" id="教程开始-1"><p></p><div class="note info"><p>这个教程是我基于<a target="_blank" rel="noopener" href="https://www.php.cn/xiazai/js/6169">https://www.php.cn/xiazai/js/6169</a> 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p></div><p></p><p></p><div class="note warning"><p>目前博客已经弃用这个方案，改用2.0版本</p></div><p></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug，内容如下：<details green><summary> 点我查看代码</summary><div class="content"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">link(rel=&#x27;stylesheet&#x27; href=&#x27;/css/musics.css&#x27;)</span><br><span class="line">.player</span><br><span class="line"> .player__header</span><br><span class="line"> .player__img.player__img--absolute.slider</span><br><span class="line"> button.player__button.player__button--absolute--nw.playlist</span><br><span class="line"> img(src=&#x27;/svg/playlist.svg&#x27;, alt=&#x27;playlist-icon&#x27;)</span><br><span class="line"> button.player__button.player__button--absolute--center.play</span><br><span class="line"> img(src=&#x27;/svg/play.svg&#x27;, alt=&#x27;play-icon&#x27;)</span><br><span class="line"> img(src=&#x27;/svg/pause.svg&#x27;, alt=&#x27;pause-icon&#x27;)</span><br><span class="line"> .slider__content</span><br><span class="line"> each item in theme.musicplayer.musics</span><br><span class="line"> img.img.slider__img(src=item.image, alt=&#x27;cover&#x27;)</span><br><span class="line"> .player__controls</span><br><span class="line"> button.player__button.back</span><br><span class="line"> img.img(src=&#x27;/svg/back.svg&#x27;, alt=&#x27;back-icon&#x27;)</span><br><span class="line"> p.player__context.slider__context</span><br><span class="line"> strong.slider__title</span><br><span class="line"> span.slider__name.player__title</span><br><span class="line"> button.player__button.next</span><br><span class="line"> img.img(src=&#x27;/svg/next.svg&#x27;, alt=&#x27;next-icon&#x27;)</span><br><span class="line"> .progres</span><br><span class="line"> .progres__filled</span><br><span class="line"> ul.player__playlist.list</span><br><span class="line"> each musics in theme.musicplayer.musics</span><br><span class="line"> li.player__song</span><br><span class="line"> img.player__img.img(src=musics.image, alt=&#x27;cover&#x27;)</span><br><span class="line"> p.player__context</span><br><span class="line"> b.player__song-name=musics.name</span><br><span class="line"> span.flex</span><br><span class="line"> span.player__title=musics.author</span><br><span class="line"> span.player__song-time</span><br><span class="line"> audio.audio(src=musics.url)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> p#hitokoto</span><br><span class="line"> a#hitokoto_text(href=&quot;#&quot;,target=&quot;_blank&quot;) :D 获取中...</span><br><span class="line">script(src=&#x27;/js/player.js&#x27;)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch(&#x27;https://v1.hitokoto.cn&#x27;)</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; &#123;</span><br><span class="line"> const hitokoto = document.querySelector(&#x27;#hitokoto_text&#x27;)</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=$&#123;data.uuid&#125;`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + &quot; —— &quot; + data.creator + &quot;「&quot; + data.from + &quot;」&quot;</span><br><span class="line"> &#125;)</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></table></figure></div></details></li><li>在[blogroot]\themes\butterfly\source\css\目录下新建musics.css,内容如下：<details green><summary> 点我查看代码</summary><div class="content"><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br></pre></td><td class="code"><pre><span class="line">::root &#123;</span><br><span class="line"> <span class="attr">--parent-height</span> : <span class="number">20em</span> ;</span><br><span class="line"> <span class="attr">--duration</span>: <span class="number">1s</span> ;</span><br><span class="line"> <span class="attr">--duration-text-wrap</span>: <span class="number">12s</span> <span class="number">1.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.82</span>, <span class="number">0.82</span>, <span class="number">1</span>, <span class="number">1.01</span>) ;</span><br><span class="line"> <span class="attr">--cubic-header</span>: <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0.71</span>, <span class="number">0.21</span>, <span class="number">0.3</span>, <span class="number">0.95</span>) ;</span><br><span class="line"> <span class="attr">--cubic-slider</span> : <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0.4</span>, <span class="number">0</span>, <span class="number">0.2</span>, <span class="number">1</span>) ;</span><br><span class="line"> <span class="attr">--cubic-play-list</span> : .<span class="number">35s</span> <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0</span>, <span class="number">0.85</span>, <span class="number">0.11</span>, <span class="number">1.64</span>) ;</span><br><span class="line"> <span class="attr">--cubic-slider-context</span> : <span class="built_in">cubic-bezier</span>(<span class="number">1</span>, -<span class="number">0.01</span>, <span class="number">1</span>, <span class="number">1.01</span>) ; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.img</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: block ;</span><br><span class="line"> <span class="attribute">object-fit</span>: cover ;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.list</span> &#123;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">list-style-type</span>: none ;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flex</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">justify-content</span>: space-between ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.uppercase</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">text-transform</span>: uppercase ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">17.15em</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">1.22em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1.35em</span> ;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column ;</span><br><span class="line"> <span class="attribute">background-color</span>: white ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="built_in">var</span>(--parent-height) ;</span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">0</span> auto ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">1</span> ;</span><br><span class="line"> <span class="attribute">gap</span>: <span class="number">0</span> .<span class="number">4em</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">5.85em</span> ;</span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">align-items</span>: flex-start ;</span><br><span class="line"> <span class="attribute">border-radius</span>: inherit ;</span><br><span class="line"> <span class="attribute">justify-content</span>: flex-end ;</span><br><span class="line"> <span class="attribute">background-color</span>: white ;</span><br><span class="line"> <span class="attribute">padding</span>: .<span class="number">95em</span> <span class="number">0.6em</span> <span class="number">0</span> <span class="number">1.2em</span> ;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">6px</span> <span class="number">1px</span> <span class="number">#0000001f</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: height <span class="built_in">var</span>(--cubic-header), box-shadow <span class="built_in">var</span>(--duration), padding <span class="built_in">var</span>(--duration) ease-in-out ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span><span class="selector-class">.open-header</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">box-shadow</span>: unset ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">3.2em</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">3.2em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1.32em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img--absolute</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">1.4em</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">1.2em</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header), height <span class="built_in">var</span>(--cubic-header), top <span class="built_in">var</span>(--cubic-header), left <span class="built_in">var</span>(--cubic-header);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">14.6em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__content</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-slider);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__img</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">75%</span>) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__name</span>, </span><br><span class="line"><span class="selector-class">.slider__title</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.text-wrap</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: block ;</span><br><span class="line"> <span class="attribute">white-space</span>: pre ;</span><br><span class="line"> <span class="attribute">width</span>: fit-content ;</span><br><span class="line"> <span class="attribute">animation</span>: text-wrap <span class="built_in">var</span>(--duration-text-wrap) infinite ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> text-wrap &#123;</span><br><span class="line"></span><br><span class="line"> <span class="number">75%</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">51.5%</span>, <span class="number">0</span>, <span class="number">0</span>) ;</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="number">100%</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">51.5%</span>, <span class="number">0</span>, <span class="number">0</span>) ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">all</span>: unset ;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">100</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">2.5em</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">2.5em</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>) ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">calc</span>(<span class="built_in">var</span>(--duration) / <span class="number">2</span>) ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span> <span class="selector-class">.playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>) ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-play-list) ;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--nw</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">top</span>: <span class="number">5.5%</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">5.5%</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--center</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">margin</span>: auto ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[alt =<span class="string">&quot;pause-icon&quot;</span>]</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: none ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">77%</span> ;</span><br><span class="line"> <span class="attribute">gap</span>: .<span class="number">5em</span> <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">flex-wrap</span>: wrap ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">will-change</span>: contents ;</span><br><span class="line"> <span class="attribute">align-content</span>: center ;</span><br><span class="line"> <span class="attribute">justify-content</span>: center ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-header) , width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">88%</span> ;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">1.1em</span> , <span class="built_in">calc</span>(<span class="built_in">var</span>(--parent-height) - <span class="number">153%</span>) , <span class="number">0</span>) ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.8</span> ;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column ;</span><br><span class="line"> <span class="attribute">justify-content</span>: center ;</span><br><span class="line"> <span class="attribute">text-transform</span>: capitalize ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">56.28%</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">text-align</span>: center ;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: .<span class="number">2em</span> ;</span><br><span class="line"> <span class="attribute">will-change</span>: contents ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"> <span class="attribute">animation</span>: <span class="built_in">calc</span>(<span class="built_in">var</span>(--duration) / <span class="number">2</span>) <span class="built_in">var</span>(--cubic-slider-context) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> opacity &#123;</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="number">0%</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0</span> ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="number">90%</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">1</span> ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> <span class="selector-class">.slider__context</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">49.48%</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__title</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">7em</span> ;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold ;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#00000086</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">90%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: .<span class="number">25em</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1em</span> ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#e5e7ea</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> <span class="selector-class">.progres</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">98%</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">position</span>: relative ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">border-radius</span>: inherit ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#78adfe</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: .<span class="number">35em</span> ;</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">&quot; &quot;</span> ;</span><br><span class="line"> <span class="attribute">height</span>: .<span class="number">35em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#5781bd</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">overflow</span>: auto ; </span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">1.05em</span> .<span class="number">9em</span> <span class="number">0</span> <span class="number">1.2em</span> ; </span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span>::-webkit-scrollbar &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> &#123;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* gap: 0 .65em ; */</span></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: .<span class="number">5em</span> ;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: .<span class="number">7em</span> ;</span><br><span class="line"> <span class="attribute">border-bottom</span>: .<span class="number">1em</span> solid <span class="number">#d8d8d859</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> <span class="selector-class">.player__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.5</span> ;</span><br><span class="line"> <span class="attribute">margin-left</span>: .<span class="number">65em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-name</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">88em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-time</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">65em</span> ;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold ;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#00000079</span> ; </span><br><span class="line"> <span class="attribute">height</span>: fit-content ;</span><br><span class="line"> <span class="attribute">align-self</span>: flex-end ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.audio</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: none <span class="meta">!important</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.player__song-name</span>,<span class="selector-class">.slider__title</span>&#123;</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#000</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#hitokoto</span>&#123;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div></details></li><li>在[blogroot]\themes\butterfly\source\js\目录下新建player.js,内容如下：<details green><summary> 点我查看代码</summary><div class="content"><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Designed by: Mauricio Bucardo</span></span><br><span class="line"><span class="comment">// Original image: https://dribbble.com/shots/6957353-Music-Player-Widget</span></span><br><span class="line"><span class="meta"></span></span><br><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// add elemnts</span></span><br><span class="line"><span class="keyword">const</span> bgBody = [<span class="string">&quot;#e5e7e9&quot;</span>, <span class="string">&quot;#ff4545&quot;</span>, <span class="string">&quot;#f8ded3&quot;</span>, <span class="string">&quot;#ffc382&quot;</span>, <span class="string">&quot;#f5eda6&quot;</span>, <span class="string">&quot;#ffcbdc&quot;</span>, <span class="string">&quot;#dcf3f3&quot;</span>];</span><br><span class="line"><span class="keyword">const</span> body = <span class="variable language_">document</span>.<span class="property">body</span>;</span><br><span class="line"><span class="keyword">const</span> player = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.player&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerHeader = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.player__header&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerControls = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.player__controls&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerPlayList = player.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;.player__song&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerSongs = player.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;.audio&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.play&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> nextButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.next&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> backButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.back&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playlistButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.playlist&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> slider = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContext = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__context&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderName = sliderContext.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__name&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderTitle = sliderContext.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__title&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContent = slider.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__content&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContentLength = playerPlayList.<span class="property">length</span> - <span class="number">1</span>;</span><br><span class="line"><span class="keyword">const</span> sliderWidth = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">let</span> left = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> song = playerSongs[count];</span><br><span class="line"><span class="keyword">let</span> isPlay = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">const</span> pauseIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">&quot;img[alt = &#x27;pause-icon&#x27;]&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">&quot;img[alt = &#x27;play-icon&#x27;]&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> progres = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.progres&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> progresFilled = progres.<span class="title function_">querySelector</span>(<span class="string">&quot;.progres__filled&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> isMove = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// creat functions</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">openPlayer</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> playerHeader.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;open-header&quot;</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;move&quot;</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;open-slider&quot;</span>);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">closePlayer</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> playerHeader.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;open-header&quot;</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;move&quot;</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;open-slider&quot;</span>);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">next</span>(<span class="params"></span>) &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength) &#123;</span><br><span class="line"> count = count;</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> left += sliderWidth;</span><br><span class="line"> left = <span class="title class_">Math</span>.<span class="title function_">min</span>(left, (sliderContentLength) * sliderWidth);</span><br><span class="line"> sliderContent.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">`translate3d(-<span class="subst">$&#123;left&#125;</span>%, 0, 0)`</span>;</span><br><span class="line"> count++;</span><br><span class="line"></span><br><span class="line"> <span class="title function_">changeSliderContext</span>();</span><br><span class="line"> <span class="title function_">changeBgBody</span>();</span><br><span class="line"> <span class="title function_">selectSong</span>();</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">back</span>(<span class="params"></span>) &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == <span class="number">0</span>) &#123;</span><br><span class="line"> count = count</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> left -= sliderWidth;</span><br><span class="line"> left = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, left);</span><br><span class="line"> sliderContent.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">`translate3d(-<span class="subst">$&#123;left&#125;</span>%, 0, 0)`</span>;</span><br><span class="line"> count--;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeSliderContext</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> = <span class="string">&quot;opacity&quot;</span>;</span><br><span class="line"> </span><br><span class="line"> sliderName.<span class="property">textContent</span> = playerPlayList[count].<span class="title function_">querySelector</span>(<span class="string">&quot;.player__title&quot;</span>).<span class="property">textContent</span>;</span><br><span class="line"> sliderTitle.<span class="property">textContent</span> = playerPlayList[count].<span class="title function_">querySelector</span>(<span class="string">&quot;.player__song-name&quot;</span>).<span class="property">textContent</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (sliderName.<span class="property">textContent</span>.<span class="property">length</span> &gt; <span class="number">16</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> textWrap = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;span&quot;</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">&quot;text-wrap&quot;</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderName.<span class="property">textContent</span> + <span class="string">&quot; &quot;</span> + sliderName.<span class="property">textContent</span>; </span><br><span class="line"> sliderName.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> sliderName.<span class="title function_">append</span>(textWrap);</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (sliderTitle.<span class="property">textContent</span>.<span class="property">length</span> &gt;= <span class="number">18</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> textWrap = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;span&quot;</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">&quot;text-wrap&quot;</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderTitle.<span class="property">textContent</span> + <span class="string">&quot; &quot;</span> + sliderTitle.<span class="property">textContent</span>; </span><br><span class="line"> sliderTitle.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> sliderTitle.<span class="title function_">append</span>(textWrap);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeBgBody</span>(<span class="params"></span>) &#123;</span><br><span class="line"> body.<span class="property">style</span>.<span class="property">backgroundColor</span> = bgBody[count];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">selectSong</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> song = playerSongs[count];</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> item <span class="keyword">of</span> playerSongs) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (item != song) &#123;</span><br><span class="line"> item.<span class="title function_">pause</span>();</span><br><span class="line"> item.<span class="property">currentTime</span> = <span class="number">0</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (isPlay) song.<span class="title function_">play</span>();</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">playSong</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (song.<span class="property">paused</span>) &#123;</span><br><span class="line"> song.<span class="title function_">play</span>();</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;none&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line"></span><br><span class="line"> &#125;<span class="keyword">else</span>&#123;</span><br><span class="line"> song.<span class="title function_">pause</span>();</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">progresUpdate</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> progresFilledWidth = (<span class="variable language_">this</span>.<span class="property">currentTime</span> / <span class="variable language_">this</span>.<span class="property">duration</span>) * <span class="number">100</span> + <span class="string">&quot;%&quot;</span>;</span><br><span class="line"> progresFilled.<span class="property">style</span>.<span class="property">width</span> = progresFilledWidth;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">duration</span> == <span class="variable language_">this</span>.<span class="property">currentTime</span>) &#123;</span><br><span class="line"> <span class="title function_">next</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength &amp;&amp; song.<span class="property">currentTime</span> == song.<span class="property">duration</span>) &#123;</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">scurb</span>(<span class="params">e</span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// If we use e.offsetX, we have trouble setting the song time, when the mousemove is running</span></span><br><span class="line"> <span class="keyword">const</span> currentTime = ( (e.<span class="property">clientX</span> - progres.<span class="title function_">getBoundingClientRect</span>().<span class="property">left</span>) / progres.<span class="property">offsetWidth</span> ) * song.<span class="property">duration</span>;</span><br><span class="line"> song.<span class="property">currentTime</span> = currentTime;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">durationSongs</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> min = <span class="built_in">parseInt</span>(<span class="variable language_">this</span>.<span class="property">duration</span> / <span class="number">60</span>);</span><br><span class="line"> <span class="keyword">if</span> (min &lt; <span class="number">10</span>) min = <span class="string">&quot;0&quot;</span> + min;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> sec = <span class="built_in">parseInt</span>(<span class="variable language_">this</span>.<span class="property">duration</span> % <span class="number">60</span>);</span><br><span class="line"> <span class="keyword">if</span> (sec &lt; <span class="number">10</span>) sec = <span class="string">&quot;0&quot;</span> + sec;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> playerSongTime = <span class="string">`<span class="subst">$&#123;min&#125;</span>:<span class="subst">$&#123;sec&#125;</span>`</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">closest</span>(<span class="string">&quot;.player__song&quot;</span>).<span class="title function_">querySelector</span>(<span class="string">&quot;.player__song-time&quot;</span>).<span class="title function_">append</span>(playerSongTime);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title function_">changeSliderContext</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// add events</span></span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, openPlayer);</span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">&quot;animationend&quot;</span>, <span class="function">() =&gt;</span> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> =<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">playlistButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, closePlayer);</span><br><span class="line"></span><br><span class="line">nextButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, next);</span><br><span class="line"></span><br><span class="line">backButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">back</span>();</span><br><span class="line"> <span class="title function_">changeSliderContext</span>();</span><br><span class="line"> <span class="title function_">changeBgBody</span>();</span><br><span class="line"> <span class="title function_">selectSong</span>();</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">playButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> isPlay = <span class="literal">true</span>;</span><br><span class="line"> <span class="title function_">playSong</span>();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">playerSongs.<span class="title function_">forEach</span>(<span class="function"><span class="params">song</span> =&gt;</span> &#123;</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">&quot;loadeddata&quot;</span> , durationSongs);</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">&quot;timeupdate&quot;</span> , progresUpdate);</span><br><span class="line"> </span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">progres.<span class="title function_">addEventListener</span>(<span class="string">&quot;mousedown&quot;</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">scurb</span>(e);</span><br><span class="line"> isMove = <span class="literal">true</span>;</span><br><span class="line"> song.<span class="property">muted</span> = <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;mousemove&quot;</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> isMove &amp;&amp; <span class="title function_">scurb</span>(e));</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;mouseup&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> isMove = <span class="literal">false</span></span><br><span class="line"> song.<span class="property">muted</span> = <span class="literal">false</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">ondragstart</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></div></details></li><li>编辑[blogroot]\themes\butterfly\layout\page.pug<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"> case page.type</span><br><span class="line"> when &#x27;tags&#x27;</span><br><span class="line"> include includes/page/tags.pug</span><br><span class="line"> when &#x27;link&#x27;</span><br><span class="line"> include includes/page/flink.pug</span><br><span class="line"> when &#x27;bb&#x27;</span><br><span class="line"> include includes/page/bb.pug</span><br><span class="line"> when &#x27;categories&#x27;</span><br><span class="line"> include includes/page/categories.pug</span><br><span class="line"><span class="addition">+ when &#x27;music&#x27;</span></span><br><span class="line"><span class="addition">+ include includes/page/music.pug</span></span><br><span class="line"> default</span><br><span class="line"> include includes/page/default-page.pug</span><br></pre></td></tr></table></figure></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">musicplayer:</span></span><br><span class="line"> <span class="attr">hitokoto:</span> <span class="literal">true</span> <span class="comment"># 一言</span></span><br><span class="line"> <span class="attr">musics:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Eutopia&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yoohsic Roomz&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29129889.mp3&#x27;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Everything&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yinyues&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29544794.mp3&#x27;</span></span><br><span class="line"><span class="comment"># - name: &#x27;歌曲名字&#x27;</span></span><br><span class="line"><span class="comment"># author: &#x27;歌曲作者&#x27;</span></span><br><span class="line"><span class="comment"># image: &#x27;歌曲图片&#x27;</span></span><br><span class="line"><span class="comment"># url: &#x27;歌曲链接&#x27;</span></span><br></pre></td></tr></table></figure></li><li>将svg.7z压缩包里的五个文件放在[blogroot]\themes\butterfly\source\svg 里面<div class="btns rounded grid5"><a class="button" target="_blank" rel="noopener" href="https://sinz.lanzouw.com/iFMmG0kjkuvg" title="（密码：gt97）"><i class="fas fa-download"></i> （密码：gt97）</a></div></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">type: &#x27;music&#x27;</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure></li></ol></div><div class="tab-pane active" id="教程开始-2"><p><a href="/music/old/">2.0效果预览</a></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug（有搞1.0的话直接把music.pug里面的内容全都替换成下面的内容），内容如下：<details green><summary> 点我查看代码</summary><div class="content"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">link(</span><br><span class="line"> href=&quot;/assets/css/tplayer.css&quot;</span><br><span class="line"> rel=&quot;stylesheet&quot;</span><br><span class="line"> type=&quot;text/css&quot;</span><br><span class="line">)</span><br><span class="line">link(</span><br><span class="line"> href=&quot;/assets/plugins/FontAwesome4.1/css/font-awesome.min.css&quot;</span><br><span class="line"> rel=&quot;stylesheet&quot;</span><br><span class="line"> type=&quot;text/css&quot;</span><br><span class="line">)</span><br><span class="line">script(src=&quot;/assets/js/jquery.js&quot;)</span><br><span class="line">script(src=&quot;/assets/js/jquery-ui.js&quot;)</span><br><span class="line">script(src=&quot;/assets/js/tPlayer.js&quot;)</span><br><span class="line">#t_wrapper</span><br><span class="line"> #t_cover</span><br><span class="line"> img(src=&quot;/assets/images/logo.png&quot;)</span><br><span class="line"> #t_top</span><br><span class="line"> #t_title_info</span><br><span class="line"> span.artist</span><br><span class="line"> span.title</span><br><span class="line"> #t_middle</span><br><span class="line"> #play</span><br><span class="line"> #pause.hidden</span><br><span class="line"> #t_progress.ui-corner-all.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content</span><br><span class="line"> #trackInfo</span><br><span class="line"> #error</span><br><span class="line"> #current 0:00</span><br><span class="line"> #duration 0:00</span><br><span class="line"> .ui-corner-all.ui-slider-range.ui-slider-range-min.ui-widget-header(style=&quot;width: 0%;&quot;)</span><br><span class="line"> span.ui-corner-all.ui-slider-handle.ui-state-default(style=&quot;left: 0%;&quot; tabindex=&quot;0&quot;)</span><br><span class="line"> span#prev</span><br><span class="line"> span#next</span><br><span class="line"> #t_bottom</span><br><span class="line"> #range</span><br><span class="line"> #val</span><br><span class="line"> #vol</span><br><span class="line"> #rangeVal</span><br><span class="line"> #t_pls_show.noselectpls</span><br><span class="line">#playlist</span><br><span class="line"> ul</span><br><span class="line"> each musics in theme.musicplayer.musics</span><br><span class="line"> li(</span><br><span class="line"> t_artist=musics.author</span><br><span class="line"> t_cover=musics.image</span><br><span class="line"> t_name=musics.name</span><br><span class="line"> )</span><br><span class="line"> a(href=&quot;#&quot;)=musics.name + &#x27; - &#x27; + musics.author</span><br><span class="line"> audio(preload=&quot;none&quot; src=musics.url type=&quot;audio/mp3&quot;)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> p#hitokoto</span><br><span class="line"> a#hitokoto_text(href=&quot;#&quot;,target=&quot;_blank&quot;,style=&quot;text-align:center;color: #fff;&quot;) :D 获取中...</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch(&#x27;https://v1.hitokoto.cn&#x27;)</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; &#123;</span><br><span class="line"> const hitokoto = document.querySelector(&#x27;#hitokoto_text&#x27;)</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=$&#123;data.uuid&#125;`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + &quot; —— &quot; + data.creator + &quot;「&quot; + data.from + &quot;」&quot;</span><br><span class="line"> &#125;)</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></table></figure></div></details></li><li>将下面压缩包内五个文件夹全都解压在[blogroot]\themes\butterfly\source\assets 文件夹里面<div class="btns rounded grid5"><a class="button" target="_blank" rel="noopener" href="https://sinz.lanzouw.com/iUJTx0krafpi" title="（密码：3r5i）"><i class="fas fa-download"></i> （密码：3r5i）</a></div><div class="note info"><p>1.0想升级成2.0的，下面的步骤可以不用做</p></div></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">musicplayer:</span></span><br><span class="line"> <span class="attr">hitokoto:</span> <span class="literal">true</span> <span class="comment"># 一言</span></span><br><span class="line"> <span class="attr">musics:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Eutopia&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yoohsic Roomz&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29129889.mp3&#x27;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Everything&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yinyues&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29544794.mp3&#x27;</span></span><br><span class="line"><span class="comment"># - name: &#x27;歌曲名字&#x27;</span></span><br><span class="line"><span class="comment"># author: &#x27;歌曲作者&#x27;</span></span><br><span class="line"><span class="comment"># image: &#x27;歌曲图片&#x27;</span></span><br><span class="line"><span class="comment"># url: &#x27;歌曲链接&#x27;</span></span><br></pre></td></tr></table></figure></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">type: &#x27;music&#x27;</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure></li></ol></div></div></div><h1 id="TO-DO"><a href="#TO-DO" class="headerlink" title="TO DO"></a>TO DO</h1><div class="checkbox checked"><input type="checkbox" checked="checked"><p>播放列表</p></div><div class="checkbox checked"><input type="checkbox" checked="checked"><p>适配手机端</p></div><div class="checkbox"><input type="checkbox"><p>npm插件化<psw>（Akilar行为）</psw></p></div></div><div class="footer"></div><div class="article-meta" id="bottom"><div class="new-meta-box"><div class="new-meta-item date" itemprop="dateModified"><a class="notlink"><i class="fa-solid fa-edit fa-fw" aria-hidden="true"></i><p>更新于：<time class="dataToShow dt-updated" datetime="2024-10-27T10:23:58+00:00" title="2024年10月27日">2024年10月27日</time></p></a></div><div class="new-meta-item meta-tags"><a class="tag" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" rel="nofollow"><i class="fa-solid fa-hashtag fa-fw" aria-hidden="true"></i><p>站点折腾</p></a></div><div class="new-meta-item meta-tags"><a class="tag" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/" rel="nofollow"><i class="fa-solid fa-hashtag fa-fw" aria-hidden="true"></i><p>页面魔改</p></a></div> <span hidden itemprop="keywords">站点折腾 页面魔改</span><div class="new-meta-item share -mob-share-list"><div class="-mob-share-list share-body"> <a class="-mob-share-qq" title="" rel="external nofollow noopener noreferrer noopener" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://blog.sinzmise.top/posts/22945/&title=butterfly主题添加音乐页面（适配手机） - 汐塔魔法屋&summary=本博客已经更换主题
2
+ 没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，但考虑到我不会写样式（虽然我可以自学） 所以我音乐页面用的是Chuckle的方案（等会为啥开头这么像这篇文章）原本我是想做单页背景透明的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画以下是我之前的音乐页面：别问为啥是之前，这个音乐页面手机访问是这样的：当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，但我懒得适配，于是就有了这个教程 ）"><img src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/qq.png" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/qq.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a> <a class="-mob-share-qzone" title="" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://blog.sinzmise.top/posts/22945/&title=butterfly主题添加音乐页面（适配手机） - 汐塔魔法屋&summary=本博客已经更换主题
3
+ 没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，但考虑到我不会写样式（虽然我可以自学） 所以我音乐页面用的是Chuckle的方案（等会为啥开头这么像这篇文章）原本我是想做单页背景透明的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画以下是我之前的音乐页面：别问为啥是之前，这个音乐页面手机访问是这样的：当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，但我懒得适配，于是就有了这个教程 ）"><img src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/qzone.png" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/qzone.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a> <a class="-mob-share-weibo" title="" rel="external nofollow noopener noreferrer noopener" target="_blank" href="http://service.weibo.com/share/share.php?url=https://blog.sinzmise.top/posts/22945/&title=butterfly主题添加音乐页面（适配手机） - 汐塔魔法屋&summary=本博客已经更换主题
4
+ 没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，但考虑到我不会写样式（虽然我可以自学） 所以我音乐页面用的是Chuckle的方案（等会为啥开头这么像这篇文章）原本我是想做单页背景透明的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画以下是我之前的音乐页面：别问为啥是之前，这个音乐页面手机访问是这样的：当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，但我懒得适配，于是就有了这个教程 ）"><img src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/weibo.png" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/weibo.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a></div></div></div></div><div class="prev-next"><a class="prev" href="/posts/38964/"><p class="title"><i class="fa-solid fa-angle-double-left" aria-hidden="true"></i>小康大佬的说说方案 ———— ispeak搭建教程</p><p class="content">搞ispeak时发现ispeak更新，能自定义评论了，也就是说我之前写的ispeak教程失效了没办法我只能重新写了这篇教程 教程后端部署配置数据库以下内容来自：https://discuss.j...</p></a><a class="next" href="/posts/23021/"><p class="title">再见2022，你好2023<i class="fa-solid fa-angle-double-right" aria-hidden="true"></i></p><p class="content"> 封面图片来自：https://www.tukuppt.com/muban/vnjzjzvp.html 这是我在2022年的最后一篇文章。时间过得真快，我刚迁移完博客，2022就快结束了对此我并...</p></a></div></article><article class="post white-box shadow floatable blur" id="comments"><span hidden><meta itemprop="discussionUrl" content="/posts/22945/#comments"></span><p ct><i class="fa-solid fa-comments"></i> 评论</p><div id="layoutHelper-comments"></div></article></div><aside id="l_side" class="not-select default-cursor" itemscope itemtype="http://schema.org/WPSideBar"><section class="widget nextsite desktop pjax"><div class="site-brand-wrapper"><div class="site-meta"> <a href="/" class="brand" rel="start"><span class="site-title">汐塔魔法屋</span></a><p class="site-subtitle" itemprop="description">Ceta Magical House</p></div><div class="site-nav-toggle"> <button aria-label="切换导航栏"><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul class="next-main"><li class="next-main-item"><a href="/categories/" title="分类" active-action="action-categories"><i class="menu-item-icon fa-solid fa-folder-open fa-fw"></i> 分类</a></li><li class="next-main-item"><a href="/tags/" title="标签" active-action="action-tags"><i class="menu-item-icon fa-solid fa-tags fa-fw"></i> 标签</a></li><li class="next-main-item"><a href="/archives/" title="归档" active-action="action-archives"><i class="menu-item-icon fa-solid fa-archive fa-fw"></i> 归档</a></li><li class="next-main-item"><a href="/link/" title="友链" active-action="action-link"><i class="menu-item-icon fa-solid fa-link fa-fw"></i> 友链</a></li><li class="next-main-item"><a target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" title="开往" active-action="action-https:wwwtravellingscngohtml"><i class="menu-item-icon fa-solid fa-subway fa-fw"></i> 开往</a></li><li class="next-main-item"><a target="_blank" rel="noopener" href="https://en.blog.sinzmise.top/" title="English" active-action="action-https:enblogsinzmisetop"><i class="menu-item-icon fa fa-language fa-fw fa-fw"></i> English</a></li><li class="next-main-item"><a href="javascript:void(0)" title="搜索" active-action="action-javascript:void(0)" onclick="OpenSearch()"><i class="menu-item-icon fa-solid fa-search fa-fw"></i> 搜索</a></li></ul></nav></section><section class="widget nextblogger desktop pjax h-card"><div class="content"> <a class="avatar u-url flat-box" href="https://blog.sinzmise.top/"><img no-lazy class="site-author-image u-photo" itemprop="image" src="/img/avatar.png" alt="王九弦SZ·Ninty"></a><div class="site-author-box"><p class="site-author-name p-name" itemprop="name">王九弦SZ·Ninty</p><p class="site-author-description" itemprop="description">种下故事的种子，随着风和光生根发芽</p></div><div class="links-of-author"><span class="links-of-author-item"><a href="/atom.xml" title="RSS" alt="汐塔魔法屋" rel="me"><i class="fa-solid fa-rss fa-fw"></i></a></span><span class="links-of-author-item"><a href="mailto:email@sinzmise.top" title="Email" alt="汐塔魔法屋" class="u-email" rel="me"><i class="fa-solid fa-envelope fa-fw"></i></a></span><span class="links-of-author-item"><a target="_blank" href="https://github.com/SinzMise/" title="Github" alt="汐塔魔法屋" rel="me noopener"><i class="fab fa-github fa-fw"></i></a></span></div></div></section><section class="widget category desktop pjax"><header><a href="/categories/"><span class="icon"><i class="fa-solid fa-folder-open fa-fw" aria-hidden="true"></i></span> <span class="name">文章分类</span></a></header><div class="content"><ul class="entry navigation"><li><a class="flat-box" title="/categories/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/" href="/categories/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/" active-action="action-categoriesE4B8AAE4BABAE5B08FE8AEB0"><div class="name">个人小记</div><div class="badge">(19)</div></a></li><li><a class="flat-box" title="/categories/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/" href="/categories/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/" active-action="action-categoriesE6AD8CE69BB2E694B6E99B86"><div class="name">歌曲收集</div><div class="badge">(1)</div></a></li><li><a class="flat-box" title="/categories/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/" href="/categories/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/" active-action="action-categoriesE6B8B8E6888FE79BB8E585B3"><div class="name">游戏相关</div><div class="badge">(4)</div></a></li><li><a class="flat-box" title="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" active-action="action-categoriesE7AB99E782B9E68A98E885BE"><div class="name">站点折腾</div><div class="badge">(14)</div></a></li><li><a class="flat-box" title="/categories/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/" href="/categories/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/" active-action="action-categoriesE9A1B9E79BAEE68A98E885BE"><div class="name">项目折腾</div><div class="badge">(3)</div></a></li></ul></div></section><section class="widget tagcloud desktop pjax"><header><a href="/tags/"><span class="icon"><i class="fa-solid fa-tags fa-fw" aria-hidden="true"></i></span> <span class="name">热门标签</span></a></header><div class="content"> <a href="/tags/Flash%E7%9B%B8%E5%85%B3/" style="font-size:14px;color:#999">Flash相关</a> <a href="/tags/Steam%E6%B8%B8%E6%88%8F/" style="font-size:14px;color:#999">Steam游戏</a> <a href="/tags/Windows%E8%BD%AF%E4%BB%B6/" style="font-size:15.67px;color:#8e8e8e">Windows软件</a> <a href="/tags/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/" style="font-size:24px;color:#555">个人小记</a> <a href="/tags/%E5%85%B6%E5%AE%83%E6%B8%B8%E6%88%8F/" style="font-size:17.33px;color:#828282">其它游戏</a> <a href="/tags/%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB/" style="font-size:14px;color:#999">加载动画</a> <a href="/tags/%E6%82%AC%E6%B5%AE%E5%AE%A0%E7%89%A9-%E7%9C%8B%E6%9D%BF%E5%A8%98/" style="font-size:14px;color:#999">悬浮宠物/看板娘</a> <a href="/tags/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/" style="font-size:14px;color:#999">歌曲收集</a> <a href="/tags/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/" style="font-size:19px;color:#777">游戏相关</a> <a href="/tags/%E7%AB%99%E7%82%B9%E5%BA%95%E9%83%A8%E9%AD%94%E6%94%B9/" style="font-size:14px;color:#999">站点底部魔改</a> <a href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" style="font-size:22.33px;color:#606060">站点折腾</a> <a href="/tags/%E8%87%AA%E5%BB%BA%E9%83%A8%E7%BD%B2/" style="font-size:20.67px;color:#6c6c6c">自建部署</a> <a href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/" style="font-size:17.33px;color:#828282">页面魔改</a> <a href="/tags/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/" style="font-size:17.33px;color:#828282">项目折腾</a></div></section><div class="widget-sticky pjax"><section class="widget desktop"><header><span class="icon"><i class="fa-solid fa-award fa-fw" aria-hidden="true"></i></span> <span class="name">站点信息</span></header><div class="content"><div class="webinfo"><div class="webinfo-item"><div>文章数目：</div><div>41 篇</div></div><div class="webinfo-item"><div>本站访客数：</div><div><span id="busuanzi_value_site_uv"><i class="fa-solid fa-fan fa-spin fa-fw" aria-hidden="true"></i></span> 人</div></div><div class="webinfo-item"><div>本站总访问量：</div><div><span id="busuanzi_value_site_pv"><i class="fa-solid fa-fan fa-spin fa-fw" aria-hidden="true"></i></span> 次</div></div><div class="webinfo-item"><div>最后活动时间：</div><div id="last-update-show">2024-10-27 日</div></div></div></div></section></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div></aside><pjax><script>window.pdata={ispage:!0,commentPath:"",commentPlaceholder:"",commentConfig:{}},document.getElementById("l_header")&&document.getElementById("l_header").classList.add("show")</script></pjax></div><footer class="footer clearfix" itemscope itemtype="http://schema.org/WPFooter"><br><br><br><div class="social-wrapper" itemprop="about" itemscope itemtype="http://schema.org/Thing"> <a href="https://www.travellings.cn/go.html" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="开往-友链接力"><img src="https://www.travellings.cn/assets/logo.gif" class="lazyload" data-srcset="https://www.travellings.cn/assets/logo.gif" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a> <a href="https://blogscn.fun/" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="本站已加入BLOGS·CN"><img src="https://photo.xiangming.site/img/blogscn.png" class="lazyload" data-srcset="https://photo.xiangming.site/img/blogscn.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a> <a href="https://blogscn.fun/random.html" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="BLOGS·CN随机访问"><img src="https://photo.xiangming.site/img/footer.gif" class="lazyload" data-srcset="https://photo.xiangming.site/img/footer.gif" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a></div><div><p>博客内容遵循 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议</a></p></div> 由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 | 主题 <a href="https://github.com/volantis-x/hexo-theme-volantis/#6.0.0-alpha.0" target="_blank" class="codename">Volantis</a><div class="copyright"><p><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a> An <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍 <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a><br>©2021 · <a href="/">中弦局·汐塔魔法屋</a><br><a target="_blank" rel="noopener" href="https://icp.gov.moe/?keyword=20231033">萌ICP备20231033号</a> | <a target="_blank" rel="noopener" href="https://icp.gov.moe/?keyword=20231033">MIIT备20240818号</a> | <a target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/">官码2024000155号</a><br>我加入的：<a target="_blank" rel="noopener" href="https://zhblogs.ohyee.cc/">中文博客列表</a> | <a target="_blank" rel="noopener" href="https://storeweb.cn/member/o/1585">个站商店</a> | <a target="_blank" rel="noopener" href="https://bf.zzxworld.com/s/995">BlogFinder</a> | <a target="_blank" rel="noopener" href="https://sites.applinzi.com/site-info?siteType=life&amp;siteId=64cb373190e35300a8eec654">站点聚合平台</a> | <a target="_blank" rel="noopener" href="https://boke.lu/">博客录</a> | <a target="_blank" rel="noopener" href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/">RssBlog</a> | <a target="_blank" rel="noopener" href="https://blogscn.fun/">笔墨迹</a> | <a target="_blank" rel="noopener" href="https://daohang.lusongsong.com/">博客大全</a></p></div></footer><a id="s-top" class="fa-solid fa-arrow-up fa-fw" title="top"></a></div></div><div><script>volantis.dom.bodyAnchor=volantis.dom.$(document.getElementById("safearea")),volantis.dom.topBtn=volantis.dom.$(document.getElementById("s-top")),volantis.dom.wrapper=volantis.dom.$(document.getElementById("wrapper")),volantis.dom.coverAnchor=volantis.dom.$(document.querySelector("#l_cover .cover-wrapper")),volantis.dom.switcher=volantis.dom.$(document.querySelector("#l_header .switcher .s-search")),volantis.dom.header=volantis.dom.$(document.getElementById("l_header")),volantis.dom.search=volantis.dom.$(document.querySelector("#l_header .m_search")),volantis.dom.mPhoneList=volantis.dom.$(document.querySelectorAll("#l_header .m-phone .list-v")),top.location!=self.location&&(top.location=self.location),volantis.css("https://jsd.cdn.storisinz.site/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css")</script><script src="/js/app.js"></script><script>function loadIssuesJS(){null!=document.getElementById("sites-api")&&"undefined"==typeof SitesJS&&volantis.js("/js/plugins/tags/sites.js");null!=document.getElementById("friends-api")&&"undefined"==typeof FriendsJS&&volantis.js("/js/plugins/tags/friends.js");null!=document.getElementById("contributors-api")&&"undefined"==typeof ContributorsJS&&volantis.js("/js/plugins/tags/contributors.js")}loadIssuesJS(),volantis.pjax.push((()=>{loadIssuesJS()}))</script><script defer="defer" src="https://jsd.cdn.storisinz.site/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js"></script><script>window.lazyLoadOptions={elements_selector:".lazyload",threshold:0},window.addEventListener("LazyLoad::Initialized",(function(n){window.lazyLoadInstance=n.detail.instance}),!1),document.addEventListener("DOMContentLoaded",(function(){lazyLoadInstance.update()})),document.addEventListener("pjax:complete",(function(){lazyLoadInstance.update()}))</script><script>window.FPConfig={delay:0,ignoreKeywords:["#"],maxRPS:6,hoverDelay:0}</script><script defer="defer" src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/libs/flying-pages/flying-pages.min.js"></script><script>function load_twikoo(){document.querySelectorAll("#twikoo_container")[0]&&volantis.js("https://jsd.cdn.storisinz.site/npm/twikoo@1.6.39/dist/twikoo.min.js",pjax_twikoo)}function pjax_twikoo(){if(!document.querySelectorAll("#twikoo_container")[0])return;let o=pdata.commentPath,t=pdata.commentPlaceholder||"";if(0==o.length){o=""||decodeURI(window.location.pathname)}twikoo.init(Object.assign(Object.assign({path:null,envId:"https://tk.pl.blog.sinzmise.top/",placeholder:null,visitor:!1},{el:"#twikoo_container",path:o,placeholder:t,onCommentLoaded:function(){if("undefined"==typeof VolantisFancyBox){const o=setInterval((()=>{"undefined"!=typeof VolantisFancyBox&&(clearInterval(o),VolantisFancyBox.groupBind('.tk-content img:not([class*="emo"])',"Comments"))}))}else VolantisFancyBox.groupBind('.tk-content img:not([class*="emo"])',"Comments")}}),pdata.commentConfig))}volantis.layoutHelper("comments",'<div id="twikoo_container"><i class="fa-solid fa-cog fa-spin fa-fw fa-2x"></i></div>'),load_twikoo(),volantis.pjax.push((()=>{"undefined"==typeof twikoo?load_twikoo():pjax_twikoo()}),"twikoo")</script><script defer="defer" src="https://jsd.cdn.storisinz.site/npm/penndu@1.0.0/bsz.js" data-pjax></script><script>async function loadSearchScript(){return await volantis.js("https://jsd.cdn.storisinz.site/npm/algoliasearch@4.14.2/dist/algoliasearch-lite.umd.js"),await volantis.js("https://jsd.cdn.storisinz.site/npm/instantsearch.js@4.44.0/dist/instantsearch.production.min.js"),volantis.js("/js/search/algolia.js")}function loadSearchService(){document.querySelectorAll(".input.u-search-input").forEach((e=>{e.removeEventListener("focus",loadSearchService,!1)})),document.querySelectorAll(".u-search-form").forEach((e=>{e.addEventListener("submit",(e=>{e.preventDefault()}),!1)}))}function OpenSearch(e=""){"undefined"==typeof SearchService?loadSearchScript().then((()=>{SearchService.setQueryText(e),SearchService.search()})):(SearchService.setQueryText(e),SearchService.search())}if(loadSearchScript(),window.location.search&&/^\?s=/g.test(window.location.search)){OpenSearch(decodeURI(window.location.search).replace(/\ /g,"-").replace(/^\?s=/g,""))}document.querySelectorAll(".input.u-search-input").forEach((e=>{e.addEventListener("focus",loadSearchService,!1)}))</script><script>function pjax_highlightjs_copyCode(){(document.querySelector(".highlight .code pre")||document.querySelector(".article pre code"))&&VolantisApp.utilCopyCode(".highlight .code pre, .article pre code")}volantis.requestAnimationFrame(pjax_highlightjs_copyCode),volantis.pjax.push(pjax_highlightjs_copyCode)</script><script>function load_swiper(){document.querySelectorAll(".swiper-container")[0]&&(volantis.css("https://jsd.cdn.storisinz.site/npm/swiper@8.3.2/swiper-bundle.min.css"),volantis.js("https://jsd.cdn.storisinz.site/npm/swiper@8.3.2/swiper-bundle.min.js").then((()=>{pjax_swiper()})))}function pjax_swiper(){volantis.swiper=new Swiper(".swiper-container",{slidesPerView:"auto",spaceBetween:8,centeredSlides:!0,loop:!0,pagination:{el:".swiper-pagination",clickable:!0},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"}})}load_swiper(),volantis.pjax.push((()=>{document.querySelectorAll(".swiper-container")[0]&&(void 0===volantis.swiper?load_swiper():pjax_swiper())}))</script><pjax></pjax><script>function listenSidebarTOC(){const t=document.querySelectorAll(".toc li");if(!t.length)return;const e=[];Array.from(t).forEach((t=>{const n=t.querySelector(".toc-link"),i=document.getElementById(n.getAttribute("href")?decodeURI(n.getAttribute("href")).replace("#",""):n.getAttribute("toc-action").split("toc-")[1]);return e.push(i),n.getAttribute("href")&&(n.setAttribute("toc-action","toc-"+decodeURI(n.getAttribute("href")).replace("#","")),n.removeAttribute("href")),i&&i.id&&n.addEventListener("click",(t=>{t.preventDefault(),volantis.scroll.to(i,{addTop:5,observer:!0}),history.pushState(null,document.title,"#"+i.id)})),i}));function n(t){if(t.classList.contains("active-current"))return;document.querySelectorAll(".toc .active").forEach((t=>{t.classList.remove("active","active-current")})),t.classList.add("active","active-current");let e=t.parentNode;for(;!e.matches(".toc");)e.matches("li")&&e.classList.add("active"),e=e.parentNode}volantis.activateNavIndex=0,n(t[volantis.activateNavIndex]),e[0]&&volantis.scroll.push((()=>{if(e[0].getBoundingClientRect().top>=0)volantis.activateNavIndex=0;else if(e[e.length-1].getBoundingClientRect().top<0)volantis.activateNavIndex=e.length-1;else for(let t=0;t<e.length;t++){const n=e[t],i=e[(t+1)%e.length];if(n.getBoundingClientRect().top<0&&i.getBoundingClientRect().top>=0){volantis.activateNavIndex=t;break}}n(t[volantis.activateNavIndex])}))}document.addEventListener("DOMContentLoaded",(()=>{volantis.requestAnimationFrame(listenSidebarTOC)})),volantis.pjax.push(listenSidebarTOC)</script><script>document.onreadystatechange=function(){if("complete"==document.readyState){const{saveData:e,effectiveType:t}=navigator.connection||navigator.mozConnection||navigator.webkitConnection||{};("none"==getComputedStyle(document.querySelector("#safearea"),null).display||e||/2g/.test(t))&&(document.querySelectorAll(".reveal").forEach((function(e){e.style.opacity="1"})),document.querySelector("#safearea").style.display="block")}}</script><script type="application/ld+json">[{"@context":"http://schema.org","@type":"Organization","name":"汐塔魔法屋","url":"https://blog.sinzmise.top/","logo":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}},{"@context":"http://schema.org","@type":"Person","name":"王九弦SZ·Ninty","image":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"},"url":"https://blog.sinzmise.top/","sameAs":["https://github.com/volantis-x"],"description":"The Story,The Dream."},{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://blog.sinzmise.top/","name":"汐塔魔法屋"}},{"@type":"ListItem","position":2,"item":{"@id":"https://blog.sinzmise.top/categories/站点折腾/","name":"站点折腾"}},{"@type":"ListItem","position":3,"item":{"@id":"https://blog.sinzmise.top/posts/22945/","name":"butterfly主题添加音乐页面（适配手机）"}}]},{"@context":"http://schema.org","@type":"WebSite","name":"汐塔魔法屋","url":"https://blog.sinzmise.top/","keywords":null,"description":"The Story,The Dream.","author":{"@type":"Person","name":"王九弦SZ·Ninty","image":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"},"url":"https://blog.sinzmise.top/","description":"The Story,The Dream."},"publisher":{"@type":"Organization","name":"汐塔魔法屋","url":"https://blog.sinzmise.top/","logo":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}},"potentialAction":{"@type":"SearchAction","name":"Site Search","target":{"@type":"EntryPoint","urlTemplate":"https://blog.sinzmise.top?s={search_term_string}"},"query-input":"required name=search_term_string"}},{"@context":"http://schema.org","@type":"BlogPosting","headline":"butterfly主题添加音乐页面（适配手机）","description":"原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码","inLanguage":"zh-CN","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.sinzmise.top/posts/22945/"},"author":{"@type":"Person","name":"王九弦SZ·Ninty","image":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"},"url":"https://blog.sinzmise.top/"},"publisher":{"@type":"Organization","name":"汐塔魔法屋","logo":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}},"url":"https://blog.sinzmise.top/posts/22945/","wordCount":290,"datePublished":"2023-01-08T22:31:46.000Z","dateModified":"2024-10-27T10:23:58.814Z","articleSection":"站点折腾","keywords":"站点折腾,页面魔改","image":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp","width":1024,"height":768}}]</script><script src="https://jsd.cdn.storisinz.site/npm/pjax@0.2.8/pjax.min.js"></script><script>var pjax;document.addEventListener("DOMContentLoaded",(function(){pjax=new Pjax({elements:'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox]):not([onclick="return false;"]):not([onclick="return!1"]):not([target="_blank"]):not([target="view_window"]):not([href$=".xml"])',selectors:["head title","head meta[name=keywords]","head meta[name=description]","#l_cover","#l_main","#pjax-header-nav-list",".pjax","pjax"],cacheBust:!1,timeout:5e3})})),document.addEventListener("pjax:send",(function(e){try{var t=window.location.pathname,n=e.triggerElement.href,a=[""];""!=a[0]&&a.forEach((e=>{-1==t.indexOf(e)&&-1==n.indexOf(e)||(window.location.href=n)}))}catch(e){}volantis.pjax.method.send.start()})),document.addEventListener("pjax:complete",(function(){document.querySelectorAll("script[data-pjax], .pjax-reload script").forEach((e=>{const t=e.text||e.textContent||e.innerHTML||"",n=document.createElement("script");Object.keys(e.attributes).forEach((t=>{n.setAttribute(e.attributes[t].nodeName,e.attributes[t].nodeValue)})),t&&n.appendChild(document.createTextNode(t)),e.parentNode.replaceChild(n,e)})),volantis.pjax.method.complete.start()})),document.addEventListener("pjax:error",(function(e){"pjax"===volantis.debug?(console.error(e),console.log("pjax error: \n"+JSON.stringify(e))):(volantis.pjax.method.error.start(),window.location.href=e.triggerElement.href)}))</script></div><script data-pjax src="https://jsd.cdn.storisinz.site/npm/oh-my-live2d"></script><script>const oml2d=OML2D.loadOml2d({menus:{items:t=>[t[0],t[2],t[3]]},mobileDisplay:!1,models:[{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_6/dujiaoshou_6.model3.json",mobilePosition:[-10,23],mobileScale:.1,mobileStageStyle:{width:180,height:166},motionPreloadStrategy:"IDLE",position:[-120,-30],scale:.06,stageStyle:{width:250,height:400}},{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_4/dujiaoshou_4.model3.json",scale:.06,position:[-50,-25],stageStyle:{width:250,height:300},mobileScale:.08,mobilePosition:[0,0],mobileStageStyle:{width:180}}],parentElement:document.body,primaryColor:"var(--primary)",sayHello:!1,tips:{style:{width:230,height:120,left:"calc(50% + 6px)",top:"-100px"},mobileStyle:{width:180,height:80,left:"calc(50% - 30px)",top:"-100px"},idleTips:{interval:15e3,message:function(){return axios.get("https://v1.hitokoto.cn?c=i").then((function(t){return t.data.hitokoto})).catch((function(t){console.error(t)}))}}}})</script></body></html>