sinzmise-cetastories 2.0.0-1733056238559 → 2.0.0-1733056308524

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/404/index.html +1 -1
  2. package/404.html +1 -1
  3. package/about/index.html +1 -1
  4. package/album/index.html +1 -1
  5. package/archives/2021/12/index.html +1 -1
  6. package/archives/2021/index.html +1 -1
  7. package/archives/2022/12/index.html +1 -1
  8. package/archives/2022/index.html +1 -1
  9. package/archives/2023/01/index.html +1 -1
  10. package/archives/2023/02/index.html +1 -1
  11. package/archives/2023/03/index.html +1 -1
  12. package/archives/2023/04/index.html +1 -1
  13. package/archives/2023/07/index.html +1 -1
  14. package/archives/2023/08/index.html +1 -1
  15. package/archives/2023/09/index.html +1 -1
  16. package/archives/2023/10/index.html +1 -1
  17. package/archives/2023/11/index.html +1 -1
  18. package/archives/2023/12/index.html +1 -1
  19. package/archives/2023/index.html +1 -1
  20. package/archives/2023/page/2/index.html +1 -1
  21. package/archives/2023/page/3/index.html +1 -1
  22. package/archives/2024/01/index.html +1 -1
  23. package/archives/2024/02/index.html +1 -1
  24. package/archives/2024/03/index.html +1 -1
  25. package/archives/2024/04/index.html +1 -1
  26. package/archives/2024/05/index.html +1 -1
  27. package/archives/2024/06/index.html +1 -1
  28. package/archives/2024/07/index.html +1 -1
  29. package/archives/2024/08/index.html +1 -1
  30. package/archives/2024/09/index.html +1 -1
  31. package/archives/2024/10/index.html +1 -1
  32. package/archives/2024/11/index.html +1 -1
  33. package/archives/2024/index.html +1 -1
  34. package/archives/2024/page/2/index.html +1 -1
  35. package/archives/index.html +1 -1
  36. package/archives/page/2/index.html +1 -1
  37. package/archives/page/3/index.html +1 -1
  38. package/archives/page/4/index.html +1 -1
  39. package/archives/page/5/index.html +1 -1
  40. package/atom.xml +21 -21
  41. package/baidusitemap.xml +38 -38
  42. package/bbs/index.html +1 -1
  43. package/categories/index.html +1 -1
  44. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  45. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  46. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/page/3/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/essay/index.html +1 -1
  55. package/fcircle/index.html +1 -1
  56. package/index.html +1 -1
  57. package/link/index.html +1 -1
  58. package/music/index.html +1 -1
  59. package/package.json +1 -1
  60. package/page/2/index.html +1 -1
  61. package/page/3/index.html +1 -1
  62. package/page/4/index.html +1 -1
  63. package/page/5/index.html +1 -1
  64. package/posts/10021/index.html +1 -1
  65. package/posts/10045/index.html +1 -1
  66. package/posts/10733/index.html +1 -1
  67. package/posts/10996/index.html +1 -1
  68. package/posts/12779/index.html +1 -1
  69. package/posts/13624/index.html +1 -1
  70. package/posts/15688/index.html +1 -1
  71. package/posts/15748/index.html +1 -1
  72. package/posts/15799/index.html +1 -1
  73. package/posts/15842/index.html +1 -1
  74. package/posts/16107/index.html +1 -1
  75. package/posts/18063/index.html +1 -1
  76. package/posts/20412/index.html +1 -1
  77. package/posts/21375/index.html +1 -1
  78. package/posts/22945/index.html +1 -1
  79. package/posts/23021/index.html +1 -1
  80. package/posts/27531/index.html +1 -1
  81. package/posts/27762/index.html +1 -1
  82. package/posts/28536/index.html +1 -1
  83. package/posts/28733/index.html +1 -1
  84. package/posts/29196/index.html +1 -1
  85. package/posts/38917/index.html +1 -1
  86. package/posts/38964/index.html +1 -1
  87. package/posts/42487/index.html +1 -1
  88. package/posts/42580/index.html +1 -1
  89. package/posts/45875/index.html +1 -1
  90. package/posts/46640/index.html +1 -1
  91. package/posts/48762/index.html +1 -1
  92. package/posts/50710/index.html +1 -1
  93. package/posts/52677/index.html +1 -1
  94. package/posts/53662/index.html +1 -1
  95. package/posts/54386/index.html +1 -1
  96. package/posts/54481/index.html +1 -1
  97. package/posts/54787/index.html +1 -1
  98. package/posts/56467/index.html +1 -1
  99. package/posts/57692/index.html +1 -1
  100. package/posts/58203/index.html +1 -1
  101. package/posts/61417/index.html +1 -1
  102. package/posts/61712/index.html +1 -1
  103. package/posts/61713/index.html +1 -1
  104. package/posts/646/index.html +1 -1
  105. package/posts/64856/index.html +1 -1
  106. package/posts/64935/index.html +1 -1
  107. package/seas/index.html +1 -1
  108. package/sitemap.xml +42 -42
  109. package/swpp/update.json +1 -1
  110. package/tags/Flash/347/233/270/345/205/263/index.html +1 -1
  111. package/tags/Steam/346/270/270/346/210/217/index.html +1 -1
  112. package/tags/Windows/350/275/257/344/273/266/index.html +1 -1
  113. package/tags/index.html +1 -1
  114. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  115. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  116. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/page/3/index.html +1 -1
  117. package/tags//345/205/266/345/256/203/346/270/270/346/210/217/index.html +1 -1
  118. package/tags//345/212/240/350/275/275/345/212/250/347/224/273/index.html +1 -1
  119. 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
  120. package/tags//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  121. package/tags//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  122. package/tags//347/253/231/347/202/271/345/272/225/351/203/250/351/255/224/346/224/271/index.html +1 -1
  123. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  124. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  125. package/tags//350/207/252/345/273/272/351/203/250/347/275/262/index.html +1 -1
  126. package/tags//351/241/265/351/235/242/351/255/224/346/224/271/index.html +1 -1
  127. package/tags//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  128. package/update/index.html +1 -1
