sinzmise-cetastories 2.0.0-1729391679277 → 2.0.0-1729391855695

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 (120) hide show
  1. package/404/index.html +1 -1
  2. package/about/index.html +1 -1
  3. package/album/index.html +1 -1
  4. package/archives/2021/12/index.html +1 -1
  5. package/archives/2021/index.html +1 -1
  6. package/archives/2022/12/index.html +1 -1
  7. package/archives/2022/index.html +1 -1
  8. package/archives/2023/01/index.html +1 -1
  9. package/archives/2023/02/index.html +1 -1
  10. package/archives/2023/03/index.html +1 -1
  11. package/archives/2023/04/index.html +1 -1
  12. package/archives/2023/07/index.html +1 -1
  13. package/archives/2023/08/index.html +1 -1
  14. package/archives/2023/09/index.html +1 -1
  15. package/archives/2023/10/index.html +1 -1
  16. package/archives/2023/11/index.html +1 -1
  17. package/archives/2023/12/index.html +1 -1
  18. package/archives/2023/index.html +1 -1
  19. package/archives/2023/page/2/index.html +1 -1
  20. package/archives/2023/page/3/index.html +1 -1
  21. package/archives/2024/01/index.html +1 -1
  22. package/archives/2024/02/index.html +1 -1
  23. package/archives/2024/03/index.html +1 -1
  24. package/archives/2024/04/index.html +1 -1
  25. package/archives/2024/05/index.html +1 -1
  26. package/archives/2024/06/index.html +1 -1
  27. package/archives/2024/07/index.html +1 -1
  28. package/archives/2024/08/index.html +1 -1
  29. package/archives/2024/09/index.html +1 -1
  30. package/archives/2024/10/index.html +1 -1
  31. package/archives/2024/index.html +1 -1
  32. package/archives/2024/page/2/index.html +1 -1
  33. package/archives/index.html +1 -1
  34. package/archives/page/2/index.html +1 -1
  35. package/archives/page/3/index.html +1 -1
  36. package/archives/page/4/index.html +1 -1
  37. package/atom.xml +31 -31
  38. package/bbs/bbs.html +1 -1
  39. package/bbs/index.html +1 -1
  40. package/categories/index.html +1 -1
  41. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  42. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  43. package/categories//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  44. package/categories//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  45. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  46. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  47. package/categories//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  48. package/charts/index.html +1 -1
  49. package/comments/index.html +1 -1
  50. package/essay/index.html +1 -1
  51. package/fcircle/index.html +1 -1
  52. package/games +1 -1
  53. package/index.html +1 -1
  54. package/link/index.html +1 -1
  55. package/music/index.html +1 -1
  56. package/package.json +1 -1
  57. package/page/2/index.html +1 -1
  58. package/page/3/index.html +1 -1
  59. package/page/4/index.html +1 -1
  60. package/posts/10021/index.html +1 -1
  61. package/posts/10045/index.html +1 -1
  62. package/posts/10733/index.html +1 -1
  63. package/posts/10996/index.html +1 -1
  64. package/posts/12779/index.html +1 -1
  65. package/posts/13624/index.html +1 -1
  66. package/posts/15688/index.html +1 -1
  67. package/posts/15748/index.html +1 -1
  68. package/posts/15799/index.html +1 -1
  69. package/posts/15842/index.html +1 -1
  70. package/posts/16107/index.html +1 -1
  71. package/posts/18063/index.html +1 -1
  72. package/posts/20412/index.html +1 -1
  73. package/posts/21375/index.html +1 -1
  74. package/posts/22945/index.html +1 -1
  75. package/posts/23021/index.html +1 -1
  76. package/posts/27531/index.html +1 -1
  77. package/posts/28536/index.html +1 -1
  78. package/posts/28733/index.html +1 -1
  79. package/posts/29196/index.html +1 -1
  80. package/posts/38917/index.html +1 -1
  81. package/posts/38964/index.html +1 -1
  82. package/posts/42487/index.html +1 -1
  83. package/posts/42580/index.html +1 -1
  84. package/posts/45875/index.html +1 -1
  85. package/posts/46640/index.html +1 -1
  86. package/posts/48762/index.html +1 -1
  87. package/posts/50710/index.html +1 -1
  88. package/posts/52677/index.html +1 -1
  89. package/posts/53662/index.html +1 -1
  90. package/posts/54386/index.html +1 -1
  91. package/posts/54481/index.html +1 -1
  92. package/posts/54787/index.html +1 -1
  93. package/posts/56467/index.html +1 -1
  94. package/posts/57692/index.html +1 -1
  95. package/posts/58203/index.html +1 -1
  96. package/posts/61417/index.html +1 -1
  97. package/posts/646/index.html +1 -1
  98. package/posts/64856/index.html +1 -1
  99. package/posts/64935/index.html +1 -1
  100. package/search.xml +17 -17
  101. package/seas/index.html +1 -1
  102. package/tags/Flash/347/233/270/345/205/263/index.html +1 -1
  103. package/tags/Steam/346/270/270/346/210/217/index.html +1 -1
  104. package/tags/Windows/350/275/257/344/273/266/index.html +1 -1
  105. package/tags/index.html +1 -1
  106. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  107. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  108. package/tags//345/205/266/345/256/203/346/270/270/346/210/217/index.html +1 -1
  109. package/tags//345/212/240/350/275/275/345/212/250/347/224/273/index.html +1 -1
  110. 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
  111. package/tags//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  112. package/tags//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  113. package/tags//347/253/231/347/202/271/345/272/225/351/203/250/351/255/224/346/224/271/index.html +1 -1
  114. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  115. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  116. package/tags//350/207/252/345/273/272/351/203/250/347/275/262/index.html +1 -1
  117. package/tags//351/241/265/351/235/242/351/255/224/346/224/271/index.html +1 -1
  118. package/tags//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  119. package/update/index.html +1 -1
  120. package/weichuncai/chuncai.json +1 -1