package/posts/22945/index.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><div id="myscoll"></div><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>butterfly主题添加音乐页面（适配手机） | 汐塔魔法屋</title><meta name="keywords" content="站点折腾,页面魔改"><meta name="author" content="王九弦SZ·Ninty"><meta name="copyright" content="王九弦SZ·Ninty"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><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://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><meta property="article:published_time" content="2023-01-08T22:31:46.000Z"><meta property="article:modified_time" content="2024-12-01T12:29:22.986Z"><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/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><link rel="shortcut icon" href="/images/siteicon/favicon.ico"><link rel="canonical" href="https://blog.sinzmise.top/posts/22945/"><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//www.google-analytics.com" crossorigin=""><link rel="preconnect" href="//hm.baidu.com"><link rel="preconnect" href="//static.cloudflareinsights.com"><link rel="preconnect" href="//busuanzi.ibruce.info"><meta name="baidu-site-verification" content="codeva-F0RjFTve6w"><meta name="msvalidate.01" content="18428535B4425286753107589FC35E79"><meta name="blogsclub-find" content="0bcd40f87500234dd4721904e917e748"><meta name="blogsclub-verify" content="c993246f2c944fed8e4fdc8d024561fe"><link rel="manifest" href="/manifest.json"><meta name="msapplication-TileColor" content="var(--theme-color)"><link rel="apple-touch-icon" sizes="180x180" href="/images/siteicon/ios/128.png"><link rel="icon" type="image/png" sizes="32x32" href="/images/siteicon/ios/32.png"><link rel="icon" type="image/png" sizes="16x16" href="/images/siteicon/ios/16.png"><link rel="mask-icon" href="/images/siteicon/ios/128.png" color="#5bbad5"><script>function registerServiceWorker(e){"localhost"!=window.location.hostname&&"serviceWorker"in navigator&&navigator.serviceWorker.register(`${e}?time=${(new Date).getTime()}`).then((function(e){e.onupdatefound=function(){var r=e.installing;r.onstatechange=function(){switch(r.state){case"installed":navigator.serviceWorker.controller?console.log("Updated Service Worker."):console.log("Service Worker Sucess!"),function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://jsd.cdn.storisinz.site/npm/clientworker/dist/autoupdate.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(e,r)}();break;case"redundant":console.log("The installing service worker became redundant.")}}}})).catch((function(e){console.error("Error during service worker registration:",e),"undefined"==typeof swinstallretry&&(swinstallretry=1,registerServiceWorker("/cw.js"))}))}registerServiceWorker("/cw.js")</script><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdnjs.cdn.storisinz.site/ajax/libs/font-awesome/6.0.0/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdnjs.cdn.storisinz.site/ajax/libs/fancyapps-ui/4.0.31/fancybox.min.css" media="print" onload='this.media="all"'><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?59986c9d6715c06178a2b6e2f118f837";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-7MR59SK1DP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-7MR59SK1DP")</script><script defer data-pjax="data-pjax" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;9156db3f439e470d9c3e7bf91a7aa995&quot;}"></script><script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script><script>LA.init({id:"K9WDMA2h2AfDg5GG",ck:"K9WDMA2h2AfDg5GG",autoTrack:!0,hashMode:!0})</script><script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script><script>(new LingQue.Monitor).init({id:"K94JRCDsbHJJSjNs",sendSpaPv:!0})</script><script>const GLOBAL_CONFIG={root:"/",algolia:void 0,localSearch:void 0,translate:void 0,noticeOutdate:{limitDay:365,position:"top",messagePrev:"It has been",messageNext:"days since the last update, the content of the article may be outdated."},highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:230},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!0,post:!0},runtime:"",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:void 0,lightbox:"fancybox",Snackbar:void 0,source:{justifiedGallery:{js:"https://cdnjs.cdn.storisinz.site/ajax/libs/flickr-justified-gallery/2.1.2/fjGallery.min.js",css:"https://cdnjs.cdn.storisinz.site/ajax/libs/flickr-justified-gallery/2.1.2/fjGallery.min.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"butterfly主题添加音乐页面（适配手机）",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2024-12-01 12:29:22"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const a=864e5*o,n={value:t,expiry:(new Date).getTime()+a};localStorage.setItem(e,JSON.stringify(n))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise(((t,o)=>{const a=document.createElement("script");a.src=e,a.async=!0,a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)})),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","ffffff")};const t=saveToLocal.get("theme"),o=(new Date).getHours();void 0===t?o<=6||o>=18?activateDarkMode():activateLightMode():"light"===t?activateLightMode():activateDarkMode();const a=saveToLocal.get("aside-status");void 0!==a&&("hide"===a?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css"><style id="themeColor"></style><style id="rightSide"></style><style id="transPercent"></style><style id="blurNum"></style><style id="settingStyle"></style><span id="fps"></span><style id="defineBg"></style><style id="menu_shadow"></style><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="webmention" href="https://webmention.io/blog.sinzmise.top/webmention"><link rel="pingback" href="https://webmention.io/blog.sinzmise.top/xmlrpc"><svg aria-hidden="true" style="position:absolute;overflow:hidden;width:0;height:0"><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z" fill="#FFD878" p-id="8420"></path><path d="M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z" fill="#FFE4A9" p-id="8421"></path><path d="M512 109.248 626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z" fill="#4D5152" p-id="8422"></path><path d="M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z" fill="#4D5152" p-id="8423"></path></symbol><symbol id="icon-moon" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol></svg><script defer src="/sw-dom.js"></script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload='this.media="all"'><script src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload='this.media="screen"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-filter-gitcalendar/lib/gitcalendar.css" media="print" onload='this.media="all"'><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"></head><body><div id="loading-box" onclick="document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)"><div class="loading-bg"><div class="loading-img"></div><div class="loading-image-dot"></div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/img/avatar.png" onerror='onerror=null,src="/assets/r1.jpg"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">43</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon--article"></use></svg> <span class="menu_word" style="font-size:17px">文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-guidang1"></use></svg> <span class="menu_word" style="font-size:17px">归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-sekuaibiaoqian"></use></svg> <span class="menu_word" style="font-size:17px">标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-fenlei"></use></svg> <span class="menu_word" style="font-size:17px">分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-shejiaoxinxi"></use></svg> <span class="menu_word" style="font-size:17px">友链</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pengyouquan"></use></svg> <span class="menu_word" style="font-size:17px">朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-liuyan"></use></svg> <span class="menu_word" style="font-size:17px">留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/link/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-lianjie"></use></svg> <span class="menu_word" style="font-size:17px">友人帐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bbs/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-laba"></use></svg> <span class="menu_word" style="font-size:17px">哔哔广场</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-chongdonglogo"></use></svg> <span class="menu_word" style="font-size:17px">虫洞</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.travellings.cn/go-by-clouds.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-huoche"></use></svg> <span class="menu_word" style="font-size:17px">开往</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://travel.moe/go.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-meng"></use></svg> <span class="menu_word" style="font-size:17px">异次元之旅</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://storeweb.cn/s/1707"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-shangdian"></use></svg> <span class="menu_word" style="font-size:17px">个站商店</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-boke"></use></svg> <span class="menu_word" style="font-size:17px">博客录</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://blogscn.fun/random.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-data-input"></use></svg> <span class="menu_word" style="font-size:17px">笔墨迹</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.blogsclub.org/go"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-b_x"></use></svg> <span class="menu_word" style="font-size:17px">BlogsClub</span></a></li></ul></div></div></div></div><div class="post h-entry" id="body-wrap"><header class="post-bg nav-fixed nav-visible" id="page-header" style="background-image:url('https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp')!important"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">汐塔魔法屋</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon--article"></use></svg> <span class="menu_word" style="font-size:17px">文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-guidang1"></use></svg> <span class="menu_word" style="font-size:17px">归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-sekuaibiaoqian"></use></svg> <span class="menu_word" style="font-size:17px">标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-fenlei"></use></svg> <span class="menu_word" style="font-size:17px">分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-shejiaoxinxi"></use></svg> <span class="menu_word" style="font-size:17px">友链</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pengyouquan"></use></svg> <span class="menu_word" style="font-size:17px">朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-liuyan"></use></svg> <span class="menu_word" style="font-size:17px">留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/link/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-lianjie"></use></svg> <span class="menu_word" style="font-size:17px">友人帐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bbs/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-laba"></use></svg> <span class="menu_word" style="font-size:17px">哔哔广场</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-chongdonglogo"></use></svg> <span class="menu_word" style="font-size:17px">虫洞</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.travellings.cn/go-by-clouds.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-huoche"></use></svg> <span class="menu_word" style="font-size:17px">开往</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://travel.moe/go.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-meng"></use></svg> <span class="menu_word" style="font-size:17px">异次元之旅</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://storeweb.cn/s/1707"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-shangdian"></use></svg> <span class="menu_word" style="font-size:17px">个站商店</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-boke"></use></svg> <span class="menu_word" style="font-size:17px">博客录</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://blogscn.fun/random.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-data-input"></use></svg> <span class="menu_word" style="font-size:17px">笔墨迹</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.blogsclub.org/go"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-b_x"></use></svg> <span class="menu_word" style="font-size:17px">BlogsClub</span></a></li></ul></div></div><center id="name-container"><a id="page-name" href="javascript:scrollToTop()">PAGE_NAME</a></center><div id="nav-right"><div id="search-button"><a class="search faa-parent animated-hover" title="检索站内任何你想要的信息"><svg class="faa-tada icon" style="height:24px;width:24px;fill:currentColor;position:relative;top:6px" aria-hidden="true"><use xlink:href="#icon-valentine_-search-love-find-heart"></use></svg> <span>搜索</span></a></div><a class="meihua faa-parent animated-hover" onclick="toggleWinbox()" title="美化设置-自定义你的风格" id="meihua-button"><svg class="faa-tada icon" style="height:26px;width:26px;fill:currentColor;position:relative;top:8px" aria-hidden="true"><use xlink:href="#icon-tupian1"></use></svg></a><a class="sun_moon faa-parent animated-hover" onclick="switchNightMode()" title="浅色和深色模式转换" id="nightmode-button"><svg class="faa-tada" style="height:25px;width:25px;fill:currentColor;position:relative;top:7px" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a><div id="toggle-menu"><a><i class="fas fa-bars fa-fw"></i></a></div></div></div></nav><div id="post-info"><h1 class="post-title p-name">butterfly主题添加音乐页面（适配手机）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><svg class="meta_icon post-meta-icon" style="width:30px;height:30px;position:relative;top:10px"><use xlink:href="#icon-rili"></use></svg><span class="post-meta-label">发表于</span> <time class="post-meta-date-created dt-published" datetime="2023-01-08T22:31:46.000Z" title="发表于 2023-01-08 22:31:46">2023-01-08</time><span class="post-meta-separator">|</span><svg class="meta_icon post-meta-icon" style="width:18px;height:18px;position:relative;top:5px"><use xlink:href="#icon-gengxin1"></use></svg><span class="post-meta-label">更新于</span><time class="post-meta-date-updated dt-updated" datetime="2024-12-01T12:29:22.986Z" title="更新于 2024-12-01 12:29:22">2024-12-01</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><svg class="meta_icon post-meta-icon" style="width:18px;height:18px;position:relative;top:5px"><use xlink:href="#icon-biaoqian"></use></svg><a class="post-meta-categories p-category" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><svg class="meta_icon post-meta-icon" style="width:25px;height:25px;position:relative;top:8px"><use xlink:href="#icon-charuword"></use></svg><span class="post-meta-label">字数总计:</span><span class="word-count">2941</span><span class="post-meta-separator">|</span><svg class="meta_icon post-meta-icon" style="width:20px;height:20px;position:relative;top:5px"><use xlink:href="#icon-shizhong"></use></svg><span class="post-meta-label">阅读时长:</span><span>16分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" data-flag-title="butterfly主题添加音乐页面（适配手机）"><svg class="meta_icon post-meta-icon" style="width:25px;height:25px;position:relative;top:5px"><use xlink:href="#icon-eye"></use></svg><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section></header><main class="layout" id="content-inner"><div id="post"><article class="post-content e-content" id="article-container"><h1>前言</h1><div class="note info modern"><p>本博客音乐页面已经换成了<a target="_blank" rel="noopener" href="https://anzhiy.cn/posts/c3d3.html">安知鱼大佬的方案</a></p></div><p>没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，<s>但考虑到我不会写样式（虽然我可以自学）</s> 所以我音乐页面用的是<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/3322c8a8.html">Chuckle的方案</a></p><psw>（等会为啥开头这么像<a href="https://www.chuckle.top/article/3322c8a8.html">这篇文章</a>）</psw><p>原本我是想做<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/eb3a4679.html">单页背景透明</a>的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画<br>以下是我之前的音乐页面：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" alt="msedge_x1MaJIbBQg"><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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"><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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"><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<s>但我懒得适配，于是就有了这个教程</s> ）</p><h1>教程</h1><div class="tabs" id="教程开始"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#教程开始-1">1.0</button></li><li class="tab active"><button type="button" data-href="#教程开始-2">2.0</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="教程开始-1"><div class="note info modern"><p>这个教程是我基于https://www.php.cn/xiazai/js/6169 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p></div><div class="note warning modern"><p>目前博客已经弃用这个方案，改用2.0版本</p></div>1. 新建[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>2. 在[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>3. 在[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>4. 编辑[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>5. 编辑[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>6. 将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>7. 运行`hexo new page music` 8. 编辑[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><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="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里面的内容全都替换成下面的内容），内容如下：</li></ol><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>2. 将下面压缩包内五个文件夹全都解压在[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 modern"><p>1.0想升级成2.0的，下面的步骤可以不用做</p></div>3. 编辑[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>4. 运行`hexo new page music` 5. 编辑[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><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h1>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></article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>butterfly主题添加音乐页面（适配手机）</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="https://blog.sinzmise.top/posts/22945/">https://blog.sinzmise.top/posts/22945/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>王九弦SZ·Ninty</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h>2023-01-08</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h>2024-12-01</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/"><div class="tags-punctuation"><svg class="faa-tada icon" style="height:1.1em;width:1.1em;fill:currentColor;position:relative;top:2px;margin-right:3px" aria-hidden="true"><use xlink:href="#icon-sekuaibiaoqian"></use></svg></div>站点折腾</a><a class="post-meta__tags" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/"><div class="tags-punctuation"><svg class="faa-tada icon" style="height:1.1em;width:1.1em;fill:currentColor;position:relative;top:2px;margin-right:3px" aria-hidden="true"><use xlink:href="#icon-sekuaibiaoqian"></use></svg></div>页面魔改</a></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/38964/"><img class="prev-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" onerror='onerror=null,src="/assets/r2.jpg"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div class="next-post pull-right"><a href="/posts/23021/"><img class="next-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230104/Goodbye2022.21ppwx94kqf4.webp" onerror='onerror=null,src="/assets/r2.jpg"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">再见2022，你好2023</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/10045/" title="为博客添加一个游戏收藏页（npm插件版）"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240525/fe131d7f5a6b38b23cc967316c13dae2.8dwp7xp4q5.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">为博客添加一个游戏收藏页（npm插件版）</div></div></a></div><div><a href="/posts/38964/" title="小康大佬的说说方案 ———— ispeak搭建教程"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div><a href="/posts/53662/" title="博客大更新"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/645fa3cf90d70.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">博客大更新</div></div></a></div><div><a href="/posts/16107/" title="新起点，新出发"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20221230/46348.3e004dfapae0.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">新起点，新出发</div></div></a></div><div><a href="/posts/57692/" title="Ruffle测试"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://images1.blog.sinzmise.top/images/Canvas-Ruom.7pbzp97mh.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">Ruffle测试</div></div></a></div><div><a href="/posts/28536/" title="自建不蒜子API"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://vip1.loli.io/2022/05/11/eKfrdV9p48IcCj5.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">自建不蒜子API</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div><div id="comment-switch"><span class="first-comment">Twikoo</span><span class="switch-btn"></span><span class="second-comment">Idisqus</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div><div><input id="comment-toggle" type="checkbox" disabled> <span>加载 Disqus 原生评论框</span><div id="idisqus-container"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info h-card"><div class="bg-blur"></div><div class="author_top is-center"><div class="card-info-avatar"><div class="avatar-img"><img class="u-photo u-logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/img/avatar.png" onerror='this.onerror=null,this.src="/assets/r1.jpg"' alt="avatar"></div><div class="author-status-box"><div class="author-status"><g-emoji class="g-emoji" alias="palm_tree" fallback-src="https://lskypro.acozycotage.net/LightPicture/2022/12/fe1dc0402e623096.jpg">🐟</g-emoji><span>认真摸鱼中</span></div></div></div><br><a class="author-info__name p-name u-url" href="/" style="color:#555">王九弦SZ·Ninty</a><div class="author-info__description">The Story,The Dream.</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">43</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://www.sinzmise.top/"><span>个人主页</span><i class="faa-passing animated" style="padding-left:20px;display:inline-block;vertical-align:middle"><svg class="icon" style="height:28px;width:28px;fill:currentColor;position:relative;top:5px"><use xlink:href="#icon-xiaoqiche"></use></svg></i></a><div class="card-info-social-icons is-center"><a class="social-icon faa-parent animated-hover" href="https://github.com/SinzMise" target="_blank" rel="me" title="Github"><svg class="social_icon faa-tada" aria-hidden="true" style="width:1.15em;height:1.15em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-github"></use></svg></a><a class="social-icon faa-parent animated-hover" href="https://space.bilibili.com/479627766" target="_blank" rel="me" title="Bilibili"><svg class="social_icon faa-tada" aria-hidden="true" style="width:1.15em;height:1.15em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-bilibili"></use></svg></a><a class="social-icon faa-parent animated-hover" href="mailto:email@sinzmise.top" target="_blank" rel="me" title="Email"><svg class="social_icon faa-tada" aria-hidden="true" style="width:1.15em;height:1.15em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-youxiang"></use></svg></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><a class="faa-parent animated-hover"><svg class="faa-tada icon" style="height:25px;width:25px;fill:currentColor;position:relative;top:5px" aria-hidden="true"><use xlink:href="#icon-gonggao"></use></svg></a><span style="font-weight:700">公告栏</span></div><div class="announcement_content"><center>果然，还是Butterfly真香</center></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><svg class="meta_icon" style="width:22px;height:22px;position:relative;top:5px"><use xlink:href="#icon-mulu1"></use></svg><span style="font-weight:700">目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">教程</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">TO DO</span></a></li></ol></div></div></div></div></main><footer id="footer" style="background-color:transparent"><div id="footer-wrap"><div id="ft"><div class="ft-item-1"><div class="t-top"><div class="t-t-l"><p class="ft-t t-l-t">格言🧬</p><div class="bg-ad"><div>再看看那个光点，它就在这里，这是家园，这是我们 —— 你所爱的每一个人，你认识的一个人，你听说过的每一个人，曾经有过的每一个人，都在它上面度过他们的一生✨</div><div class="btn-xz-box"><a class="btn-xz" target="_blank" rel="noopener" href="https://stellarium.org/">穿梭到星空之旅途</a></div></div></div><div class="t-t-r"><p class="ft-t t-l-t">猜你想看</p><ul class="ft-links"><li><a href="/tags/">文章标签</a><a href="/categories/">文章分类</a></li></ul></div></div></div><div class="ft-item-2"><p class="ft-t">推荐友链⌛</p><div class="ft-img-group"><div class="img-group-item"><a target="_blank" rel="noopener" href="https://www.fomal.cc/" title="/Fomalhaut%F0%9F%A5%9D"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://www.fomal.cc/assets/avatar.webp" alt=""></a></div></div></div></div><div class="footer_custom_text"><a href="https://www.travellings.cn/go.html" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="开往-友链接力"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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==" style="height:24px"></a><a href="https://boringbay.com" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="无聊湾 🥱 The Boring Bay"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://boringbay.com/api/badge/blog.sinzmise.top" class="lazyload" data-srcset="https://boringbay.com/api/badge/blog.sinzmise.top" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="height:24px"></a><a href="https://blogscn.fun/" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="本站已加入BLOGS·CN"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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==" style="height:24px"></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="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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==" style="height:24px"></a><a href="https://www.blogsclub.org/go" target="_blank" title="空间穿梭-随机访问BlogsClub成员博客"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://www.blogsclub.org/images/shuttle_1.png"></a><br><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://beian.miit.cn.com/gov/search.php?query=20240818">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> | <a target="_blank" rel="noopener" href="https://www.blogsclub.org/blog/99.html">BlogsClub</a></div><div id="workboard"></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" title="博客框架为Hexo_v6.2.0"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/Frame-Hexo-blue.svg" alt=""></a><a class="github-badge" target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px" title="主题版本Butterfly_v4.3.1"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/Theme-Butterfly-6513df.svg" alt=""></a><a class="github-badge" target="_blank" href="https://pages.cloudflare.com/" style="margin-inline:5px" title="本站采用多线部署，主线路部署到Cloudflare Pages"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/HostCF.svg" alt=""></a><a class="github-badge" target="_blank" href="https://cdn.ledcdn.com/" style="margin-inline:5px" title="本站由LEDCDN提供站点加速服务"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/LEDCDN.svg" alt=""></a><a class="github-badge" target="_blank" href="https://51.la/" style="margin-inline:5px" title="本站数据分析得益于51la技术支持"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/Analytics-51la-3db1eb.svg" alt=""></a><a class="github-badge" target="_blank" href="https://github.com/" style="margin-inline:5px" title="本站项目由GitHub托管"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&amp;logo=GitHub" alt=""></a><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&amp;logo=Claris" alt=""></a></p></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><a class="icon-V hidden" onclick="switchNightMode()" title="浅色和深色模式转换"><svg width="25" height="25" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button><button class="share" type="button" title="右键模式" onclick="changeMouseMode()"><i class="fas fa-mouse"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog right_side"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button class="share" type="button" title="分享链接" onclick="share()"><i class="fas fa-share-nodes"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0<span>%</span></span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight,500)"><i class="fas fa-arrow-down"></i></button></div></div><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div><link rel="stylesheet" href="https://cdnjs.cdn.storisinz.site/ajax/libs/docsearch-css/3.6.3/style.min.css"><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/docsearch-js/3.6.3/umd/index.min.js"></script><script>(()=>{docsearch(Object.assign({appId:"QAS05YI2PH",apiKey:"67ffd4c9fa1234148ec4f8b27dfdb2a7",indexName:"sinzmise",container:"#docsearch"},null));const e=()=>{document.querySelector("#search-button > .search").addEventListener("click",(()=>{document.querySelector(".DocSearch-Button").click()}))};e(),window.addEventListener("pjax:complete",e)})()</script></div><div class="js-pjax" id="rightMenu"><div class="rightMenu-group rightMenu-small"><a class="rightMenu-item" href="javascript:window.history.back();"><i class="fa fa-arrow-left"></i></a><a class="rightMenu-item" href="javascript:window.history.forward();"><i class="fa fa-arrow-right"></i></a><a class="rightMenu-item" href="javascript:window.location.reload();"><i class="fa fa-refresh"></i></a><a class="rightMenu-item" href="javascript:rmf.scrollToTop();"><i class="fa fa-arrow-up"></i></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-text"><a class="rightMenu-item" href="javascript:rmf.copySelect();"><i class="fa fa-copy"></i><span>复制</span></a><a class="rightMenu-item" href="javascript:window.open(&quot;https://bing.com/search?q=&quot;+window.getSelection().toString());window.location.reload();"><i class="fa fa-search"></i><span>必应搜索</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-too"><a class="rightMenu-item" href="javascript:window.open(window.getSelection().toString());window.location.reload();"><i class="fa fa-link"></i><span>转到链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-paste"><a class="rightMenu-item" href="javascript:rmf.paste()"><i class="fa fa-copy"></i><span>粘贴</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-post"><a class="rightMenu-item" href="#post-comment"><i class="fas fa-comment"></i><span>评论</span></a><a class="rightMenu-item" href="javascript:rmf.copyWordsLink()"><i class="fa fa-link"></i><span>复制本文地址</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-to"><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>在新窗口打开</span></a><a class="rightMenu-item" id="menu-too" href="javascript:rmf.open()"><i class="fa fa-link"></i><span>转到链接</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-img"><a class="rightMenu-item" href="javascript:rmf.saveAs()"><i class="fa fa-download"></i><span>保存图片</span></a><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>在新窗口打开</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制图片链接</span></a></div><div class="rightMenu-group rightMenu-line"><a class="rightMenu-item" href="javascript:randomPost()"><i class="fa fa-paper-plane"></i><span>随便逛逛</span></a><a class="rightMenu-item" href="javascript:switchNightMode();"><i class="fa fa-moon"></i><span>昼夜切换</span></a><a class="rightMenu-item" href="/about/"><i class="fa fa-info-circle"></i><span>关于我</span></a><a class="rightMenu-item" href="javascript:toggleWinbox();"><i class="fas fa-cog"></i><span>主题设置</span></a><a class="rightMenu-item" href="javascript:rmf.fullScreen();"><i class="fas fa-expand"></i><span>切换全屏</span></a><a class="rightMenu-item" href="javascript:window.print();"><i class="fa-solid fa-print"></i><span>打印页面</span></a></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/fancyapps-ui/4.0.31/fancybox.umd.min.js"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/instant.page/5.1.0/instantpage.min.js" type="module"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/vanilla-lazyload/17.3.1/lazyload.iife.min.js"></script><script async>var preloader={endLoading:()=>{document.body.style.overflow="auto",document.getElementById("loading-box").classList.add("loaded")},initLoading:()=>{document.body.style.overflow="",document.getElementById("loading-box").classList.remove("loaded")}};window.addEventListener("load",preloader.endLoading()),setTimeout((function(){preloader.endLoading()}),5e3),document.getElementById("loading-box").addEventListener("click",(()=>{preloader.endLoading()}))</script><div class="js-pjax"><script>(()=>{const t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://tk.pl.blog.sinzmise.top/",region:"",onCommentLoaded:function(){btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null))},o=()=>{"object"!=typeof twikoo?getScript("https://cdnjs.cdn.storisinz.site/ajax/libs/twikoo/1.6.40/twikoo.all.min.js").then(t):setTimeout(t,0)};btf.loadComment(document.getElementById("twikoo-wrap"),o)})()</script><script>function loadiDisqus(){function i(){new iDisqus("idisqus-container",{api:"https://idq.pl.blog.sinzmise.top/blog/zh",forum:"cetahousezh",mode:3,toggle:"comment-toggle",site:"https://blog.sinzmise.top",init:!0})}"function"==typeof iDisqus?i():(!function(){const i=document.createElement("link");i.rel="stylesheet",i.href="https://idq.pl.blog.sinzmise.top/dist/iDisqus.min.css",document.head.appendChild(i)}(),getScript("https://idq.pl.blog.sinzmise.top/dist/iDisqus.min.js").then(i))}{function loadOtherComment(){loadiDisqus()}}</script></div><script async data-pjax src="/bbs/bbs.js"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/jquery/3.6.3/jquery.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/axios/dist/axios.min.js"></script><script>var meting_api="https://meting.api.sinzmise.eu.org/api?server=:server&type=:type&id=:id&auth=:auth&r=:r"</script><script async src="https://jsd.cdn.storisinz.site/npm/vue@2.6.14/dist/vue.min.js"></script><script async src="https://jsd.cdn.storisinz.site/npm/element-ui@2.15.6/lib/index.js"></script><script async src="https://cdnjs.cdn.storisinz.site/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script><script defer src="https://jsd.cdn.storisinz.site/npm/sweetalert2@8.19.0/dist/sweetalert2.all.js"></script><script async src="https://jsd.cdn.storisinz.site/npm/pace-js@1.2.4/pace.min.js"></script><script defer src="https://jsd.cdn.storisinz.site/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script><script async src="//at.alicdn.com/t/c/font_3586335_hsivh70x0fm.js"></script><script async src="//at.alicdn.com/t/c/font_3636804_gr02jmjr3y9.js"></script><script async src="//at.alicdn.com/t/c/font_3612150_kfv55xn3u2g.js"></script><script async src="//at.alicdn.com/t/c/font_4199232_qgf79nv3qb8.js"></script><script async src="/js/Gold-ingot.js"></script><canvas id="universe"></canvas><canvas id="snow"></canvas><script defer src="/js/fomal.js"></script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/aplayer/dist/APlayer.min.css" media="print" onload='this.media="all"'><script src="https://jsd.cdn.storisinz.site/npm/aplayer/dist/APlayer.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/meting/dist/Meting.min.js"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/pjax/0.2.8/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show","#web_bg",".js-pjax","#bibi","body > title","#app","#tag-echarts","#posts-echart","#categories-echarts"];var pjax=new Pjax({elements:'a:not([target="_blank"]):not([href="/bbs/"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!0,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(window.tocScrollFn&&window.removeEventListener("scroll",window.tocScrollFn),window.scrollCollect&&window.removeEventListener("scroll",scrollCollect),"object"==typeof preloader&&preloader.initLoading(),document.getElementById("rightside").style.cssText="opacity: ''; transform: ''",window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),"object"==typeof disqusjs&&disqusjs.destroy()})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof chatBtnFn&&chatBtnFn(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","G-7MR59SK1DP",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll(),"object"==typeof preloader&&preloader.endLoading()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><script async data-pjax src="https://jsd.cdn.storisinz.site/npm/penndu@16.0.0/bsz.js"></script></div><script data-pjax>function butterfly_swiper_injector_config(){var s=document.getElementById("recent-posts");console.log("已挂载butterfly_swiper"),s.insertAdjacentHTML("afterbegin",'<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/61417/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230128/30165599-36623bea-93a6-11e7-8956-1ddf99ce0e6f.2rbu2i9xfvy0.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-01-19</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/61417/&quot;);" href="javascript:void(0);" alt="">自建Meting服务</a><div class="blog-slider__text">Meting官方API用不了了，所以。。。。。</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/61417/&quot;);" href="javascript:void(0);" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/54481/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/R-C.7iu7u13vibs0.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-03-12</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/54481/&quot;);" href="javascript:void(0);" alt="">千千静听复活教程</a><div class="blog-slider__text">中考尚未结束就来更新的屑</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/54481/&quot;);" href="javascript:void(0);" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/38964/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-01-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/38964/&quot;);" href="javascript:void(0);" alt="">小康大佬的说说方案 ———— ispeak搭建教程</a><div class="blog-slider__text">这篇文章是我之前写过的教程的重写</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/38964/&quot;);" href="javascript:void(0);" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/22945/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-01-08</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/22945/&quot;);" href="javascript:void(0);" alt="">butterfly主题添加音乐页面（适配手机）</a><div class="blog-slider__text">原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/22945/&quot;);" href="javascript:void(0);" alt="">详情 </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>')}for(var elist="undefined".split(","),cpage=location.pathname,epage="/",flag=0,i=0;i<elist.length;i++)cpage.includes(elist[i])&&flag++;("all"===epage&&0==flag||epage===cpage)&&butterfly_swiper_injector_config()</script><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-swiper/lib/swiper_init.js"></script><div class="js-pjax"><script async>for(var arr=document.getElementsByClassName("recent-post-item"),i=0;i<arr.length;i++)arr[i].classList.add("wow"),arr[i].classList.add("animate__zoomIn"),arr[i].setAttribute("data-wow-duration","2s"),arr[i].setAttribute("data-wow-delay","200ms"),arr[i].setAttribute("data-wow-offset","30"),arr[i].setAttribute("data-wow-iteration","1")</script><script async>for(var arr=document.getElementsByClassName("card-widget"),i=0;i<arr.length;i++)arr[i].classList.add("wow"),arr[i].classList.add("animate__zoomIn"),arr[i].setAttribute("data-wow-duration","2s"),arr[i].setAttribute("data-wow-delay","200ms"),arr[i].setAttribute("data-wow-offset","30"),arr[i].setAttribute("data-wow-iteration","1")</script></div><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/wow_init.js"></script><script data-pjax src="https://jsd.cdn.storisinz.site/npm/hexo-filter-gitcalendar/lib/gitcalendar.js"></script><script data-pjax>function gitcalendar_injector_config(){document.getElementById("gitZone").insertAdjacentHTML("afterbegin",'<div class="recent-post-item" id="gitcalendarBar" style="width:100%;height:auto;padding:10px;"><style>#git_container{min-height: 320px}@media screen and (max-width:650px) {#git_container{min-height: 0px}}</style><div id="git_loading" style="width:10%;height:100%;margin:0 auto;display: block;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animatetransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animatetransform></path></svg><style>#git_container{display: none;}</style></div><div id="git_container"></div></div>'),console.log("已挂载gitcalendar")}document.getElementById("gitZone")&&"/site/census/"===location.pathname&&(gitcalendar_injector_config(),GitCalendarInit("/api?null",["#d9e0df","#c6e0dc","#a8dcd4","#9adcd2","#89ded1","#77e0d0","#5fdecb","#47dcc6","#39dcc3","#1fdabe","#00dab9"],"null"))</script><script data-pjax src="https://jsd.cdn.storisinz.site/npm/oh-my-live2d"></script><script>const oml2d=OML2D.loadOml2d({menus:{items:o=>[{id:"home",icon:"fa fa-house",title:"我的个人主页",onClick:()=>window.open("https://www.sinzmise.top/")},o[0],o[2],o[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(--theme-color)",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(o){return o.data.hitokoto})).catch((function(o){console.error(o)}))}}}})</script></body></html>
1
+ <!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><div id="myscoll"></div><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>butterfly主题添加音乐页面（适配手机） | 汐塔魔法屋</title><meta name="keywords" content="站点折腾,页面魔改"><meta name="author" content="王九弦SZ·Ninty"><meta name="copyright" content="王九弦SZ·Ninty"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><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://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><meta property="article:published_time" content="2023-01-08T22:31:46.000Z"><meta property="article:modified_time" content="2024-12-01T12:30:43.295Z"><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/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><link rel="shortcut icon" href="/images/siteicon/favicon.ico"><link rel="canonical" href="https://blog.sinzmise.top/posts/22945/"><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//www.google-analytics.com" crossorigin=""><link rel="preconnect" href="//hm.baidu.com"><link rel="preconnect" href="//static.cloudflareinsights.com"><link rel="preconnect" href="//busuanzi.ibruce.info"><meta name="baidu-site-verification" content="codeva-F0RjFTve6w"><meta name="msvalidate.01" content="18428535B4425286753107589FC35E79"><meta name="blogsclub-find" content="0bcd40f87500234dd4721904e917e748"><meta name="blogsclub-verify" content="c993246f2c944fed8e4fdc8d024561fe"><link rel="manifest" href="/manifest.json"><meta name="msapplication-TileColor" content="var(--theme-color)"><link rel="apple-touch-icon" sizes="180x180" href="/images/siteicon/ios/128.png"><link rel="icon" type="image/png" sizes="32x32" href="/images/siteicon/ios/32.png"><link rel="icon" type="image/png" sizes="16x16" href="/images/siteicon/ios/16.png"><link rel="mask-icon" href="/images/siteicon/ios/128.png" color="#5bbad5"><script>function registerServiceWorker(e){"localhost"!=window.location.hostname&&"serviceWorker"in navigator&&navigator.serviceWorker.register(`${e}?time=${(new Date).getTime()}`).then((function(e){e.onupdatefound=function(){var r=e.installing;r.onstatechange=function(){switch(r.state){case"installed":navigator.serviceWorker.controller?console.log("Updated Service Worker."):console.log("Service Worker Sucess!"),function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://jsd.cdn.storisinz.site/npm/clientworker/dist/autoupdate.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(e,r)}();break;case"redundant":console.log("The installing service worker became redundant.")}}}})).catch((function(e){console.error("Error during service worker registration:",e),"undefined"==typeof swinstallretry&&(swinstallretry=1,registerServiceWorker("/cw.js"))}))}registerServiceWorker("/cw.js")</script><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdnjs.cdn.storisinz.site/ajax/libs/font-awesome/6.0.0/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdnjs.cdn.storisinz.site/ajax/libs/fancyapps-ui/4.0.31/fancybox.min.css" media="print" onload='this.media="all"'><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?59986c9d6715c06178a2b6e2f118f837";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-7MR59SK1DP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-7MR59SK1DP")</script><script defer data-pjax="data-pjax" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;9156db3f439e470d9c3e7bf91a7aa995&quot;}"></script><script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script><script>LA.init({id:"K9WDMA2h2AfDg5GG",ck:"K9WDMA2h2AfDg5GG",autoTrack:!0,hashMode:!0})</script><script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script><script>(new LingQue.Monitor).init({id:"K94JRCDsbHJJSjNs",sendSpaPv:!0})</script><script>const GLOBAL_CONFIG={root:"/",algolia:void 0,localSearch:void 0,translate:void 0,noticeOutdate:{limitDay:365,position:"top",messagePrev:"It has been",messageNext:"days since the last update, the content of the article may be outdated."},highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:230},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!0,post:!0},runtime:"",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:void 0,lightbox:"fancybox",Snackbar:void 0,source:{justifiedGallery:{js:"https://cdnjs.cdn.storisinz.site/ajax/libs/flickr-justified-gallery/2.1.2/fjGallery.min.js",css:"https://cdnjs.cdn.storisinz.site/ajax/libs/flickr-justified-gallery/2.1.2/fjGallery.min.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"butterfly主题添加音乐页面（适配手机）",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2024-12-01 12:30:43"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const a=864e5*o,n={value:t,expiry:(new Date).getTime()+a};localStorage.setItem(e,JSON.stringify(n))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise(((t,o)=>{const a=document.createElement("script");a.src=e,a.async=!0,a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)})),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","ffffff")};const t=saveToLocal.get("theme"),o=(new Date).getHours();void 0===t?o<=6||o>=18?activateDarkMode():activateLightMode():"light"===t?activateLightMode():activateDarkMode();const a=saveToLocal.get("aside-status");void 0!==a&&("hide"===a?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css"><style id="themeColor"></style><style id="rightSide"></style><style id="transPercent"></style><style id="blurNum"></style><style id="settingStyle"></style><span id="fps"></span><style id="defineBg"></style><style id="menu_shadow"></style><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="webmention" href="https://webmention.io/blog.sinzmise.top/webmention"><link rel="pingback" href="https://webmention.io/blog.sinzmise.top/xmlrpc"><svg aria-hidden="true" style="position:absolute;overflow:hidden;width:0;height:0"><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z" fill="#FFD878" p-id="8420"></path><path d="M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z" fill="#FFE4A9" p-id="8421"></path><path d="M512 109.248 626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z" fill="#4D5152" p-id="8422"></path><path d="M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z" fill="#4D5152" p-id="8423"></path></symbol><symbol id="icon-moon" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol></svg><script defer src="/sw-dom.js"></script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload='this.media="all"'><script src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload='this.media="screen"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-filter-gitcalendar/lib/gitcalendar.css" media="print" onload='this.media="all"'><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"></head><body><div id="loading-box" onclick="document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)"><div class="loading-bg"><div class="loading-img"></div><div class="loading-image-dot"></div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/img/avatar.png" onerror='onerror=null,src="/assets/r1.jpg"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">43</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon--article"></use></svg> <span class="menu_word" style="font-size:17px">文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-guidang1"></use></svg> <span class="menu_word" style="font-size:17px">归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-sekuaibiaoqian"></use></svg> <span class="menu_word" style="font-size:17px">标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-fenlei"></use></svg> <span class="menu_word" style="font-size:17px">分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-shejiaoxinxi"></use></svg> <span class="menu_word" style="font-size:17px">友链</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pengyouquan"></use></svg> <span class="menu_word" style="font-size:17px">朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-liuyan"></use></svg> <span class="menu_word" style="font-size:17px">留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/link/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-lianjie"></use></svg> <span class="menu_word" style="font-size:17px">友人帐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bbs/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-laba"></use></svg> <span class="menu_word" style="font-size:17px">哔哔广场</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-chongdonglogo"></use></svg> <span class="menu_word" style="font-size:17px">虫洞</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.travellings.cn/go-by-clouds.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-huoche"></use></svg> <span class="menu_word" style="font-size:17px">开往</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://travel.moe/go.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-meng"></use></svg> <span class="menu_word" style="font-size:17px">异次元之旅</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://storeweb.cn/s/1707"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-shangdian"></use></svg> <span class="menu_word" style="font-size:17px">个站商店</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-boke"></use></svg> <span class="menu_word" style="font-size:17px">博客录</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://blogscn.fun/random.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-data-input"></use></svg> <span class="menu_word" style="font-size:17px">笔墨迹</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.blogsclub.org/go"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-b_x"></use></svg> <span class="menu_word" style="font-size:17px">BlogsClub</span></a></li></ul></div></div></div></div><div class="post h-entry" id="body-wrap"><header class="post-bg nav-fixed nav-visible" id="page-header" style="background-image:url('https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp')!important"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">汐塔魔法屋</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon--article"></use></svg> <span class="menu_word" style="font-size:17px">文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-guidang1"></use></svg> <span class="menu_word" style="font-size:17px">归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-sekuaibiaoqian"></use></svg> <span class="menu_word" style="font-size:17px">标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-fenlei"></use></svg> <span class="menu_word" style="font-size:17px">分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-shejiaoxinxi"></use></svg> <span class="menu_word" style="font-size:17px">友链</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pengyouquan"></use></svg> <span class="menu_word" style="font-size:17px">朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-liuyan"></use></svg> <span class="menu_word" style="font-size:17px">留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/link/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-lianjie"></use></svg> <span class="menu_word" style="font-size:17px">友人帐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bbs/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-laba"></use></svg> <span class="menu_word" style="font-size:17px">哔哔广场</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-chongdonglogo"></use></svg> <span class="menu_word" style="font-size:17px">虫洞</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.travellings.cn/go-by-clouds.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-huoche"></use></svg> <span class="menu_word" style="font-size:17px">开往</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://travel.moe/go.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-meng"></use></svg> <span class="menu_word" style="font-size:17px">异次元之旅</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://storeweb.cn/s/1707"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-shangdian"></use></svg> <span class="menu_word" style="font-size:17px">个站商店</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-boke"></use></svg> <span class="menu_word" style="font-size:17px">博客录</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://blogscn.fun/random.html"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-data-input"></use></svg> <span class="menu_word" style="font-size:17px">笔墨迹</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.blogsclub.org/go"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.3em;height:1.3em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-b_x"></use></svg> <span class="menu_word" style="font-size:17px">BlogsClub</span></a></li></ul></div></div><center id="name-container"><a id="page-name" href="javascript:scrollToTop()">PAGE_NAME</a></center><div id="nav-right"><div id="search-button"><a class="search faa-parent animated-hover" title="检索站内任何你想要的信息"><svg class="faa-tada icon" style="height:24px;width:24px;fill:currentColor;position:relative;top:6px" aria-hidden="true"><use xlink:href="#icon-valentine_-search-love-find-heart"></use></svg> <span>搜索</span></a></div><a class="meihua faa-parent animated-hover" onclick="toggleWinbox()" title="美化设置-自定义你的风格" id="meihua-button"><svg class="faa-tada icon" style="height:26px;width:26px;fill:currentColor;position:relative;top:8px" aria-hidden="true"><use xlink:href="#icon-tupian1"></use></svg></a><a class="sun_moon faa-parent animated-hover" onclick="switchNightMode()" title="浅色和深色模式转换" id="nightmode-button"><svg class="faa-tada" style="height:25px;width:25px;fill:currentColor;position:relative;top:7px" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a><div id="toggle-menu"><a><i class="fas fa-bars fa-fw"></i></a></div></div></div></nav><div id="post-info"><h1 class="post-title p-name">butterfly主题添加音乐页面（适配手机）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><svg class="meta_icon post-meta-icon" style="width:30px;height:30px;position:relative;top:10px"><use xlink:href="#icon-rili"></use></svg><span class="post-meta-label">发表于</span> <time class="post-meta-date-created dt-published" datetime="2023-01-08T22:31:46.000Z" title="发表于 2023-01-08 22:31:46">2023-01-08</time><span class="post-meta-separator">|</span><svg class="meta_icon post-meta-icon" style="width:18px;height:18px;position:relative;top:5px"><use xlink:href="#icon-gengxin1"></use></svg><span class="post-meta-label">更新于</span><time class="post-meta-date-updated dt-updated" datetime="2024-12-01T12:30:43.295Z" title="更新于 2024-12-01 12:30:43">2024-12-01</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><svg class="meta_icon post-meta-icon" style="width:18px;height:18px;position:relative;top:5px"><use xlink:href="#icon-biaoqian"></use></svg><a class="post-meta-categories p-category" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><svg class="meta_icon post-meta-icon" style="width:25px;height:25px;position:relative;top:8px"><use xlink:href="#icon-charuword"></use></svg><span class="post-meta-label">字数总计:</span><span class="word-count">2941</span><span class="post-meta-separator">|</span><svg class="meta_icon post-meta-icon" style="width:20px;height:20px;position:relative;top:5px"><use xlink:href="#icon-shizhong"></use></svg><span class="post-meta-label">阅读时长:</span><span>16分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" data-flag-title="butterfly主题添加音乐页面（适配手机）"><svg class="meta_icon post-meta-icon" style="width:25px;height:25px;position:relative;top:5px"><use xlink:href="#icon-eye"></use></svg><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section></header><main class="layout" id="content-inner"><div id="post"><article class="post-content e-content" id="article-container"><h1>前言</h1><div class="note info modern"><p>本博客音乐页面已经换成了<a target="_blank" rel="noopener" href="https://anzhiy.cn/posts/c3d3.html">安知鱼大佬的方案</a></p></div><p>没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，<s>但考虑到我不会写样式（虽然我可以自学）</s> 所以我音乐页面用的是<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/3322c8a8.html">Chuckle的方案</a></p><psw>（等会为啥开头这么像<a href="https://www.chuckle.top/article/3322c8a8.html">这篇文章</a>）</psw><p>原本我是想做<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/eb3a4679.html">单页背景透明</a>的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画<br>以下是我之前的音乐页面：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" alt="msedge_x1MaJIbBQg"><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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"><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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"><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<s>但我懒得适配，于是就有了这个教程</s> ）</p><h1>教程</h1><div class="tabs" id="教程开始"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#教程开始-1">1.0</button></li><li class="tab active"><button type="button" data-href="#教程开始-2">2.0</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="教程开始-1"><div class="note info modern"><p>这个教程是我基于https://www.php.cn/xiazai/js/6169 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p></div><div class="note warning modern"><p>目前博客已经弃用这个方案，改用2.0版本</p></div>1. 新建[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>2. 在[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>3. 在[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>4. 编辑[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>5. 编辑[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>6. 将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>7. 运行`hexo new page music` 8. 编辑[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><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="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里面的内容全都替换成下面的内容），内容如下：</li></ol><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>2. 将下面压缩包内五个文件夹全都解压在[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 modern"><p>1.0想升级成2.0的，下面的步骤可以不用做</p></div>3. 编辑[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>4. 运行`hexo new page music` 5. 编辑[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><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h1>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></article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>butterfly主题添加音乐页面（适配手机）</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="https://blog.sinzmise.top/posts/22945/">https://blog.sinzmise.top/posts/22945/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>王九弦SZ·Ninty</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h>2023-01-08</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h>2024-12-01</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/"><div class="tags-punctuation"><svg class="faa-tada icon" style="height:1.1em;width:1.1em;fill:currentColor;position:relative;top:2px;margin-right:3px" aria-hidden="true"><use xlink:href="#icon-sekuaibiaoqian"></use></svg></div>站点折腾</a><a class="post-meta__tags" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/"><div class="tags-punctuation"><svg class="faa-tada icon" style="height:1.1em;width:1.1em;fill:currentColor;position:relative;top:2px;margin-right:3px" aria-hidden="true"><use xlink:href="#icon-sekuaibiaoqian"></use></svg></div>页面魔改</a></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/38964/"><img class="prev-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" onerror='onerror=null,src="/assets/r2.jpg"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div class="next-post pull-right"><a href="/posts/23021/"><img class="next-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230104/Goodbye2022.21ppwx94kqf4.webp" onerror='onerror=null,src="/assets/r2.jpg"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">再见2022，你好2023</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/10045/" title="为博客添加一个游戏收藏页（npm插件版）"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240525/fe131d7f5a6b38b23cc967316c13dae2.8dwp7xp4q5.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">为博客添加一个游戏收藏页（npm插件版）</div></div></a></div><div><a href="/posts/38964/" title="小康大佬的说说方案 ———— ispeak搭建教程"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div><a href="/posts/53662/" title="博客大更新"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/645fa3cf90d70.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">博客大更新</div></div></a></div><div><a href="/posts/16107/" title="新起点，新出发"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20221230/46348.3e004dfapae0.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">新起点，新出发</div></div></a></div><div><a href="/posts/57692/" title="Ruffle测试"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://images1.blog.sinzmise.top/images/Canvas-Ruom.7pbzp97mh.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">Ruffle测试</div></div></a></div><div><a href="/posts/28536/" title="自建不蒜子API"><img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://vip1.loli.io/2022/05/11/eKfrdV9p48IcCj5.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-12-01</div><div class="title">自建不蒜子API</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div><div id="comment-switch"><span class="first-comment">Twikoo</span><span class="switch-btn"></span><span class="second-comment">Idisqus</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div><div><input id="comment-toggle" type="checkbox" disabled> <span>加载 Disqus 原生评论框</span><div id="idisqus-container"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info h-card"><div class="bg-blur"></div><div class="author_top is-center"><div class="card-info-avatar"><div class="avatar-img"><img class="u-photo u-logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/img/avatar.png" onerror='this.onerror=null,this.src="/assets/r1.jpg"' alt="avatar"></div><div class="author-status-box"><div class="author-status"><g-emoji class="g-emoji" alias="palm_tree" fallback-src="https://lskypro.acozycotage.net/LightPicture/2022/12/fe1dc0402e623096.jpg">🐟</g-emoji><span>认真摸鱼中</span></div></div></div><br><a class="author-info__name p-name u-url" href="/" style="color:#555">王九弦SZ·Ninty</a><div class="author-info__description">The Story,The Dream.</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">43</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://www.sinzmise.top/"><span>个人主页</span><i class="faa-passing animated" style="padding-left:20px;display:inline-block;vertical-align:middle"><svg class="icon" style="height:28px;width:28px;fill:currentColor;position:relative;top:5px"><use xlink:href="#icon-xiaoqiche"></use></svg></i></a><div class="card-info-social-icons is-center"><a class="social-icon faa-parent animated-hover" href="https://github.com/SinzMise" target="_blank" rel="me" title="Github"><svg class="social_icon faa-tada" aria-hidden="true" style="width:1.15em;height:1.15em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-github"></use></svg></a><a class="social-icon faa-parent animated-hover" href="https://space.bilibili.com/479627766" target="_blank" rel="me" title="Bilibili"><svg class="social_icon faa-tada" aria-hidden="true" style="width:1.15em;height:1.15em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-bilibili"></use></svg></a><a class="social-icon faa-parent animated-hover" href="mailto:email@sinzmise.top" target="_blank" rel="me" title="Email"><svg class="social_icon faa-tada" aria-hidden="true" style="width:1.15em;height:1.15em;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-youxiang"></use></svg></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><a class="faa-parent animated-hover"><svg class="faa-tada icon" style="height:25px;width:25px;fill:currentColor;position:relative;top:5px" aria-hidden="true"><use xlink:href="#icon-gonggao"></use></svg></a><span style="font-weight:700">公告栏</span></div><div class="announcement_content"><center>果然，还是Butterfly真香</center></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><svg class="meta_icon" style="width:22px;height:22px;position:relative;top:5px"><use xlink:href="#icon-mulu1"></use></svg><span style="font-weight:700">目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">教程</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">TO DO</span></a></li></ol></div></div></div></div></main><footer id="footer" style="background-color:transparent"><div id="footer-wrap"><div id="ft"><div class="ft-item-1"><div class="t-top"><div class="t-t-l"><p class="ft-t t-l-t">格言🧬</p><div class="bg-ad"><div>再看看那个光点，它就在这里，这是家园，这是我们 —— 你所爱的每一个人，你认识的一个人，你听说过的每一个人，曾经有过的每一个人，都在它上面度过他们的一生✨</div><div class="btn-xz-box"><a class="btn-xz" target="_blank" rel="noopener" href="https://stellarium.org/">穿梭到星空之旅途</a></div></div></div><div class="t-t-r"><p class="ft-t t-l-t">猜你想看</p><ul class="ft-links"><li><a href="/tags/">文章标签</a><a href="/categories/">文章分类</a></li></ul></div></div></div><div class="ft-item-2"><p class="ft-t">推荐友链⌛</p><div class="ft-img-group"><div class="img-group-item"><a target="_blank" rel="noopener" href="https://www.fomal.cc/" title="/Fomalhaut%F0%9F%A5%9D"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://www.fomal.cc/assets/avatar.webp" alt=""></a></div></div></div></div><div class="footer_custom_text"><a href="https://www.travellings.cn/go.html" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="开往-友链接力"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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==" style="height:24px"></a><a href="https://boringbay.com" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="无聊湾 🥱 The Boring Bay"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://boringbay.com/api/badge/blog.sinzmise.top" class="lazyload" data-srcset="https://boringbay.com/api/badge/blog.sinzmise.top" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="height:24px"></a><a href="https://blogscn.fun/" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="本站已加入BLOGS·CN"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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==" style="height:24px"></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="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-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==" style="height:24px"></a><a href="https://www.blogsclub.org/go" target="_blank" title="空间穿梭-随机访问BlogsClub成员博客"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://www.blogsclub.org/images/shuttle_1.png"></a><br><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://beian.miit.cn.com/gov/search.php?query=20240818">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> | <a target="_blank" rel="noopener" href="https://www.blogsclub.org/blog/99.html">BlogsClub</a></div><div id="workboard"></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" title="博客框架为Hexo_v6.2.0"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/Frame-Hexo-blue.svg" alt=""></a><a class="github-badge" target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px" title="主题版本Butterfly_v4.3.1"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/Theme-Butterfly-6513df.svg" alt=""></a><a class="github-badge" target="_blank" href="https://pages.cloudflare.com/" style="margin-inline:5px" title="本站采用多线部署，主线路部署到Cloudflare Pages"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/HostCF.svg" alt=""></a><a class="github-badge" target="_blank" href="https://cdn.ledcdn.com/" style="margin-inline:5px" title="本站由LEDCDN提供站点加速服务"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/LEDCDN.svg" alt=""></a><a class="github-badge" target="_blank" href="https://51.la/" style="margin-inline:5px" title="本站数据分析得益于51la技术支持"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://files.blog.sinzmise.top/images/Analytics-51la-3db1eb.svg" alt=""></a><a class="github-badge" target="_blank" href="https://github.com/" style="margin-inline:5px" title="本站项目由GitHub托管"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&amp;logo=GitHub" alt=""></a><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&amp;logo=Claris" alt=""></a></p></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><a class="icon-V hidden" onclick="switchNightMode()" title="浅色和深色模式转换"><svg width="25" height="25" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button><button class="share" type="button" title="右键模式" onclick="changeMouseMode()"><i class="fas fa-mouse"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog right_side"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button class="share" type="button" title="分享链接" onclick="share()"><i class="fas fa-share-nodes"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0<span>%</span></span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight,500)"><i class="fas fa-arrow-down"></i></button></div></div><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div><link rel="stylesheet" href="https://cdnjs.cdn.storisinz.site/ajax/libs/docsearch-css/3.6.3/style.min.css"><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/docsearch-js/3.6.3/umd/index.min.js"></script><script>(()=>{docsearch(Object.assign({appId:"QAS05YI2PH",apiKey:"67ffd4c9fa1234148ec4f8b27dfdb2a7",indexName:"sinzmise",container:"#docsearch"},null));const e=()=>{document.querySelector("#search-button > .search").addEventListener("click",(()=>{document.querySelector(".DocSearch-Button").click()}))};e(),window.addEventListener("pjax:complete",e)})()</script></div><div class="js-pjax" id="rightMenu"><div class="rightMenu-group rightMenu-small"><a class="rightMenu-item" href="javascript:window.history.back();"><i class="fa fa-arrow-left"></i></a><a class="rightMenu-item" href="javascript:window.history.forward();"><i class="fa fa-arrow-right"></i></a><a class="rightMenu-item" href="javascript:window.location.reload();"><i class="fa fa-refresh"></i></a><a class="rightMenu-item" href="javascript:rmf.scrollToTop();"><i class="fa fa-arrow-up"></i></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-text"><a class="rightMenu-item" href="javascript:rmf.copySelect();"><i class="fa fa-copy"></i><span>复制</span></a><a class="rightMenu-item" href="javascript:window.open(&quot;https://bing.com/search?q=&quot;+window.getSelection().toString());window.location.reload();"><i class="fa fa-search"></i><span>必应搜索</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-too"><a class="rightMenu-item" href="javascript:window.open(window.getSelection().toString());window.location.reload();"><i class="fa fa-link"></i><span>转到链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-paste"><a class="rightMenu-item" href="javascript:rmf.paste()"><i class="fa fa-copy"></i><span>粘贴</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-post"><a class="rightMenu-item" href="#post-comment"><i class="fas fa-comment"></i><span>评论</span></a><a class="rightMenu-item" href="javascript:rmf.copyWordsLink()"><i class="fa fa-link"></i><span>复制本文地址</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-to"><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>在新窗口打开</span></a><a class="rightMenu-item" id="menu-too" href="javascript:rmf.open()"><i class="fa fa-link"></i><span>转到链接</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-img"><a class="rightMenu-item" href="javascript:rmf.saveAs()"><i class="fa fa-download"></i><span>保存图片</span></a><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>在新窗口打开</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制图片链接</span></a></div><div class="rightMenu-group rightMenu-line"><a class="rightMenu-item" href="javascript:randomPost()"><i class="fa fa-paper-plane"></i><span>随便逛逛</span></a><a class="rightMenu-item" href="javascript:switchNightMode();"><i class="fa fa-moon"></i><span>昼夜切换</span></a><a class="rightMenu-item" href="/about/"><i class="fa fa-info-circle"></i><span>关于我</span></a><a class="rightMenu-item" href="javascript:toggleWinbox();"><i class="fas fa-cog"></i><span>主题设置</span></a><a class="rightMenu-item" href="javascript:rmf.fullScreen();"><i class="fas fa-expand"></i><span>切换全屏</span></a><a class="rightMenu-item" href="javascript:window.print();"><i class="fa-solid fa-print"></i><span>打印页面</span></a></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/fancyapps-ui/4.0.31/fancybox.umd.min.js"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/instant.page/5.1.0/instantpage.min.js" type="module"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/vanilla-lazyload/17.3.1/lazyload.iife.min.js"></script><script async>var preloader={endLoading:()=>{document.body.style.overflow="auto",document.getElementById("loading-box").classList.add("loaded")},initLoading:()=>{document.body.style.overflow="",document.getElementById("loading-box").classList.remove("loaded")}};window.addEventListener("load",preloader.endLoading()),setTimeout((function(){preloader.endLoading()}),5e3),document.getElementById("loading-box").addEventListener("click",(()=>{preloader.endLoading()}))</script><div class="js-pjax"><script>(()=>{const t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://tk.pl.blog.sinzmise.top/",region:"",onCommentLoaded:function(){btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null))},o=()=>{"object"!=typeof twikoo?getScript("https://cdnjs.cdn.storisinz.site/ajax/libs/twikoo/1.6.40/twikoo.all.min.js").then(t):setTimeout(t,0)};btf.loadComment(document.getElementById("twikoo-wrap"),o)})()</script><script>function loadiDisqus(){function i(){new iDisqus("idisqus-container",{api:"https://idq.pl.blog.sinzmise.top/blog/zh",forum:"cetahousezh",mode:3,toggle:"comment-toggle",site:"https://blog.sinzmise.top",init:!0})}"function"==typeof iDisqus?i():(!function(){const i=document.createElement("link");i.rel="stylesheet",i.href="https://idq.pl.blog.sinzmise.top/dist/iDisqus.min.css",document.head.appendChild(i)}(),getScript("https://idq.pl.blog.sinzmise.top/dist/iDisqus.min.js").then(i))}{function loadOtherComment(){loadiDisqus()}}</script></div><script async data-pjax src="/bbs/bbs.js"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/jquery/3.6.3/jquery.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/axios/dist/axios.min.js"></script><script>var meting_api="https://meting.api.sinzmise.eu.org/api?server=:server&type=:type&id=:id&auth=:auth&r=:r"</script><script async src="https://jsd.cdn.storisinz.site/npm/vue@2.6.14/dist/vue.min.js"></script><script async src="https://jsd.cdn.storisinz.site/npm/element-ui@2.15.6/lib/index.js"></script><script async src="https://cdnjs.cdn.storisinz.site/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script><script defer src="https://jsd.cdn.storisinz.site/npm/sweetalert2@8.19.0/dist/sweetalert2.all.js"></script><script async src="https://jsd.cdn.storisinz.site/npm/pace-js@1.2.4/pace.min.js"></script><script defer src="https://jsd.cdn.storisinz.site/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script><script async src="//at.alicdn.com/t/c/font_3586335_hsivh70x0fm.js"></script><script async src="//at.alicdn.com/t/c/font_3636804_gr02jmjr3y9.js"></script><script async src="//at.alicdn.com/t/c/font_3612150_kfv55xn3u2g.js"></script><script async src="//at.alicdn.com/t/c/font_4199232_qgf79nv3qb8.js"></script><script async src="/js/Gold-ingot.js"></script><canvas id="universe"></canvas><canvas id="snow"></canvas><script defer src="/js/fomal.js"></script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/aplayer/dist/APlayer.min.css" media="print" onload='this.media="all"'><script src="https://jsd.cdn.storisinz.site/npm/aplayer/dist/APlayer.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/meting/dist/Meting.min.js"></script><script src="https://cdnjs.cdn.storisinz.site/ajax/libs/pjax/0.2.8/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show","#web_bg",".js-pjax","#bibi","body > title","#app","#tag-echarts","#posts-echart","#categories-echarts"];var pjax=new Pjax({elements:'a:not([target="_blank"]):not([href="/bbs/"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!0,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(window.tocScrollFn&&window.removeEventListener("scroll",window.tocScrollFn),window.scrollCollect&&window.removeEventListener("scroll",scrollCollect),"object"==typeof preloader&&preloader.initLoading(),document.getElementById("rightside").style.cssText="opacity: ''; transform: ''",window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),"object"==typeof disqusjs&&disqusjs.destroy()})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof chatBtnFn&&chatBtnFn(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","G-7MR59SK1DP",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll(),"object"==typeof preloader&&preloader.endLoading()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><script async data-pjax src="https://jsd.cdn.storisinz.site/npm/penndu@16.0.0/bsz.js"></script></div><script data-pjax>function butterfly_swiper_injector_config(){var s=document.getElementById("recent-posts");console.log("已挂载butterfly_swiper"),s.insertAdjacentHTML("afterbegin",'<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/61417/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230128/30165599-36623bea-93a6-11e7-8956-1ddf99ce0e6f.2rbu2i9xfvy0.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-01-19</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/61417/&quot;);" href="javascript:void(0);" alt="">自建Meting服务</a><div class="blog-slider__text">Meting官方API用不了了，所以。。。。。</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/61417/&quot;);" href="javascript:void(0);" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/54481/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/R-C.7iu7u13vibs0.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-03-12</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/54481/&quot;);" href="javascript:void(0);" alt="">千千静听复活教程</a><div class="blog-slider__text">中考尚未结束就来更新的屑</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/54481/&quot;);" href="javascript:void(0);" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/38964/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-01-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/38964/&quot;);" href="javascript:void(0);" alt="">小康大佬的说说方案 ———— ispeak搭建教程</a><div class="blog-slider__text">这篇文章是我之前写过的教程的重写</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/38964/&quot;);" href="javascript:void(0);" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/22945/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-01-08</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/22945/&quot;);" href="javascript:void(0);" alt="">butterfly主题添加音乐页面（适配手机）</a><div class="blog-slider__text">原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/22945/&quot;);" href="javascript:void(0);" alt="">详情 </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>')}for(var elist="undefined".split(","),cpage=location.pathname,epage="/",flag=0,i=0;i<elist.length;i++)cpage.includes(elist[i])&&flag++;("all"===epage&&0==flag||epage===cpage)&&butterfly_swiper_injector_config()</script><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-swiper/lib/swiper_init.js"></script><div class="js-pjax"><script async>for(var arr=document.getElementsByClassName("recent-post-item"),i=0;i<arr.length;i++)arr[i].classList.add("wow"),arr[i].classList.add("animate__zoomIn"),arr[i].setAttribute("data-wow-duration","2s"),arr[i].setAttribute("data-wow-delay","200ms"),arr[i].setAttribute("data-wow-offset","30"),arr[i].setAttribute("data-wow-iteration","1")</script><script async>for(var arr=document.getElementsByClassName("card-widget"),i=0;i<arr.length;i++)arr[i].classList.add("wow"),arr[i].classList.add("animate__zoomIn"),arr[i].setAttribute("data-wow-duration","2s"),arr[i].setAttribute("data-wow-delay","200ms"),arr[i].setAttribute("data-wow-offset","30"),arr[i].setAttribute("data-wow-iteration","1")</script></div><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/wow_init.js"></script><script data-pjax src="https://jsd.cdn.storisinz.site/npm/hexo-filter-gitcalendar/lib/gitcalendar.js"></script><script data-pjax>function gitcalendar_injector_config(){document.getElementById("gitZone").insertAdjacentHTML("afterbegin",'<div class="recent-post-item" id="gitcalendarBar" style="width:100%;height:auto;padding:10px;"><style>#git_container{min-height: 320px}@media screen and (max-width:650px) {#git_container{min-height: 0px}}</style><div id="git_loading" style="width:10%;height:100%;margin:0 auto;display: block;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animatetransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animatetransform></path></svg><style>#git_container{display: none;}</style></div><div id="git_container"></div></div>'),console.log("已挂载gitcalendar")}document.getElementById("gitZone")&&"/site/census/"===location.pathname&&(gitcalendar_injector_config(),GitCalendarInit("/api?null",["#d9e0df","#c6e0dc","#a8dcd4","#9adcd2","#89ded1","#77e0d0","#5fdecb","#47dcc6","#39dcc3","#1fdabe","#00dab9"],"null"))</script><script data-pjax src="https://jsd.cdn.storisinz.site/npm/oh-my-live2d"></script><script>const oml2d=OML2D.loadOml2d({menus:{items:o=>[{id:"home",icon:"fa fa-house",title:"我的个人主页",onClick:()=>window.open("https://www.sinzmise.top/")},o[0],o[2],o[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(--theme-color)",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(o){return o.data.hitokoto})).catch((function(o){console.error(o)}))}}}})</script></body></html>