package/posts/22945/index.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html lang="zh-Hans"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="x5-fullscreen" content="true"><meta name="full-screen" content="yes"><meta name="theme-color" content="#317EFB"><meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport"><meta name="description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:type" content="article"><meta property="og:title" content="butterfly主题添加音乐页面（适配手机）"><meta property="og:url" content="https://blog.sinzmise.top/posts/22945/"><meta property="og:site_name" content="汐塔魔法屋"><meta property="og:description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="article:published_time" content="2023-01-08T22:31:46.000Z"><meta property="article:modified_time" content="2024-10-20T02:34:00.382Z"><meta property="article:author" content="王九弦SZ·Ninty"><meta property="article:tag" content="站点折腾"><meta property="article:tag" content="页面魔改"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://blog.sinzmise.top/img/404.jpg"><title>butterfly主题添加音乐页面（适配手机）</title><link href="/images/siteicon/favicon-16x16.png?v=2.2.3" rel="icon" type="image/png" sizes="16x16"><link href="/images/siteicon/favicon-32x32.png?v=2.2.3" rel="icon" type="image/png" sizes="32x32"><link href="/images/siteicon/apple-touch-icon.png?v=2.2.3" rel="apple-touch-icon" sizes="180x180"><link href="/manifest.json" rel="manifest"><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="stylesheet" href="/css/plugins/bootstrap.row.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0/dist/fancybox.css"><script src="https://jsd.cdn.storisinz.site/npm/jquery/dist/jquery.min.js"></script><link rel="stylesheet" href="/css/plugins/font-awesome.min.css"><script>window.ASYNC_CONFIG={hostname:"blog.sinzmise.top",author:"王九弦SZ·Ninty",root:"/",typed_text:null,theme_version:"2.2.3",theme:{switch:!0,default:"auto"},favicon:{logo:"/images/siteicon/favicon.ico",icon16:"/images/siteicon/favicon-16x16.png",icon32:"/images/siteicon/favicon-32x32.png",apple_touch_icon:"/images/siteicon/apple-touch-icon.png",webmanifest:"/manifest.json",visibilitychange:!0,hidden:"/images/siteicon/favicon.ico",show_text:"那人却在，灯火阑珊处",hide_text:"众里寻他千百度，蓦然回首"},i18n:{placeholder:"搜索文章...",empty:"找不到您查询的内容: ${query}",hits:"找到 ${hits} 条结果",hits_time:"找到 ${hits} 条结果（用时 ${time} 毫秒）",author:"本文作者：",copyright_link:"本文链接：",copyright_license_title:"版权声明：",copyright_license_content:"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。",copy_success:"复制成功",copy_failure:"复制失败",open_read_mode:"进入阅读模式",exit_read_mode:"退出阅读模式",notice_outdate_message:"距离上次更新已经 undefined 天了, 文章内容可能已经过时。",sticky:"置顶",just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},swup:!0,plugin:{flickr_justified_gallery:"https://jsd.cdn.storisinz.site/npm/flickr-justified-gallery@latest/dist/fjGallery.min.js"},icons:{sun:"far fa-sun",moon:"far fa-moon",play:"fas fa-play",email:"far fa-envelope",next:"fas fa-arrow-right",calendar:"far fa-calendar-alt",clock:"far fa-clock",user:"far fa-user",back_top:"fas fa-arrow-up",close:"fas fa-times",search:"fas fa-search",reward:"fas fa-hand-holding-usd",toc_tag:"fas fa-th-list",read:"fas fa-book-reader",arrows:"fas fa-arrows-alt-h",double_arrows:"fas fa-angle-double-down",copy:"fas fa-copy"},icontype:"font",highlight:{plugin:"highlighjs",theme:!0,copy:!0,lang:!0,title:"default",height_limit:!1},toc:{post_title:!0},live_time:{start_time:"12/17/2021 14:53:00",prefix:"这个魔法屋已经经历了 undefined 天的故事"},danmu:{enable:!0,el:".trm-banner"}}</script><script id="async-page-config">window.PAGE_CONFIG={isPost:!0,isHome:!1,postUpdate:"2024-10-20 02:34:00"}</script><link data-swup-theme rel="stylesheet" href="/css/index.css?v=2.2.3" id="trm-switch-style"><script>let defaultMode="auto"!==ASYNC_CONFIG.theme.default?ASYNC_CONFIG.theme.default:window.matchMedia("(prefers-color-scheme: light)").matches?"style-light":"style-dark",catchMode=localStorage.getItem("theme-mode")||defaultMode,type="style-dark"===catchMode?"add":"remove";document.documentElement.classList[type]("dark")</script><link data-swup-theme rel="stylesheet" href="/css/tags.css"><link data-swup-theme rel="stylesheet" href="/css/custom2.css"><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"></head><body><div class="trm-app-frame"><div class="trm-preloader"><div class="trm-holder"><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="trm-mode-swich-animation-frame"><div class="trm-mode-swich-animation"><i class="i-sun"><i class="iconfont far fa-sun"></i></i><div class="trm-horizon"></div><i class="i-moon"><i class="iconfont far fa-moon"></i></i></div></div><div id="trm-dynamic-content" class="trm-swup-animation"><div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0"><header class="trm-top-bar"><div class="container"><div class="trm-left-side"><a href="/" class="trm-logo-frame trm-anima-link"><img alt="logo" src="/images/siteicon/favicon.ico"><div class="trm-logo-text">汐塔<span>魔法屋</span></div></a></div><div class="trm-right-side"><div class="trm-menu"><nav><ul><li class="menu-item-has-children"><a href="#" target="">站点</a><ul><li><a href="/archives/" target="">归档</a></li><li><a href="/categories/" target="">分类</a></li><li><a href="/tags/" target="">标签</a></li></ul></li><li class="menu-item-has-children"><a href="#" target="">友链</a><ul><li><a href="/link/" target="">友人帐</a></li><li><a href="/comments/" target="">留言板</a></li></ul></li><li class="menu-item-has-children"><a href="#" target="">关于</a><ul><li><a href="/games/" target="">游戏库</a></li></ul></li><li class="menu-item-has-children"><a href="https://www.travellings.cn/go.html" target="_blank">开往</a></li></ul></nav></div><div class="trm-mode-switcher-place"><div class="trm-mode-switcher"><i class="iconfont far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"><label class="trm-swich" for="trm-swich"></label><i class="iconfont far fa-moon"></i></div></div><div id="trm-search-btn" class="trm-search-btn"><i class="iconfont fas fa-search"></i></div></div><div class="trm-menu-btn"><span></span></div></div></header><div class="trm-content-start h-entry"><div class="trm-banner"><img style="object-position:top;object-fit:cover" alt="banner" class="trm-banner-cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><div class="trm-banner-content trm-overlay"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-8"><div class="trm-banner-text"><div class="trm-label trm-mb-20">NEWS LETTER</div><h1 class="trm-mb-30 trm-hsmb-font p-name">butterfly主题添加音乐页面（适配手机）</h1><ul class="trm-breadcrumbs trm-label"><li><a href="/" class="trm-anima-link">Home</a></li><li><span>posts</span></li></ul></div><span id="scroll-triger" class="trm-scroll-hint-frame"><div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></span></div></div></div></div></div><div class="container"><div class="row"><div class="trm-page-sidebar col-lg-4 hidden-sm"><div class="trm-main-card-frame trm-sidebar"><div class="trm-main-card h-card"><div class="trm-mc-header"><div class="trm-avatar-frame trm-mb-20"><img alt="Avatar" class="trm-avatar u-photo" src="/img/avatar.png"></div><h5 class="trm-name trm-mb-15 p-name">王九弦SZ·Ninty</h5></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="trm-social"><a href="/atom.xml" title="RSS" rel="me" target="_blank" class="u-url"><i class="iconfont fas fa-rss"></i></a><a href="https://github.com/SinzMise" title="Github" rel="me" target="_blank" class="u-url"><i class="iconfont fab fa-github"></i></a></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><ul class="trm-table trm-mb-20"><li><div class="trm-label">邮件:</div><div class="trm-label trm-label-light u-email">email@sinzmise.top</div></li><li><div class="trm-label">省份:</div><div class="trm-label trm-label-light p-region">广东</div></li><li><div class="trm-label">城市:</div><div class="trm-label trm-label-light p-locality">潮州</div></li></ul><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="text-center"><a href="mailto:email@sinzmise.top" class="trm-btn">联系我<i class="iconfont far fa-envelope"></i></a></div></div></div></div><div class="trm-page-content col-lg-8"><div id="trm-content" class="trm-content"><div class="trm-post-info row hidden-sm"><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-calendar-alt trm-icon"></i><br>01/08</div></div><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-clock trm-icon"></i><br>22:31</div></div><div class="col-sm-4"><div id="post-author" class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-user trm-icon"></i><br><a href="https://blog.sinzmise.top" class="p-author h-card">王九弦SZ·Ninty</a></div></div></div><div class="trm-card"><article id="article-container" class="trm-publication e-content"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><div class="trm-note info"><div class="trm-note-title">INFO</div><p>本博客已经更换主题</p></div><p>没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，<del>但考虑到我不会写样式（虽然我可以自学）</del> 所以我音乐页面用的是<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/3322c8a8.html">Chuckle的方案</a><br><psw>（等会为啥开头这么像<a href="https://www.chuckle.top/article/3322c8a8.html">这篇文章</a>）</psw><br>原本我是想做<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/eb3a4679.html">单页背景透明</a>的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画<br>以下是我之前的音乐页面：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" alt="msedge_x1MaJIbBQg" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-09-59-57-499_com.2sej4yl2vuw0.webp" alt="Screenshot_2023-01-09-09-59-57-499_com" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-10-02-41-554_com.6tcc3lty2uo0.webp" alt="Screenshot_2023-01-09-10-02-41-554_com" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<del>但我懒得适配，于是就有了这个教程</del> ）</p><h1 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h1><div class="trm-tabs" id="教程开始"><ul class="trm-nav-tabs"><li class="trm-tab"><button type="button" data-href="#教程开始-1">1.0</button></li><li class="trm-tab active"><button type="button" data-href="#教程开始-2">2.0</button></li></ul><div class="trm-tab-contents"><div class="trm-tab-item-content" id="教程开始-1"><p></p><div class="trm-note info"><div class="trm-note-title">INFO</div><p>这个教程是我基于<a target="_blank" rel="noopener" href="https://www.php.cn/xiazai/js/6169">https://www.php.cn/xiazai/js/6169</a> 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p><br>&lt;/div&gt;<p></p><p></p><div class="trm-note warning"><div class="trm-note-title">WARNING</div><p>目前博客已经弃用这个方案，改用2.0版本</p><br>&lt;/div&gt;<p></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug，内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">link(rel=&#x27;stylesheet&#x27; href=&#x27;/css/musics.css&#x27;)</span><br><span class="line">.player</span><br><span class="line"> .player__header</span><br><span class="line"> .player__img.player__img--absolute.slider</span><br><span class="line"> button.player__button.player__button--absolute--nw.playlist</span><br><span class="line"> img(src=&#x27;/svg/playlist.svg&#x27;, alt=&#x27;playlist-icon&#x27;)</span><br><span class="line"> button.player__button.player__button--absolute--center.play</span><br><span class="line"> img(src=&#x27;/svg/play.svg&#x27;, alt=&#x27;play-icon&#x27;)</span><br><span class="line"> img(src=&#x27;/svg/pause.svg&#x27;, alt=&#x27;pause-icon&#x27;)</span><br><span class="line"> .slider__content</span><br><span class="line"> each item in theme.musicplayer.musics</span><br><span class="line"> img.img.slider__img(src=item.image, alt=&#x27;cover&#x27;)</span><br><span class="line"> .player__controls</span><br><span class="line"> button.player__button.back</span><br><span class="line"> img.img(src=&#x27;/svg/back.svg&#x27;, alt=&#x27;back-icon&#x27;)</span><br><span class="line"> p.player__context.slider__context</span><br><span class="line"> strong.slider__title</span><br><span class="line"> span.slider__name.player__title</span><br><span class="line"> button.player__button.next</span><br><span class="line"> img.img(src=&#x27;/svg/next.svg&#x27;, alt=&#x27;next-icon&#x27;)</span><br><span class="line"> .progres</span><br><span class="line"> .progres__filled</span><br><span class="line"> ul.player__playlist.list</span><br><span class="line"> each musics in theme.musicplayer.musics</span><br><span class="line"> li.player__song</span><br><span class="line"> img.player__img.img(src=musics.image, alt=&#x27;cover&#x27;)</span><br><span class="line"> p.player__context</span><br><span class="line"> b.player__song-name=musics.name</span><br><span class="line"> span.flex</span><br><span class="line"> span.player__title=musics.author</span><br><span class="line"> span.player__song-time</span><br><span class="line"> audio.audio(src=musics.url)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> p#hitokoto</span><br><span class="line"> a#hitokoto_text(href=&quot;#&quot;,target=&quot;_blank&quot;) :D 获取中...</span><br><span class="line">script(src=&#x27;/js/player.js&#x27;)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch(&#x27;https://v1.hitokoto.cn&#x27;)</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; &#123;</span><br><span class="line"> const hitokoto = document.querySelector(&#x27;#hitokoto_text&#x27;)</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=$&#123;data.uuid&#125;`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + &quot; —— &quot; + data.creator + &quot;「&quot; + data.from + &quot;」&quot;</span><br><span class="line"> &#125;)</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></table></figure></div></details></li><li>在[blogroot]\themes\butterfly\source\css\目录下新建musics.css,内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br></pre></td><td class="code"><pre><span class="line">::root &#123;</span><br><span class="line"> <span class="attr">--parent-height</span> : <span class="number">20em</span> ;</span><br><span class="line"> <span class="attr">--duration</span>: <span class="number">1s</span> ;</span><br><span class="line"> <span class="attr">--duration-text-wrap</span>: <span class="number">12s</span> <span class="number">1.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.82</span>, <span class="number">0.82</span>, <span class="number">1</span>, <span class="number">1.01</span>) ;</span><br><span class="line"> <span class="attr">--cubic-header</span>: <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0.71</span>, <span class="number">0.21</span>, <span class="number">0.3</span>, <span class="number">0.95</span>) ;</span><br><span class="line"> <span class="attr">--cubic-slider</span> : <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0.4</span>, <span class="number">0</span>, <span class="number">0.2</span>, <span class="number">1</span>) ;</span><br><span class="line"> <span class="attr">--cubic-play-list</span> : .<span class="number">35s</span> <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0</span>, <span class="number">0.85</span>, <span class="number">0.11</span>, <span class="number">1.64</span>) ;</span><br><span class="line"> <span class="attr">--cubic-slider-context</span> : <span class="built_in">cubic-bezier</span>(<span class="number">1</span>, -<span class="number">0.01</span>, <span class="number">1</span>, <span class="number">1.01</span>) ; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.img</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: block ;</span><br><span class="line"> <span class="attribute">object-fit</span>: cover ;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.list</span> &#123;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">list-style-type</span>: none ;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flex</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">justify-content</span>: space-between ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.uppercase</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">text-transform</span>: uppercase ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">17.15em</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">1.22em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1.35em</span> ;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column ;</span><br><span class="line"> <span class="attribute">background-color</span>: white ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="built_in">var</span>(--parent-height) ;</span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">0</span> auto ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">1</span> ;</span><br><span class="line"> <span class="attribute">gap</span>: <span class="number">0</span> .<span class="number">4em</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">5.85em</span> ;</span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">align-items</span>: flex-start ;</span><br><span class="line"> <span class="attribute">border-radius</span>: inherit ;</span><br><span class="line"> <span class="attribute">justify-content</span>: flex-end ;</span><br><span class="line"> <span class="attribute">background-color</span>: white ;</span><br><span class="line"> <span class="attribute">padding</span>: .<span class="number">95em</span> <span class="number">0.6em</span> <span class="number">0</span> <span class="number">1.2em</span> ;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">6px</span> <span class="number">1px</span> <span class="number">#0000001f</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: height <span class="built_in">var</span>(--cubic-header), box-shadow <span class="built_in">var</span>(--duration), padding <span class="built_in">var</span>(--duration) ease-in-out ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span><span class="selector-class">.open-header</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">box-shadow</span>: unset ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">3.2em</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">3.2em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1.32em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img--absolute</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">1.4em</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">1.2em</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header), height <span class="built_in">var</span>(--cubic-header), top <span class="built_in">var</span>(--cubic-header), left <span class="built_in">var</span>(--cubic-header);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">14.6em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__content</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-slider);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__img</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">75%</span>) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__name</span>, </span><br><span class="line"><span class="selector-class">.slider__title</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.text-wrap</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: block ;</span><br><span class="line"> <span class="attribute">white-space</span>: pre ;</span><br><span class="line"> <span class="attribute">width</span>: fit-content ;</span><br><span class="line"> <span class="attribute">animation</span>: text-wrap <span class="built_in">var</span>(--duration-text-wrap) infinite ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> text-wrap &#123;</span><br><span class="line"></span><br><span class="line"> <span class="number">75%</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">51.5%</span>, <span class="number">0</span>, <span class="number">0</span>) ;</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="number">100%</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">51.5%</span>, <span class="number">0</span>, <span class="number">0</span>) ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">all</span>: unset ;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">100</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">2.5em</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">2.5em</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>) ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">calc</span>(<span class="built_in">var</span>(--duration) / <span class="number">2</span>) ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span> <span class="selector-class">.playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>) ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-play-list) ;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--nw</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">top</span>: <span class="number">5.5%</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">5.5%</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--center</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">margin</span>: auto ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[alt =<span class="string">&quot;pause-icon&quot;</span>]</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: none ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">77%</span> ;</span><br><span class="line"> <span class="attribute">gap</span>: .<span class="number">5em</span> <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">flex-wrap</span>: wrap ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">will-change</span>: contents ;</span><br><span class="line"> <span class="attribute">align-content</span>: center ;</span><br><span class="line"> <span class="attribute">justify-content</span>: center ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-header) , width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">88%</span> ;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">1.1em</span> , <span class="built_in">calc</span>(<span class="built_in">var</span>(--parent-height) - <span class="number">153%</span>) , <span class="number">0</span>) ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.8</span> ;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column ;</span><br><span class="line"> <span class="attribute">justify-content</span>: center ;</span><br><span class="line"> <span class="attribute">text-transform</span>: capitalize ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">56.28%</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">text-align</span>: center ;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: .<span class="number">2em</span> ;</span><br><span class="line"> <span class="attribute">will-change</span>: contents ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"> <span class="attribute">animation</span>: <span class="built_in">calc</span>(<span class="built_in">var</span>(--duration) / <span class="number">2</span>) <span class="built_in">var</span>(--cubic-slider-context) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> opacity &#123;</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="number">0%</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0</span> ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="number">90%</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">1</span> ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> <span class="selector-class">.slider__context</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">49.48%</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__title</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">7em</span> ;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold ;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#00000086</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">90%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: .<span class="number">25em</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1em</span> ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#e5e7ea</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> <span class="selector-class">.progres</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">98%</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">position</span>: relative ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">border-radius</span>: inherit ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#78adfe</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: .<span class="number">35em</span> ;</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">&quot; &quot;</span> ;</span><br><span class="line"> <span class="attribute">height</span>: .<span class="number">35em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#5781bd</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">overflow</span>: auto ; </span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">1.05em</span> .<span class="number">9em</span> <span class="number">0</span> <span class="number">1.2em</span> ; </span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span>::-webkit-scrollbar &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> &#123;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* gap: 0 .65em ; */</span></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: .<span class="number">5em</span> ;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: .<span class="number">7em</span> ;</span><br><span class="line"> <span class="attribute">border-bottom</span>: .<span class="number">1em</span> solid <span class="number">#d8d8d859</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> <span class="selector-class">.player__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.5</span> ;</span><br><span class="line"> <span class="attribute">margin-left</span>: .<span class="number">65em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-name</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">88em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-time</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">65em</span> ;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold ;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#00000079</span> ; </span><br><span class="line"> <span class="attribute">height</span>: fit-content ;</span><br><span class="line"> <span class="attribute">align-self</span>: flex-end ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.audio</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: none <span class="meta">!important</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.player__song-name</span>,<span class="selector-class">.slider__title</span>&#123;</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#000</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#hitokoto</span>&#123;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div></details></li><li>在[blogroot]\themes\butterfly\source\js\目录下新建player.js,内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Designed by: Mauricio Bucardo</span></span><br><span class="line"><span class="comment">// Original image: https://dribbble.com/shots/6957353-Music-Player-Widget</span></span><br><span class="line"><span class="meta"></span></span><br><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// add elemnts</span></span><br><span class="line"><span class="keyword">const</span> bgBody = [<span class="string">&quot;#e5e7e9&quot;</span>, <span class="string">&quot;#ff4545&quot;</span>, <span class="string">&quot;#f8ded3&quot;</span>, <span class="string">&quot;#ffc382&quot;</span>, <span class="string">&quot;#f5eda6&quot;</span>, <span class="string">&quot;#ffcbdc&quot;</span>, <span class="string">&quot;#dcf3f3&quot;</span>];</span><br><span class="line"><span class="keyword">const</span> body = <span class="variable language_">document</span>.<span class="property">body</span>;</span><br><span class="line"><span class="keyword">const</span> player = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.player&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerHeader = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.player__header&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerControls = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.player__controls&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerPlayList = player.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;.player__song&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerSongs = player.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;.audio&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.play&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> nextButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.next&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> backButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.back&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playlistButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.playlist&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> slider = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContext = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__context&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderName = sliderContext.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__name&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderTitle = sliderContext.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__title&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContent = slider.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__content&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContentLength = playerPlayList.<span class="property">length</span> - <span class="number">1</span>;</span><br><span class="line"><span class="keyword">const</span> sliderWidth = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">let</span> left = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> song = playerSongs[count];</span><br><span class="line"><span class="keyword">let</span> isPlay = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">const</span> pauseIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">&quot;img[alt = &#x27;pause-icon&#x27;]&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">&quot;img[alt = &#x27;play-icon&#x27;]&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> progres = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.progres&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> progresFilled = progres.<span class="title function_">querySelector</span>(<span class="string">&quot;.progres__filled&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> isMove = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// creat functions</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">openPlayer</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> playerHeader.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;open-header&quot;</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;move&quot;</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;open-slider&quot;</span>);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">closePlayer</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> playerHeader.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;open-header&quot;</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;move&quot;</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;open-slider&quot;</span>);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">next</span>(<span class="params"></span>) &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength) &#123;</span><br><span class="line"> count = count;</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> left += sliderWidth;</span><br><span class="line"> left = <span class="title class_">Math</span>.<span class="title function_">min</span>(left, (sliderContentLength) * sliderWidth);</span><br><span class="line"> sliderContent.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">`translate3d(-<span class="subst">$&#123;left&#125;</span>%, 0, 0)`</span>;</span><br><span class="line"> count++;</span><br><span class="line"></span><br><span class="line"> <span class="title function_">changeSliderContext</span>();</span><br><span class="line"> <span class="title function_">changeBgBody</span>();</span><br><span class="line"> <span class="title function_">selectSong</span>();</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">back</span>(<span class="params"></span>) &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == <span class="number">0</span>) &#123;</span><br><span class="line"> count = count</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> left -= sliderWidth;</span><br><span class="line"> left = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, left);</span><br><span class="line"> sliderContent.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">`translate3d(-<span class="subst">$&#123;left&#125;</span>%, 0, 0)`</span>;</span><br><span class="line"> count--;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeSliderContext</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> = <span class="string">&quot;opacity&quot;</span>;</span><br><span class="line"> </span><br><span class="line"> sliderName.<span class="property">textContent</span> = playerPlayList[count].<span class="title function_">querySelector</span>(<span class="string">&quot;.player__title&quot;</span>).<span class="property">textContent</span>;</span><br><span class="line"> sliderTitle.<span class="property">textContent</span> = playerPlayList[count].<span class="title function_">querySelector</span>(<span class="string">&quot;.player__song-name&quot;</span>).<span class="property">textContent</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (sliderName.<span class="property">textContent</span>.<span class="property">length</span> &gt; <span class="number">16</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> textWrap = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;span&quot;</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">&quot;text-wrap&quot;</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderName.<span class="property">textContent</span> + <span class="string">&quot; &quot;</span> + sliderName.<span class="property">textContent</span>; </span><br><span class="line"> sliderName.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> sliderName.<span class="title function_">append</span>(textWrap);</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (sliderTitle.<span class="property">textContent</span>.<span class="property">length</span> &gt;= <span class="number">18</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> textWrap = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;span&quot;</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">&quot;text-wrap&quot;</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderTitle.<span class="property">textContent</span> + <span class="string">&quot; &quot;</span> + sliderTitle.<span class="property">textContent</span>; </span><br><span class="line"> sliderTitle.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> sliderTitle.<span class="title function_">append</span>(textWrap);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeBgBody</span>(<span class="params"></span>) &#123;</span><br><span class="line"> body.<span class="property">style</span>.<span class="property">backgroundColor</span> = bgBody[count];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">selectSong</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> song = playerSongs[count];</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> item <span class="keyword">of</span> playerSongs) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (item != song) &#123;</span><br><span class="line"> item.<span class="title function_">pause</span>();</span><br><span class="line"> item.<span class="property">currentTime</span> = <span class="number">0</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (isPlay) song.<span class="title function_">play</span>();</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">playSong</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (song.<span class="property">paused</span>) &#123;</span><br><span class="line"> song.<span class="title function_">play</span>();</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;none&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line"></span><br><span class="line"> &#125;<span class="keyword">else</span>&#123;</span><br><span class="line"> song.<span class="title function_">pause</span>();</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">progresUpdate</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> progresFilledWidth = (<span class="variable language_">this</span>.<span class="property">currentTime</span> / <span class="variable language_">this</span>.<span class="property">duration</span>) * <span class="number">100</span> + <span class="string">&quot;%&quot;</span>;</span><br><span class="line"> progresFilled.<span class="property">style</span>.<span class="property">width</span> = progresFilledWidth;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">duration</span> == <span class="variable language_">this</span>.<span class="property">currentTime</span>) &#123;</span><br><span class="line"> <span class="title function_">next</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength &amp;&amp; song.<span class="property">currentTime</span> == song.<span class="property">duration</span>) &#123;</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">scurb</span>(<span class="params">e</span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// If we use e.offsetX, we have trouble setting the song time, when the mousemove is running</span></span><br><span class="line"> <span class="keyword">const</span> currentTime = ( (e.<span class="property">clientX</span> - progres.<span class="title function_">getBoundingClientRect</span>().<span class="property">left</span>) / progres.<span class="property">offsetWidth</span> ) * song.<span class="property">duration</span>;</span><br><span class="line"> song.<span class="property">currentTime</span> = currentTime;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">durationSongs</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> min = <span class="built_in">parseInt</span>(<span class="variable language_">this</span>.<span class="property">duration</span> / <span class="number">60</span>);</span><br><span class="line"> <span class="keyword">if</span> (min &lt; <span class="number">10</span>) min = <span class="string">&quot;0&quot;</span> + min;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> sec = <span class="built_in">parseInt</span>(<span class="variable language_">this</span>.<span class="property">duration</span> % <span class="number">60</span>);</span><br><span class="line"> <span class="keyword">if</span> (sec &lt; <span class="number">10</span>) sec = <span class="string">&quot;0&quot;</span> + sec;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> playerSongTime = <span class="string">`<span class="subst">$&#123;min&#125;</span>:<span class="subst">$&#123;sec&#125;</span>`</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">closest</span>(<span class="string">&quot;.player__song&quot;</span>).<span class="title function_">querySelector</span>(<span class="string">&quot;.player__song-time&quot;</span>).<span class="title function_">append</span>(playerSongTime);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title function_">changeSliderContext</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// add events</span></span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, openPlayer);</span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">&quot;animationend&quot;</span>, <span class="function">() =&gt;</span> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> =<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">playlistButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, closePlayer);</span><br><span class="line"></span><br><span class="line">nextButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, next);</span><br><span class="line"></span><br><span class="line">backButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">back</span>();</span><br><span class="line"> <span class="title function_">changeSliderContext</span>();</span><br><span class="line"> <span class="title function_">changeBgBody</span>();</span><br><span class="line"> <span class="title function_">selectSong</span>();</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">playButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> isPlay = <span class="literal">true</span>;</span><br><span class="line"> <span class="title function_">playSong</span>();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">playerSongs.<span class="title function_">forEach</span>(<span class="function"><span class="params">song</span> =&gt;</span> &#123;</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">&quot;loadeddata&quot;</span> , durationSongs);</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">&quot;timeupdate&quot;</span> , progresUpdate);</span><br><span class="line"> </span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">progres.<span class="title function_">addEventListener</span>(<span class="string">&quot;mousedown&quot;</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">scurb</span>(e);</span><br><span class="line"> isMove = <span class="literal">true</span>;</span><br><span class="line"> song.<span class="property">muted</span> = <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;mousemove&quot;</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> isMove &amp;&amp; <span class="title function_">scurb</span>(e));</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;mouseup&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> isMove = <span class="literal">false</span></span><br><span class="line"> song.<span class="property">muted</span> = <span class="literal">false</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">ondragstart</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></div></details></li><li>编辑[blogroot]\themes\butterfly\layout\page.pug<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"> case page.type</span><br><span class="line"> when &#x27;tags&#x27;</span><br><span class="line"> include includes/page/tags.pug</span><br><span class="line"> when &#x27;link&#x27;</span><br><span class="line"> include includes/page/flink.pug</span><br><span class="line"> when &#x27;bb&#x27;</span><br><span class="line"> include includes/page/bb.pug</span><br><span class="line"> when &#x27;categories&#x27;</span><br><span class="line"> include includes/page/categories.pug</span><br><span class="line"><span class="addition">+ when &#x27;music&#x27;</span></span><br><span class="line"><span class="addition">+ include includes/page/music.pug</span></span><br><span class="line"> default</span><br><span class="line"> include includes/page/default-page.pug</span><br></pre></td></tr></table></figure></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">musicplayer:</span></span><br><span class="line"> <span class="attr">hitokoto:</span> <span class="literal">true</span> <span class="comment"># 一言</span></span><br><span class="line"> <span class="attr">musics:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Eutopia&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yoohsic Roomz&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29129889.mp3&#x27;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Everything&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yinyues&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29544794.mp3&#x27;</span></span><br><span class="line"><span class="comment"># - name: &#x27;歌曲名字&#x27;</span></span><br><span class="line"><span class="comment"># author: &#x27;歌曲作者&#x27;</span></span><br><span class="line"><span class="comment"># image: &#x27;歌曲图片&#x27;</span></span><br><span class="line"><span class="comment"># url: &#x27;歌曲链接&#x27;</span></span><br></pre></td></tr></table></figure></li><li>将svg.7z压缩包里的五个文件放在[blogroot]\themes\butterfly\source\svg 里面<div class="btns rounded grid5"><a class="button" target="_blank" rel="noopener" href="https://sinz.lanzouw.com/iFMmG0kjkuvg" title="（密码：gt97）"><i class="fas fa-download"></i> （密码：gt97）</a></div></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">type: &#x27;music&#x27;</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure></li></ol></div><div class="trm-tab-item-content active" id="教程开始-2"><p><a href="/music/old/">2.0效果预览</a></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug（有搞1.0的话直接把music.pug里面的内容全都替换成下面的内容），内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">link(</span><br><span class="line"> href=&quot;/assets/css/tplayer.css&quot;</span><br><span class="line"> rel=&quot;stylesheet&quot;</span><br><span class="line"> type=&quot;text/css&quot;</span><br><span class="line">)</span><br><span class="line">link(</span><br><span class="line"> href=&quot;/assets/plugins/FontAwesome4.1/css/font-awesome.min.css&quot;</span><br><span class="line"> rel=&quot;stylesheet&quot;</span><br><span class="line"> type=&quot;text/css&quot;</span><br><span class="line">)</span><br><span class="line">script(src=&quot;/assets/js/jquery.js&quot;)</span><br><span class="line">script(src=&quot;/assets/js/jquery-ui.js&quot;)</span><br><span class="line">script(src=&quot;/assets/js/tPlayer.js&quot;)</span><br><span class="line">#t_wrapper</span><br><span class="line"> #t_cover</span><br><span class="line"> img(src=&quot;/assets/images/logo.png&quot;)</span><br><span class="line"> #t_top</span><br><span class="line"> #t_title_info</span><br><span class="line"> span.artist</span><br><span class="line"> span.title</span><br><span class="line"> #t_middle</span><br><span class="line"> #play</span><br><span class="line"> #pause.hidden</span><br><span class="line"> #t_progress.ui-corner-all.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content</span><br><span class="line"> #trackInfo</span><br><span class="line"> #error</span><br><span class="line"> #current 0:00</span><br><span class="line"> #duration 0:00</span><br><span class="line"> .ui-corner-all.ui-slider-range.ui-slider-range-min.ui-widget-header(style=&quot;width: 0%;&quot;)</span><br><span class="line"> span.ui-corner-all.ui-slider-handle.ui-state-default(style=&quot;left: 0%;&quot; tabindex=&quot;0&quot;)</span><br><span class="line"> span#prev</span><br><span class="line"> span#next</span><br><span class="line"> #t_bottom</span><br><span class="line"> #range</span><br><span class="line"> #val</span><br><span class="line"> #vol</span><br><span class="line"> #rangeVal</span><br><span class="line"> #t_pls_show.noselectpls</span><br><span class="line">#playlist</span><br><span class="line"> ul</span><br><span class="line"> each musics in theme.musicplayer.musics</span><br><span class="line"> li(</span><br><span class="line"> t_artist=musics.author</span><br><span class="line"> t_cover=musics.image</span><br><span class="line"> t_name=musics.name</span><br><span class="line"> )</span><br><span class="line"> a(href=&quot;#&quot;)=musics.name + &#x27; - &#x27; + musics.author</span><br><span class="line"> audio(preload=&quot;none&quot; src=musics.url type=&quot;audio/mp3&quot;)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> p#hitokoto</span><br><span class="line"> a#hitokoto_text(href=&quot;#&quot;,target=&quot;_blank&quot;,style=&quot;text-align:center;color: #fff;&quot;) :D 获取中...</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch(&#x27;https://v1.hitokoto.cn&#x27;)</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; &#123;</span><br><span class="line"> const hitokoto = document.querySelector(&#x27;#hitokoto_text&#x27;)</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=$&#123;data.uuid&#125;`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + &quot; —— &quot; + data.creator + &quot;「&quot; + data.from + &quot;」&quot;</span><br><span class="line"> &#125;)</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></table></figure></div></details></li><li>将下面压缩包内五个文件夹全都解压在[blogroot]\themes\butterfly\source\assets 文件夹里面<div class="btns rounded grid5"><a class="button" target="_blank" rel="noopener" href="https://sinz.lanzouw.com/iUJTx0krafpi" title="（密码：3r5i）"><i class="fas fa-download"></i> （密码：3r5i）</a></div><div class="trm-note info"><div class="trm-note-title">INFO</div><p>1.0想升级成2.0的，下面的步骤可以不用做</p></div></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">musicplayer:</span></span><br><span class="line"> <span class="attr">hitokoto:</span> <span class="literal">true</span> <span class="comment"># 一言</span></span><br><span class="line"> <span class="attr">musics:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Eutopia&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yoohsic Roomz&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29129889.mp3&#x27;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Everything&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yinyues&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29544794.mp3&#x27;</span></span><br><span class="line"><span class="comment"># - name: &#x27;歌曲名字&#x27;</span></span><br><span class="line"><span class="comment"># author: &#x27;歌曲作者&#x27;</span></span><br><span class="line"><span class="comment"># image: &#x27;歌曲图片&#x27;</span></span><br><span class="line"><span class="comment"># url: &#x27;歌曲链接&#x27;</span></span><br></pre></td></tr></table></figure></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">type: &#x27;music&#x27;</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure></li></ol></div></div></div><h1 id="TO-DO"><a href="#TO-DO" class="headerlink" title="TO DO"></a>TO DO</h1><div class="checkbox checked"><input type="checkbox" checked><p>播放列表</p></div><div class="checkbox checked"><input type="checkbox" checked><p>适配手机端</p></div><div class="checkbox"><input type="checkbox"><p>npm插件化<psw>（Akilar行为）</psw></p></div></div></div></article></div><div class="trm-post-next-prev row"><div class="col-lg-12"><h5 class="trm-title-with-divider">其他文章<span data-number="02"></span></h5></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/posts/38964/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></div><h5><a href="/posts/38964/" class="trm-anima-link">小康大佬的说说方案 ———— ispeak搭建教程</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/01/13</li><li>21:01</li><li>5.6k</li><li>29</li></ul></div></div></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/posts/23021/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230104/Goodbye2022.21ppwx94kqf4.webp"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/categories/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/">个人小记</a></div><h5><a href="/posts/23021/" class="trm-anima-link">再见2022，你好2023</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>22/12/31</li><li>14:53</li><li>108</li><li>1</li></ul></div></div></div></div><div class="trm-card trm-scroll-animation comment-container"><div id="Twikoo-warp"><div id="tcomment"></div><script src="https://jsd.cdn.storisinz.site/npm/twikoo/dist/twikoo.all.min.js" data-swup-reload-script data-reset="true"></script><script data-swup-reload-script>twikoo.init({enable:!1,envId:"https://tk.pl.blog.sinzmise.top/",el:"#tcomment"})</script></div><script data-swup-reload-script>function hidecomment(){document.getElementById("Twikoo-warp").style.display="none"}function Twikooset(){hidecomment(),document.getElementById("Twikoo-warp").style.display="block"}hidecomment(),document.getElementById("Twikoo-warp").style.display="block"</script></div><div class="trm-divider footer-divider"></div><footer class="trm-footer-card trm-scroll-animation"><div class="trm-footer-item"><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a> An&nbsp;<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a>&nbsp;🕸💍 <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a></div><div class="trm-footer-item"><span>© 2021 - 2024</span><span class="footer-separator" data-separator=" · "></span> <span class="trm-accent-color">王九弦SZ·Ninty</span></div><div class="trm-footer-item"><span>由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 v7.3.0</span><span class="footer-separator" data-separator=" | "></span> <span>主题 - <a rel="noopener" href="https://github.com/MaLuns/hexo-theme-async" target="_blank">Async</a> v2.2.3</span></div><div class="trm-footer-item blog-run-long"></div><div class="trm-footer-item"><p><a href="https://icp.gov.moe/?keyword=20231033" target="_blank">萌ICP备20231033号</a>&nbsp;| <a target="_blank" href="https://beian.miit.cn.com/gov/search.php?query=blog.sinzmise.top" title="MIIT备20240818号">MIIT备20240818号</a>&nbsp;| <a target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/" title="官码2024000155号"><img src="https://style.wmou.com/images/guanma.png" alt="官码" width="9">官码2024000155号</a></p><p><span>我加入的：</span> <a href="https://zhblogs.ohyee.cc/" target="_blank">中文博客列表</a>&nbsp;| <a href="https://storeweb.cn/member/o/1585" target="_blank">个站商店</a>&nbsp;| <a href="https://bf.zzxworld.com/s/995" target="_blank">BlogFinder</a>&nbsp;| <a href="https://sites.link/site-info?siteType=life&siteId=64cb373190e35300a8eec654" target="_blank">站点聚合平台</a>&nbsp;| <a href="https://boke.lu" target="_blank">博客录</a>&nbsp;| <a href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/" target="_blank">RssBlog</a>&nbsp;| <a href="https://blogscn.fun" target="_blank">笔墨迹</a>&nbsp;| <a href="https://forever.dreamerhe.cn/" target="_blank">梦境列车</a>&nbsp;| <a href="https://firewood.news/" target="_blank">积薪</a>&nbsp;| <a href="https://daohang.lusongsong.com/" target="_blank">博客大全</a></p></div></footer></div></div></div></div></div><div class="trm-fixed-container"><div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()"><i class="iconfont fas fa-book-reader"></i></div><div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部"><i class="iconfont fas fa-arrow-up"></i></div></div></div></div></div><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div></div><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@docsearch/css/dist/style.min.css"><script src="https://jsd.cdn.storisinz.site/npm/@docsearch/js/dist/umd/index.min.js"></script><script>(()=>{docsearch({appId:"QAS05YI2PH",apiKey:"67ffd4c9fa1234148ec4f8b27dfdb2a7",indexName:"sinzmise",container:"#docsearch"});const e=()=>{document.querySelector(".DocSearch-Button").click()},c=()=>{document.querySelector("#trm-search-btn").addEventListener("click",e)};c(),window.addEventListener("pjax:complete",c)})()</script><script src="https://jsd.cdn.storisinz.site/npm/swup@2.0.19/dist/swup.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script><script src="https://jsd.cdn.storisinz.site/npm/axios/dist/axios.min.js"></script><script src="/js/plugins/danmu.js?v=2.2.3"></script><link rel="stylesheet" href="/weichuncai/css/style.css"><script src="/weichuncai/js/common.js"></script><script src="/weichuncai/wcc-config.js"></script><script>"serviceWorker"in navigator?navigator.serviceWorker.register("/sw.js").then((function(){navigator.serviceWorker.controller?console.log("Assets cached by the controlling service worker."):console.log("Please reload this page to allow the service worker to handle network operations.")})).catch((function(e){console.log("ERROR: "+e)})):console.log("Service workers are not supported in the current browser.")</script><script id="async-script" src="/js/main.js?v=2.2.3"></script><script data-pjax src="https://jsd.cdn.storisinz.site/npm/oh-my-live2d"></script><script>const oml2d=OML2D.loadOml2d({menus:{items:t=>[t[0],t[2],t[3]]},mobileDisplay:!1,models:[{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_6/dujiaoshou_6.model3.json",mobilePosition:[-10,23],mobileScale:.1,mobileStageStyle:{width:180,height:166},motionPreloadStrategy:"IDLE",position:[-120,-30],scale:.06,stageStyle:{width:250,height:400}},{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_4/dujiaoshou_4.model3.json",scale:.06,position:[-50,-25],stageStyle:{width:250,height:300},mobileScale:.08,mobilePosition:[0,0],mobileStageStyle:{width:180}}],parentElement:document.body,primaryColor:"var(--primary)",sayHello:!1,tips:{style:{width:230,height:120,left:"calc(50% + 6px)",top:"-100px"},mobileStyle:{width:180,height:80,left:"calc(50% - 30px)",top:"-100px"},idleTips:{interval:15e3,message:function(){return axios.get("https://v1.hitokoto.cn?c=i").then((function(t){return t.data.hitokoto})).catch((function(t){console.error(t)}))}}}})</script></body></html>
1
+ <!DOCTYPE html><html lang="zh-Hans"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="x5-fullscreen" content="true"><meta name="full-screen" content="yes"><meta name="theme-color" content="#317EFB"><meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport"><meta name="description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:type" content="article"><meta property="og:title" content="butterfly主题添加音乐页面（适配手机）"><meta property="og:url" content="https://blog.sinzmise.top/posts/22945/"><meta property="og:site_name" content="汐塔魔法屋"><meta property="og:description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="article:published_time" content="2023-01-08T22:31:46.000Z"><meta property="article:modified_time" content="2024-10-20T02:36:56.546Z"><meta property="article:author" content="王九弦SZ·Ninty"><meta property="article:tag" content="站点折腾"><meta property="article:tag" content="页面魔改"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://blog.sinzmise.top/img/404.jpg"><title>butterfly主题添加音乐页面（适配手机）</title><link href="/images/siteicon/favicon-16x16.png?v=2.2.3" rel="icon" type="image/png" sizes="16x16"><link href="/images/siteicon/favicon-32x32.png?v=2.2.3" rel="icon" type="image/png" sizes="32x32"><link href="/images/siteicon/apple-touch-icon.png?v=2.2.3" rel="apple-touch-icon" sizes="180x180"><link href="/manifest.json" rel="manifest"><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="stylesheet" href="/css/plugins/bootstrap.row.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0/dist/fancybox.css"><script src="https://jsd.cdn.storisinz.site/npm/jquery/dist/jquery.min.js"></script><link rel="stylesheet" href="/css/plugins/font-awesome.min.css"><script>window.ASYNC_CONFIG={hostname:"blog.sinzmise.top",author:"王九弦SZ·Ninty",root:"/",typed_text:null,theme_version:"2.2.3",theme:{switch:!0,default:"auto"},favicon:{logo:"/images/siteicon/favicon.ico",icon16:"/images/siteicon/favicon-16x16.png",icon32:"/images/siteicon/favicon-32x32.png",apple_touch_icon:"/images/siteicon/apple-touch-icon.png",webmanifest:"/manifest.json",visibilitychange:!0,hidden:"/images/siteicon/favicon.ico",show_text:"那人却在，灯火阑珊处",hide_text:"众里寻他千百度，蓦然回首"},i18n:{placeholder:"搜索文章...",empty:"找不到您查询的内容: ${query}",hits:"找到 ${hits} 条结果",hits_time:"找到 ${hits} 条结果（用时 ${time} 毫秒）",author:"本文作者：",copyright_link:"本文链接：",copyright_license_title:"版权声明：",copyright_license_content:"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。",copy_success:"复制成功",copy_failure:"复制失败",open_read_mode:"进入阅读模式",exit_read_mode:"退出阅读模式",notice_outdate_message:"距离上次更新已经 undefined 天了, 文章内容可能已经过时。",sticky:"置顶",just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},swup:!0,plugin:{flickr_justified_gallery:"https://jsd.cdn.storisinz.site/npm/flickr-justified-gallery@latest/dist/fjGallery.min.js"},icons:{sun:"far fa-sun",moon:"far fa-moon",play:"fas fa-play",email:"far fa-envelope",next:"fas fa-arrow-right",calendar:"far fa-calendar-alt",clock:"far fa-clock",user:"far fa-user",back_top:"fas fa-arrow-up",close:"fas fa-times",search:"fas fa-search",reward:"fas fa-hand-holding-usd",toc_tag:"fas fa-th-list",read:"fas fa-book-reader",arrows:"fas fa-arrows-alt-h",double_arrows:"fas fa-angle-double-down",copy:"fas fa-copy"},icontype:"font",highlight:{plugin:"highlighjs",theme:!0,copy:!0,lang:!0,title:"default",height_limit:!1},toc:{post_title:!0},live_time:{start_time:"12/17/2021 14:53:00",prefix:"这个魔法屋已经经历了 undefined 天的故事"},danmu:{enable:!0,el:".trm-banner"}}</script><script id="async-page-config">window.PAGE_CONFIG={isPost:!0,isHome:!1,postUpdate:"2024-10-20 02:36:56"}</script><link data-swup-theme rel="stylesheet" href="/css/index.css?v=2.2.3" id="trm-switch-style"><script>let defaultMode="auto"!==ASYNC_CONFIG.theme.default?ASYNC_CONFIG.theme.default:window.matchMedia("(prefers-color-scheme: light)").matches?"style-light":"style-dark",catchMode=localStorage.getItem("theme-mode")||defaultMode,type="style-dark"===catchMode?"add":"remove";document.documentElement.classList[type]("dark")</script><link data-swup-theme rel="stylesheet" href="/css/tags.css"><link data-swup-theme rel="stylesheet" href="/css/custom2.css"><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"></head><body><div class="trm-app-frame"><div class="trm-preloader"><div class="trm-holder"><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="trm-mode-swich-animation-frame"><div class="trm-mode-swich-animation"><i class="i-sun"><i class="iconfont far fa-sun"></i></i><div class="trm-horizon"></div><i class="i-moon"><i class="iconfont far fa-moon"></i></i></div></div><div id="trm-dynamic-content" class="trm-swup-animation"><div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0"><header class="trm-top-bar"><div class="container"><div class="trm-left-side"><a href="/" class="trm-logo-frame trm-anima-link"><img alt="logo" src="/images/siteicon/favicon.ico"><div class="trm-logo-text">汐塔<span>魔法屋</span></div></a></div><div class="trm-right-side"><div class="trm-menu"><nav><ul><li class="menu-item-has-children"><a href="#" target="">站点</a><ul><li><a href="/archives/" target="">归档</a></li><li><a href="/categories/" target="">分类</a></li><li><a href="/tags/" target="">标签</a></li></ul></li><li class="menu-item-has-children"><a href="#" target="">友链</a><ul><li><a href="/link/" target="">友人帐</a></li><li><a href="/comments/" target="">留言板</a></li></ul></li><li class="menu-item-has-children"><a href="#" target="">关于</a><ul><li><a href="/games/" target="">游戏库</a></li></ul></li><li class="menu-item-has-children"><a href="https://www.travellings.cn/go.html" target="_blank">开往</a></li></ul></nav></div><div class="trm-mode-switcher-place"><div class="trm-mode-switcher"><i class="iconfont far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"><label class="trm-swich" for="trm-swich"></label><i class="iconfont far fa-moon"></i></div></div><div id="trm-search-btn" class="trm-search-btn"><i class="iconfont fas fa-search"></i></div></div><div class="trm-menu-btn"><span></span></div></div></header><div class="trm-content-start h-entry"><div class="trm-banner"><img style="object-position:top;object-fit:cover" alt="banner" class="trm-banner-cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><div class="trm-banner-content trm-overlay"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-8"><div class="trm-banner-text"><div class="trm-label trm-mb-20">NEWS LETTER</div><h1 class="trm-mb-30 trm-hsmb-font p-name">butterfly主题添加音乐页面（适配手机）</h1><ul class="trm-breadcrumbs trm-label"><li><a href="/" class="trm-anima-link">Home</a></li><li><span>posts</span></li></ul></div><span id="scroll-triger" class="trm-scroll-hint-frame"><div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></span></div></div></div></div></div><div class="container"><div class="row"><div class="trm-page-sidebar col-lg-4 hidden-sm"><div class="trm-main-card-frame trm-sidebar"><div class="trm-main-card h-card"><div class="trm-mc-header"><div class="trm-avatar-frame trm-mb-20"><img alt="Avatar" class="trm-avatar u-photo" src="/img/avatar.png"></div><h5 class="trm-name trm-mb-15 p-name">王九弦SZ·Ninty</h5></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="trm-social"><a href="/atom.xml" title="RSS" rel="me" target="_blank" class="u-url"><i class="iconfont fas fa-rss"></i></a><a href="https://github.com/SinzMise" title="Github" rel="me" target="_blank" class="u-url"><i class="iconfont fab fa-github"></i></a></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><ul class="trm-table trm-mb-20"><li><div class="trm-label">邮件:</div><div class="trm-label trm-label-light u-email">email@sinzmise.top</div></li><li><div class="trm-label">省份:</div><div class="trm-label trm-label-light p-region">广东</div></li><li><div class="trm-label">城市:</div><div class="trm-label trm-label-light p-locality">潮州</div></li></ul><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="text-center"><a href="mailto:email@sinzmise.top" class="trm-btn">联系我<i class="iconfont far fa-envelope"></i></a></div></div></div></div><div class="trm-page-content col-lg-8"><div id="trm-content" class="trm-content"><div class="trm-post-info row hidden-sm"><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-calendar-alt trm-icon"></i><br>01/08</div></div><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-clock trm-icon"></i><br>22:31</div></div><div class="col-sm-4"><div id="post-author" class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-user trm-icon"></i><br><a href="https://blog.sinzmise.top" class="p-author h-card">王九弦SZ·Ninty</a></div></div></div><div class="trm-card"><article id="article-container" class="trm-publication e-content"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><div class="trm-note info"><div class="trm-note-title">INFO</div><p>本博客已经更换主题</p></div><p>没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，<del>但考虑到我不会写样式（虽然我可以自学）</del> 所以我音乐页面用的是<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/3322c8a8.html">Chuckle的方案</a><br><psw>（等会为啥开头这么像<a href="https://www.chuckle.top/article/3322c8a8.html">这篇文章</a>）</psw><br>原本我是想做<a target="_blank" rel="noopener" href="https://www.chuckle.top/article/eb3a4679.html">单页背景透明</a>的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画<br>以下是我之前的音乐页面：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" alt="msedge_x1MaJIbBQg" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-09-59-57-499_com.2sej4yl2vuw0.webp" alt="Screenshot_2023-01-09-09-59-57-499_com" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-10-02-41-554_com.6tcc3lty2uo0.webp" alt="Screenshot_2023-01-09-10-02-41-554_com" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<del>但我懒得适配，于是就有了这个教程</del> ）</p><h1 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h1><div class="trm-tabs" id="教程开始"><ul class="trm-nav-tabs"><li class="trm-tab"><button type="button" data-href="#教程开始-1">1.0</button></li><li class="trm-tab active"><button type="button" data-href="#教程开始-2">2.0</button></li></ul><div class="trm-tab-contents"><div class="trm-tab-item-content" id="教程开始-1"><p></p><div class="trm-note info"><div class="trm-note-title">INFO</div><p>这个教程是我基于<a target="_blank" rel="noopener" href="https://www.php.cn/xiazai/js/6169">https://www.php.cn/xiazai/js/6169</a> 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p><br>&lt;/div&gt;<p></p><p></p><div class="trm-note warning"><div class="trm-note-title">WARNING</div><p>目前博客已经弃用这个方案，改用2.0版本</p><br>&lt;/div&gt;<p></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug，内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">link(rel=&#x27;stylesheet&#x27; href=&#x27;/css/musics.css&#x27;)</span><br><span class="line">.player</span><br><span class="line"> .player__header</span><br><span class="line"> .player__img.player__img--absolute.slider</span><br><span class="line"> button.player__button.player__button--absolute--nw.playlist</span><br><span class="line"> img(src=&#x27;/svg/playlist.svg&#x27;, alt=&#x27;playlist-icon&#x27;)</span><br><span class="line"> button.player__button.player__button--absolute--center.play</span><br><span class="line"> img(src=&#x27;/svg/play.svg&#x27;, alt=&#x27;play-icon&#x27;)</span><br><span class="line"> img(src=&#x27;/svg/pause.svg&#x27;, alt=&#x27;pause-icon&#x27;)</span><br><span class="line"> .slider__content</span><br><span class="line"> each item in theme.musicplayer.musics</span><br><span class="line"> img.img.slider__img(src=item.image, alt=&#x27;cover&#x27;)</span><br><span class="line"> .player__controls</span><br><span class="line"> button.player__button.back</span><br><span class="line"> img.img(src=&#x27;/svg/back.svg&#x27;, alt=&#x27;back-icon&#x27;)</span><br><span class="line"> p.player__context.slider__context</span><br><span class="line"> strong.slider__title</span><br><span class="line"> span.slider__name.player__title</span><br><span class="line"> button.player__button.next</span><br><span class="line"> img.img(src=&#x27;/svg/next.svg&#x27;, alt=&#x27;next-icon&#x27;)</span><br><span class="line"> .progres</span><br><span class="line"> .progres__filled</span><br><span class="line"> ul.player__playlist.list</span><br><span class="line"> each musics in theme.musicplayer.musics</span><br><span class="line"> li.player__song</span><br><span class="line"> img.player__img.img(src=musics.image, alt=&#x27;cover&#x27;)</span><br><span class="line"> p.player__context</span><br><span class="line"> b.player__song-name=musics.name</span><br><span class="line"> span.flex</span><br><span class="line"> span.player__title=musics.author</span><br><span class="line"> span.player__song-time</span><br><span class="line"> audio.audio(src=musics.url)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> p#hitokoto</span><br><span class="line"> a#hitokoto_text(href=&quot;#&quot;,target=&quot;_blank&quot;) :D 获取中...</span><br><span class="line">script(src=&#x27;/js/player.js&#x27;)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch(&#x27;https://v1.hitokoto.cn&#x27;)</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; &#123;</span><br><span class="line"> const hitokoto = document.querySelector(&#x27;#hitokoto_text&#x27;)</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=$&#123;data.uuid&#125;`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + &quot; —— &quot; + data.creator + &quot;「&quot; + data.from + &quot;」&quot;</span><br><span class="line"> &#125;)</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></table></figure></div></details></li><li>在[blogroot]\themes\butterfly\source\css\目录下新建musics.css,内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br></pre></td><td class="code"><pre><span class="line">::root &#123;</span><br><span class="line"> <span class="attr">--parent-height</span> : <span class="number">20em</span> ;</span><br><span class="line"> <span class="attr">--duration</span>: <span class="number">1s</span> ;</span><br><span class="line"> <span class="attr">--duration-text-wrap</span>: <span class="number">12s</span> <span class="number">1.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.82</span>, <span class="number">0.82</span>, <span class="number">1</span>, <span class="number">1.01</span>) ;</span><br><span class="line"> <span class="attr">--cubic-header</span>: <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0.71</span>, <span class="number">0.21</span>, <span class="number">0.3</span>, <span class="number">0.95</span>) ;</span><br><span class="line"> <span class="attr">--cubic-slider</span> : <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0.4</span>, <span class="number">0</span>, <span class="number">0.2</span>, <span class="number">1</span>) ;</span><br><span class="line"> <span class="attr">--cubic-play-list</span> : .<span class="number">35s</span> <span class="built_in">var</span>(--duration) <span class="built_in">cubic-bezier</span>(<span class="number">0</span>, <span class="number">0.85</span>, <span class="number">0.11</span>, <span class="number">1.64</span>) ;</span><br><span class="line"> <span class="attr">--cubic-slider-context</span> : <span class="built_in">cubic-bezier</span>(<span class="number">1</span>, -<span class="number">0.01</span>, <span class="number">1</span>, <span class="number">1.01</span>) ; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.img</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: block ;</span><br><span class="line"> <span class="attribute">object-fit</span>: cover ;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.list</span> &#123;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">list-style-type</span>: none ;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flex</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">justify-content</span>: space-between ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.uppercase</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">text-transform</span>: uppercase ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">17.15em</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">1.22em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1.35em</span> ;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column ;</span><br><span class="line"> <span class="attribute">background-color</span>: white ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="built_in">var</span>(--parent-height) ;</span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">0</span> auto ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">1</span> ;</span><br><span class="line"> <span class="attribute">gap</span>: <span class="number">0</span> .<span class="number">4em</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">5.85em</span> ;</span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">align-items</span>: flex-start ;</span><br><span class="line"> <span class="attribute">border-radius</span>: inherit ;</span><br><span class="line"> <span class="attribute">justify-content</span>: flex-end ;</span><br><span class="line"> <span class="attribute">background-color</span>: white ;</span><br><span class="line"> <span class="attribute">padding</span>: .<span class="number">95em</span> <span class="number">0.6em</span> <span class="number">0</span> <span class="number">1.2em</span> ;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">6px</span> <span class="number">1px</span> <span class="number">#0000001f</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: height <span class="built_in">var</span>(--cubic-header), box-shadow <span class="built_in">var</span>(--duration), padding <span class="built_in">var</span>(--duration) ease-in-out ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span><span class="selector-class">.open-header</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">box-shadow</span>: unset ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">3.2em</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">3.2em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1.32em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img--absolute</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">1.4em</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">1.2em</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header), height <span class="built_in">var</span>(--cubic-header), top <span class="built_in">var</span>(--cubic-header), left <span class="built_in">var</span>(--cubic-header);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">14.6em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__content</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-slider);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__img</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">75%</span>) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__name</span>, </span><br><span class="line"><span class="selector-class">.slider__title</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">overflow</span>: hidden ;</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.text-wrap</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: block ;</span><br><span class="line"> <span class="attribute">white-space</span>: pre ;</span><br><span class="line"> <span class="attribute">width</span>: fit-content ;</span><br><span class="line"> <span class="attribute">animation</span>: text-wrap <span class="built_in">var</span>(--duration-text-wrap) infinite ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> text-wrap &#123;</span><br><span class="line"></span><br><span class="line"> <span class="number">75%</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">51.5%</span>, <span class="number">0</span>, <span class="number">0</span>) ;</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="number">100%</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">51.5%</span>, <span class="number">0</span>, <span class="number">0</span>) ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">all</span>: unset ;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">100</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">2.5em</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">2.5em</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>) ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">calc</span>(<span class="built_in">var</span>(--duration) / <span class="number">2</span>) ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span> <span class="selector-class">.playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>) ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-play-list) ;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--nw</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">top</span>: <span class="number">5.5%</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">5.5%</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--center</span> &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">margin</span>: auto ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[alt =<span class="string">&quot;pause-icon&quot;</span>]</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: none ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">77%</span> ;</span><br><span class="line"> <span class="attribute">gap</span>: .<span class="number">5em</span> <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">flex-wrap</span>: wrap ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">will-change</span>: contents ;</span><br><span class="line"> <span class="attribute">align-content</span>: center ;</span><br><span class="line"> <span class="attribute">justify-content</span>: center ;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="built_in">var</span>(--cubic-header) , width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">88%</span> ;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">1.1em</span> , <span class="built_in">calc</span>(<span class="built_in">var</span>(--parent-height) - <span class="number">153%</span>) , <span class="number">0</span>) ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.8</span> ;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column ;</span><br><span class="line"> <span class="attribute">justify-content</span>: center ;</span><br><span class="line"> <span class="attribute">text-transform</span>: capitalize ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">56.28%</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">text-align</span>: center ;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: .<span class="number">2em</span> ;</span><br><span class="line"> <span class="attribute">will-change</span>: contents ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"> <span class="attribute">animation</span>: <span class="built_in">calc</span>(<span class="built_in">var</span>(--duration) / <span class="number">2</span>) <span class="built_in">var</span>(--cubic-slider-context) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> opacity &#123;</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="number">0%</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0</span> ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="number">90%</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">1</span> ;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> <span class="selector-class">.slider__context</span>&#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">49.48%</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__title</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">7em</span> ;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold ;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#00000086</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">90%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: .<span class="number">25em</span> ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">1em</span> ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#e5e7ea</span> ;</span><br><span class="line"> <span class="attribute">transition</span>: width <span class="built_in">var</span>(--cubic-header) ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> <span class="selector-class">.progres</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">98%</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0%</span> ;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">position</span>: relative ;</span><br><span class="line"> <span class="attribute">align-items</span>: center ;</span><br><span class="line"> <span class="attribute">border-radius</span>: inherit ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#78adfe</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span> ;</span><br><span class="line"> <span class="attribute">width</span>: .<span class="number">35em</span> ;</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">&quot; &quot;</span> ;</span><br><span class="line"> <span class="attribute">height</span>: .<span class="number">35em</span> ;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> ;</span><br><span class="line"> <span class="attribute">position</span>: absolute ;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#5781bd</span> ;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span> ;</span><br><span class="line"> <span class="attribute">overflow</span>: auto ; </span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">1.05em</span> .<span class="number">9em</span> <span class="number">0</span> <span class="number">1.2em</span> ; </span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span>::-webkit-scrollbar &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> &#123;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* gap: 0 .65em ; */</span></span><br><span class="line"> <span class="attribute">display</span>: flex ;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer ;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: .<span class="number">5em</span> ;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: .<span class="number">7em</span> ;</span><br><span class="line"> <span class="attribute">border-bottom</span>: .<span class="number">1em</span> solid <span class="number">#d8d8d859</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> <span class="selector-class">.player__context</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.5</span> ;</span><br><span class="line"> <span class="attribute">margin-left</span>: .<span class="number">65em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-name</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">88em</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-time</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">65em</span> ;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold ;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#00000079</span> ; </span><br><span class="line"> <span class="attribute">height</span>: fit-content ;</span><br><span class="line"> <span class="attribute">align-self</span>: flex-end ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.audio</span> &#123;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">display</span>: none <span class="meta">!important</span> ;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.player__song-name</span>,<span class="selector-class">.slider__title</span>&#123;</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#000</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#hitokoto</span>&#123;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div></details></li><li>在[blogroot]\themes\butterfly\source\js\目录下新建player.js,内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Designed by: Mauricio Bucardo</span></span><br><span class="line"><span class="comment">// Original image: https://dribbble.com/shots/6957353-Music-Player-Widget</span></span><br><span class="line"><span class="meta"></span></span><br><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// add elemnts</span></span><br><span class="line"><span class="keyword">const</span> bgBody = [<span class="string">&quot;#e5e7e9&quot;</span>, <span class="string">&quot;#ff4545&quot;</span>, <span class="string">&quot;#f8ded3&quot;</span>, <span class="string">&quot;#ffc382&quot;</span>, <span class="string">&quot;#f5eda6&quot;</span>, <span class="string">&quot;#ffcbdc&quot;</span>, <span class="string">&quot;#dcf3f3&quot;</span>];</span><br><span class="line"><span class="keyword">const</span> body = <span class="variable language_">document</span>.<span class="property">body</span>;</span><br><span class="line"><span class="keyword">const</span> player = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.player&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerHeader = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.player__header&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerControls = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.player__controls&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerPlayList = player.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;.player__song&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playerSongs = player.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;.audio&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.play&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> nextButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.next&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> backButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.back&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playlistButton = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.playlist&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> slider = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContext = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__context&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderName = sliderContext.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__name&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderTitle = sliderContext.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__title&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContent = slider.<span class="title function_">querySelector</span>(<span class="string">&quot;.slider__content&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContentLength = playerPlayList.<span class="property">length</span> - <span class="number">1</span>;</span><br><span class="line"><span class="keyword">const</span> sliderWidth = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">let</span> left = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> song = playerSongs[count];</span><br><span class="line"><span class="keyword">let</span> isPlay = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">const</span> pauseIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">&quot;img[alt = &#x27;pause-icon&#x27;]&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> playIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">&quot;img[alt = &#x27;play-icon&#x27;]&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> progres = player.<span class="title function_">querySelector</span>(<span class="string">&quot;.progres&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> progresFilled = progres.<span class="title function_">querySelector</span>(<span class="string">&quot;.progres__filled&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> isMove = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// creat functions</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">openPlayer</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> playerHeader.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;open-header&quot;</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;move&quot;</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;open-slider&quot;</span>);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">closePlayer</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> playerHeader.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;open-header&quot;</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;move&quot;</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;open-slider&quot;</span>);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">next</span>(<span class="params"></span>) &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength) &#123;</span><br><span class="line"> count = count;</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> left += sliderWidth;</span><br><span class="line"> left = <span class="title class_">Math</span>.<span class="title function_">min</span>(left, (sliderContentLength) * sliderWidth);</span><br><span class="line"> sliderContent.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">`translate3d(-<span class="subst">$&#123;left&#125;</span>%, 0, 0)`</span>;</span><br><span class="line"> count++;</span><br><span class="line"></span><br><span class="line"> <span class="title function_">changeSliderContext</span>();</span><br><span class="line"> <span class="title function_">changeBgBody</span>();</span><br><span class="line"> <span class="title function_">selectSong</span>();</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">back</span>(<span class="params"></span>) &#123;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == <span class="number">0</span>) &#123;</span><br><span class="line"> count = count</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> left -= sliderWidth;</span><br><span class="line"> left = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, left);</span><br><span class="line"> sliderContent.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">`translate3d(-<span class="subst">$&#123;left&#125;</span>%, 0, 0)`</span>;</span><br><span class="line"> count--;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeSliderContext</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> = <span class="string">&quot;opacity&quot;</span>;</span><br><span class="line"> </span><br><span class="line"> sliderName.<span class="property">textContent</span> = playerPlayList[count].<span class="title function_">querySelector</span>(<span class="string">&quot;.player__title&quot;</span>).<span class="property">textContent</span>;</span><br><span class="line"> sliderTitle.<span class="property">textContent</span> = playerPlayList[count].<span class="title function_">querySelector</span>(<span class="string">&quot;.player__song-name&quot;</span>).<span class="property">textContent</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (sliderName.<span class="property">textContent</span>.<span class="property">length</span> &gt; <span class="number">16</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> textWrap = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;span&quot;</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">&quot;text-wrap&quot;</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderName.<span class="property">textContent</span> + <span class="string">&quot; &quot;</span> + sliderName.<span class="property">textContent</span>; </span><br><span class="line"> sliderName.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> sliderName.<span class="title function_">append</span>(textWrap);</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (sliderTitle.<span class="property">textContent</span>.<span class="property">length</span> &gt;= <span class="number">18</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> textWrap = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;span&quot;</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">&quot;text-wrap&quot;</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderTitle.<span class="property">textContent</span> + <span class="string">&quot; &quot;</span> + sliderTitle.<span class="property">textContent</span>; </span><br><span class="line"> sliderTitle.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> sliderTitle.<span class="title function_">append</span>(textWrap);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeBgBody</span>(<span class="params"></span>) &#123;</span><br><span class="line"> body.<span class="property">style</span>.<span class="property">backgroundColor</span> = bgBody[count];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">selectSong</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> song = playerSongs[count];</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> item <span class="keyword">of</span> playerSongs) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (item != song) &#123;</span><br><span class="line"> item.<span class="title function_">pause</span>();</span><br><span class="line"> item.<span class="property">currentTime</span> = <span class="number">0</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (isPlay) song.<span class="title function_">play</span>();</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">playSong</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (song.<span class="property">paused</span>) &#123;</span><br><span class="line"> song.<span class="title function_">play</span>();</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;none&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line"></span><br><span class="line"> &#125;<span class="keyword">else</span>&#123;</span><br><span class="line"> song.<span class="title function_">pause</span>();</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">progresUpdate</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> progresFilledWidth = (<span class="variable language_">this</span>.<span class="property">currentTime</span> / <span class="variable language_">this</span>.<span class="property">duration</span>) * <span class="number">100</span> + <span class="string">&quot;%&quot;</span>;</span><br><span class="line"> progresFilled.<span class="property">style</span>.<span class="property">width</span> = progresFilledWidth;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">duration</span> == <span class="variable language_">this</span>.<span class="property">currentTime</span>) &#123;</span><br><span class="line"> <span class="title function_">next</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength &amp;&amp; song.<span class="property">currentTime</span> == song.<span class="property">duration</span>) &#123;</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">scurb</span>(<span class="params">e</span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// If we use e.offsetX, we have trouble setting the song time, when the mousemove is running</span></span><br><span class="line"> <span class="keyword">const</span> currentTime = ( (e.<span class="property">clientX</span> - progres.<span class="title function_">getBoundingClientRect</span>().<span class="property">left</span>) / progres.<span class="property">offsetWidth</span> ) * song.<span class="property">duration</span>;</span><br><span class="line"> song.<span class="property">currentTime</span> = currentTime;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">durationSongs</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> min = <span class="built_in">parseInt</span>(<span class="variable language_">this</span>.<span class="property">duration</span> / <span class="number">60</span>);</span><br><span class="line"> <span class="keyword">if</span> (min &lt; <span class="number">10</span>) min = <span class="string">&quot;0&quot;</span> + min;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> sec = <span class="built_in">parseInt</span>(<span class="variable language_">this</span>.<span class="property">duration</span> % <span class="number">60</span>);</span><br><span class="line"> <span class="keyword">if</span> (sec &lt; <span class="number">10</span>) sec = <span class="string">&quot;0&quot;</span> + sec;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> playerSongTime = <span class="string">`<span class="subst">$&#123;min&#125;</span>:<span class="subst">$&#123;sec&#125;</span>`</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">closest</span>(<span class="string">&quot;.player__song&quot;</span>).<span class="title function_">querySelector</span>(<span class="string">&quot;.player__song-time&quot;</span>).<span class="title function_">append</span>(playerSongTime);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title function_">changeSliderContext</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// add events</span></span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, openPlayer);</span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">&quot;animationend&quot;</span>, <span class="function">() =&gt;</span> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> =<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">playlistButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, closePlayer);</span><br><span class="line"></span><br><span class="line">nextButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, next);</span><br><span class="line"></span><br><span class="line">backButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">back</span>();</span><br><span class="line"> <span class="title function_">changeSliderContext</span>();</span><br><span class="line"> <span class="title function_">changeBgBody</span>();</span><br><span class="line"> <span class="title function_">selectSong</span>();</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">playButton.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> isPlay = <span class="literal">true</span>;</span><br><span class="line"> <span class="title function_">playSong</span>();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">playerSongs.<span class="title function_">forEach</span>(<span class="function"><span class="params">song</span> =&gt;</span> &#123;</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">&quot;loadeddata&quot;</span> , durationSongs);</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">&quot;timeupdate&quot;</span> , progresUpdate);</span><br><span class="line"> </span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">progres.<span class="title function_">addEventListener</span>(<span class="string">&quot;mousedown&quot;</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">scurb</span>(e);</span><br><span class="line"> isMove = <span class="literal">true</span>;</span><br><span class="line"> song.<span class="property">muted</span> = <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;mousemove&quot;</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> isMove &amp;&amp; <span class="title function_">scurb</span>(e));</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;mouseup&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> isMove = <span class="literal">false</span></span><br><span class="line"> song.<span class="property">muted</span> = <span class="literal">false</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">ondragstart</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></div></details></li><li>编辑[blogroot]\themes\butterfly\layout\page.pug<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"> case page.type</span><br><span class="line"> when &#x27;tags&#x27;</span><br><span class="line"> include includes/page/tags.pug</span><br><span class="line"> when &#x27;link&#x27;</span><br><span class="line"> include includes/page/flink.pug</span><br><span class="line"> when &#x27;bb&#x27;</span><br><span class="line"> include includes/page/bb.pug</span><br><span class="line"> when &#x27;categories&#x27;</span><br><span class="line"> include includes/page/categories.pug</span><br><span class="line"><span class="addition">+ when &#x27;music&#x27;</span></span><br><span class="line"><span class="addition">+ include includes/page/music.pug</span></span><br><span class="line"> default</span><br><span class="line"> include includes/page/default-page.pug</span><br></pre></td></tr></table></figure></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">musicplayer:</span></span><br><span class="line"> <span class="attr">hitokoto:</span> <span class="literal">true</span> <span class="comment"># 一言</span></span><br><span class="line"> <span class="attr">musics:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Eutopia&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yoohsic Roomz&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29129889.mp3&#x27;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Everything&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yinyues&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29544794.mp3&#x27;</span></span><br><span class="line"><span class="comment"># - name: &#x27;歌曲名字&#x27;</span></span><br><span class="line"><span class="comment"># author: &#x27;歌曲作者&#x27;</span></span><br><span class="line"><span class="comment"># image: &#x27;歌曲图片&#x27;</span></span><br><span class="line"><span class="comment"># url: &#x27;歌曲链接&#x27;</span></span><br></pre></td></tr></table></figure></li><li>将svg.7z压缩包里的五个文件放在[blogroot]\themes\butterfly\source\svg 里面<div class="btns rounded grid5"><a class="button" target="_blank" rel="noopener" href="https://sinz.lanzouw.com/iFMmG0kjkuvg" title="（密码：gt97）"><i class="fas fa-download"></i> （密码：gt97）</a></div></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">type: &#x27;music&#x27;</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure></li></ol></div><div class="trm-tab-item-content active" id="教程开始-2"><p><a href="/music/old/">2.0效果预览</a></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug（有搞1.0的话直接把music.pug里面的内容全都替换成下面的内容），内容如下：<details class="folding-tag" green><summary>点我查看代码</summary><div class="content"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">link(</span><br><span class="line"> href=&quot;/assets/css/tplayer.css&quot;</span><br><span class="line"> rel=&quot;stylesheet&quot;</span><br><span class="line"> type=&quot;text/css&quot;</span><br><span class="line">)</span><br><span class="line">link(</span><br><span class="line"> href=&quot;/assets/plugins/FontAwesome4.1/css/font-awesome.min.css&quot;</span><br><span class="line"> rel=&quot;stylesheet&quot;</span><br><span class="line"> type=&quot;text/css&quot;</span><br><span class="line">)</span><br><span class="line">script(src=&quot;/assets/js/jquery.js&quot;)</span><br><span class="line">script(src=&quot;/assets/js/jquery-ui.js&quot;)</span><br><span class="line">script(src=&quot;/assets/js/tPlayer.js&quot;)</span><br><span class="line">#t_wrapper</span><br><span class="line"> #t_cover</span><br><span class="line"> img(src=&quot;/assets/images/logo.png&quot;)</span><br><span class="line"> #t_top</span><br><span class="line"> #t_title_info</span><br><span class="line"> span.artist</span><br><span class="line"> span.title</span><br><span class="line"> #t_middle</span><br><span class="line"> #play</span><br><span class="line"> #pause.hidden</span><br><span class="line"> #t_progress.ui-corner-all.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content</span><br><span class="line"> #trackInfo</span><br><span class="line"> #error</span><br><span class="line"> #current 0:00</span><br><span class="line"> #duration 0:00</span><br><span class="line"> .ui-corner-all.ui-slider-range.ui-slider-range-min.ui-widget-header(style=&quot;width: 0%;&quot;)</span><br><span class="line"> span.ui-corner-all.ui-slider-handle.ui-state-default(style=&quot;left: 0%;&quot; tabindex=&quot;0&quot;)</span><br><span class="line"> span#prev</span><br><span class="line"> span#next</span><br><span class="line"> #t_bottom</span><br><span class="line"> #range</span><br><span class="line"> #val</span><br><span class="line"> #vol</span><br><span class="line"> #rangeVal</span><br><span class="line"> #t_pls_show.noselectpls</span><br><span class="line">#playlist</span><br><span class="line"> ul</span><br><span class="line"> each musics in theme.musicplayer.musics</span><br><span class="line"> li(</span><br><span class="line"> t_artist=musics.author</span><br><span class="line"> t_cover=musics.image</span><br><span class="line"> t_name=musics.name</span><br><span class="line"> )</span><br><span class="line"> a(href=&quot;#&quot;)=musics.name + &#x27; - &#x27; + musics.author</span><br><span class="line"> audio(preload=&quot;none&quot; src=musics.url type=&quot;audio/mp3&quot;)</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> p#hitokoto</span><br><span class="line"> a#hitokoto_text(href=&quot;#&quot;,target=&quot;_blank&quot;,style=&quot;text-align:center;color: #fff;&quot;) :D 获取中...</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch(&#x27;https://v1.hitokoto.cn&#x27;)</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; &#123;</span><br><span class="line"> const hitokoto = document.querySelector(&#x27;#hitokoto_text&#x27;)</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=$&#123;data.uuid&#125;`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + &quot; —— &quot; + data.creator + &quot;「&quot; + data.from + &quot;」&quot;</span><br><span class="line"> &#125;)</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></table></figure></div></details></li><li>将下面压缩包内五个文件夹全都解压在[blogroot]\themes\butterfly\source\assets 文件夹里面<div class="btns rounded grid5"><a class="button" target="_blank" rel="noopener" href="https://sinz.lanzouw.com/iUJTx0krafpi" title="（密码：3r5i）"><i class="fas fa-download"></i> （密码：3r5i）</a></div><div class="trm-note info"><div class="trm-note-title">INFO</div><p>1.0想升级成2.0的，下面的步骤可以不用做</p></div></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">musicplayer:</span></span><br><span class="line"> <span class="attr">hitokoto:</span> <span class="literal">true</span> <span class="comment"># 一言</span></span><br><span class="line"> <span class="attr">musics:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Eutopia&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yoohsic Roomz&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29129889.mp3&#x27;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Everything&#x27;</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">&#x27;Yinyues&#x27;</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">&#x27;http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg&#x27;</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">&#x27;http://music.163.com/song/media/outer/url?id=29544794.mp3&#x27;</span></span><br><span class="line"><span class="comment"># - name: &#x27;歌曲名字&#x27;</span></span><br><span class="line"><span class="comment"># author: &#x27;歌曲作者&#x27;</span></span><br><span class="line"><span class="comment"># image: &#x27;歌曲图片&#x27;</span></span><br><span class="line"><span class="comment"># url: &#x27;歌曲链接&#x27;</span></span><br></pre></td></tr></table></figure></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">type: &#x27;music&#x27;</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure></li></ol></div></div></div><h1 id="TO-DO"><a href="#TO-DO" class="headerlink" title="TO DO"></a>TO DO</h1><div class="checkbox checked"><input type="checkbox" checked><p>播放列表</p></div><div class="checkbox checked"><input type="checkbox" checked><p>适配手机端</p></div><div class="checkbox"><input type="checkbox"><p>npm插件化<psw>（Akilar行为）</psw></p></div></div></div></article></div><div class="trm-post-next-prev row"><div class="col-lg-12"><h5 class="trm-title-with-divider">其他文章<span data-number="02"></span></h5></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/posts/38964/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></div><h5><a href="/posts/38964/" class="trm-anima-link">小康大佬的说说方案 ———— ispeak搭建教程</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/01/13</li><li>21:01</li><li>5.6k</li><li>29</li></ul></div></div></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/posts/23021/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230104/Goodbye2022.21ppwx94kqf4.webp"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/categories/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/">个人小记</a></div><h5><a href="/posts/23021/" class="trm-anima-link">再见2022，你好2023</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>22/12/31</li><li>14:53</li><li>108</li><li>1</li></ul></div></div></div></div><div class="trm-card trm-scroll-animation comment-container"><div id="Twikoo-warp"><div id="tcomment"></div><script src="https://jsd.cdn.storisinz.site/npm/twikoo/dist/twikoo.all.min.js" data-swup-reload-script data-reset="true"></script><script data-swup-reload-script>twikoo.init({enable:!1,envId:"https://tk.pl.blog.sinzmise.top/",el:"#tcomment"})</script></div><script data-swup-reload-script>function hidecomment(){document.getElementById("Twikoo-warp").style.display="none"}function Twikooset(){hidecomment(),document.getElementById("Twikoo-warp").style.display="block"}hidecomment(),document.getElementById("Twikoo-warp").style.display="block"</script></div><div class="trm-divider footer-divider"></div><footer class="trm-footer-card trm-scroll-animation"><div class="trm-footer-item"><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a> An&nbsp;<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a>&nbsp;🕸💍 <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a></div><div class="trm-footer-item"><span>© 2021 - 2024</span><span class="footer-separator" data-separator=" · "></span> <span class="trm-accent-color">王九弦SZ·Ninty</span></div><div class="trm-footer-item"><span>由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 v7.3.0</span><span class="footer-separator" data-separator=" | "></span> <span>主题 - <a rel="noopener" href="https://github.com/MaLuns/hexo-theme-async" target="_blank">Async</a> v2.2.3</span></div><div class="trm-footer-item blog-run-long"></div><div class="trm-footer-item"><p><a href="https://icp.gov.moe/?keyword=20231033" target="_blank">萌ICP备20231033号</a>&nbsp;| <a target="_blank" href="https://beian.miit.cn.com/gov/search.php?query=blog.sinzmise.top" title="MIIT备20240818号">MIIT备20240818号</a>&nbsp;| <a target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/" title="官码2024000155号"><img src="https://style.wmou.com/images/guanma.png" alt="官码" width="9">官码2024000155号</a></p><p><span>我加入的：</span> <a href="https://zhblogs.ohyee.cc/" target="_blank">中文博客列表</a>&nbsp;| <a href="https://storeweb.cn/member/o/1585" target="_blank">个站商店</a>&nbsp;| <a href="https://bf.zzxworld.com/s/995" target="_blank">BlogFinder</a>&nbsp;| <a href="https://sites.link/site-info?siteType=life&siteId=64cb373190e35300a8eec654" target="_blank">站点聚合平台</a>&nbsp;| <a href="https://boke.lu" target="_blank">博客录</a>&nbsp;| <a href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/" target="_blank">RssBlog</a>&nbsp;| <a href="https://blogscn.fun" target="_blank">笔墨迹</a>&nbsp;| <a href="https://forever.dreamerhe.cn/" target="_blank">梦境列车</a>&nbsp;| <a href="https://firewood.news/" target="_blank">积薪</a>&nbsp;| <a href="https://daohang.lusongsong.com/" target="_blank">博客大全</a></p></div></footer></div></div></div></div></div><div class="trm-fixed-container"><div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()"><i class="iconfont fas fa-book-reader"></i></div><div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部"><i class="iconfont fas fa-arrow-up"></i></div></div></div></div></div><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div></div><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@docsearch/css/dist/style.min.css"><script src="https://jsd.cdn.storisinz.site/npm/@docsearch/js/dist/umd/index.min.js"></script><script>(()=>{docsearch({appId:"QAS05YI2PH",apiKey:"67ffd4c9fa1234148ec4f8b27dfdb2a7",indexName:"sinzmise",container:"#docsearch"});const e=()=>{document.querySelector(".DocSearch-Button").click()},c=()=>{document.querySelector("#trm-search-btn").addEventListener("click",e)};c(),window.addEventListener("pjax:complete",c)})()</script><script src="https://jsd.cdn.storisinz.site/npm/swup@2.0.19/dist/swup.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script><script src="https://jsd.cdn.storisinz.site/npm/axios/dist/axios.min.js"></script><script src="/js/plugins/danmu.js?v=2.2.3"></script><link rel="stylesheet" href="/weichuncai/css/style.css"><script src="/weichuncai/js/common.js"></script><script src="/weichuncai/wcc-config.js"></script><script>"serviceWorker"in navigator?navigator.serviceWorker.register("/sw.js").then((function(){navigator.serviceWorker.controller?console.log("Assets cached by the controlling service worker."):console.log("Please reload this page to allow the service worker to handle network operations.")})).catch((function(e){console.log("ERROR: "+e)})):console.log("Service workers are not supported in the current browser.")</script><script id="async-script" src="/js/main.js?v=2.2.3"></script><script data-pjax src="https://jsd.cdn.storisinz.site/npm/oh-my-live2d"></script><script>const oml2d=OML2D.loadOml2d({menus:{items:t=>[t[0],t[2],t[3]]},mobileDisplay:!1,models:[{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_6/dujiaoshou_6.model3.json",mobilePosition:[-10,23],mobileScale:.1,mobileStageStyle:{width:180,height:166},motionPreloadStrategy:"IDLE",position:[-120,-30],scale:.06,stageStyle:{width:250,height:400}},{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_4/dujiaoshou_4.model3.json",scale:.06,position:[-50,-25],stageStyle:{width:250,height:300},mobileScale:.08,mobilePosition:[0,0],mobileStageStyle:{width:180}}],parentElement:document.body,primaryColor:"var(--primary)",sayHello:!1,tips:{style:{width:230,height:120,left:"calc(50% + 6px)",top:"-100px"},mobileStyle:{width:180,height:80,left:"calc(50% - 30px)",top:"-100px"},idleTips:{interval:15e3,message:function(){return axios.get("https://v1.hitokoto.cn?c=i").then((function(t){return t.data.hitokoto})).catch((function(t){console.error(t)}))}}}})</script></body></html>