sinzmise-cetastories 2.0.0-1737453494002 → 2.0.0-1737453673649

Sign up to get free protection for your applications and to get access to all the features.
Files changed (119) hide show
  1. package/404.html +1 -1
  2. package/archives/2021/12/index.html +1 -1
  3. package/archives/2021/index.html +1 -1
  4. package/archives/2022/12/index.html +1 -1
  5. package/archives/2022/index.html +1 -1
  6. package/archives/2023/01/index.html +1 -1
  7. package/archives/2023/02/index.html +1 -1
  8. package/archives/2023/03/index.html +1 -1
  9. package/archives/2023/04/index.html +1 -1
  10. package/archives/2023/07/index.html +1 -1
  11. package/archives/2023/08/index.html +1 -1
  12. package/archives/2023/09/index.html +1 -1
  13. package/archives/2023/10/index.html +1 -1
  14. package/archives/2023/11/index.html +1 -1
  15. package/archives/2023/12/index.html +1 -1
  16. package/archives/2023/index.html +1 -1
  17. package/archives/2023/page/2/index.html +1 -1
  18. package/archives/2023/page/3/index.html +1 -1
  19. package/archives/2024/01/index.html +1 -1
  20. package/archives/2024/02/index.html +1 -1
  21. package/archives/2024/03/index.html +1 -1
  22. package/archives/2024/04/index.html +1 -1
  23. package/archives/2024/05/index.html +1 -1
  24. package/archives/2024/06/index.html +1 -1
  25. package/archives/2024/07/index.html +1 -1
  26. package/archives/2024/08/index.html +1 -1
  27. package/archives/2024/09/index.html +1 -1
  28. package/archives/2024/10/index.html +1 -1
  29. package/archives/2024/11/index.html +1 -1
  30. package/archives/2024/12/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/2024/page/3/index.html +1 -1
  34. package/archives/2025/01/index.html +1 -1
  35. package/archives/2025/index.html +1 -1
  36. package/archives/index.html +1 -1
  37. package/archives/page/2/index.html +1 -1
  38. package/archives/page/3/index.html +1 -1
  39. package/archives/page/4/index.html +1 -1
  40. package/archives/page/5/index.html +1 -1
  41. package/atom.xml +21 -21
  42. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  43. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  44. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/page/3/index.html +1 -1
  45. package/categories//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  46. package/categories//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  47. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  48. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  49. package/categories//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  50. package/index.html +1 -1
  51. package/package.json +1 -1
  52. package/page/2/index.html +1 -1
  53. package/page/3/index.html +1 -1
  54. package/page/4/index.html +1 -1
  55. package/page/5/index.html +1 -1
  56. package/posts/10021/index.html +1 -1
  57. package/posts/10045/index.html +1 -1
  58. package/posts/10733/index.html +1 -1
  59. package/posts/10996/index.html +1 -1
  60. package/posts/12779/index.html +1 -1
  61. package/posts/13624/index.html +1 -1
  62. package/posts/15688/index.html +1 -1
  63. package/posts/15748/index.html +1 -1
  64. package/posts/15799/index.html +1 -1
  65. package/posts/15842/index.html +1 -1
  66. package/posts/16107/index.html +1 -1
  67. package/posts/18063/index.html +1 -1
  68. package/posts/20412/index.html +1 -1
  69. package/posts/21375/index.html +1 -1
  70. package/posts/22945/index.html +1 -1
  71. package/posts/23021/index.html +1 -1
  72. package/posts/23226/index.html +1 -1
  73. package/posts/27531/index.html +1 -1
  74. package/posts/27762/index.html +1 -1
  75. package/posts/28536/index.html +1 -1
  76. package/posts/28733/index.html +1 -1
  77. package/posts/29196/index.html +1 -1
  78. package/posts/38917/index.html +1 -1
  79. package/posts/38964/index.html +1 -1
  80. package/posts/42487/index.html +1 -1
  81. package/posts/42580/index.html +1 -1
  82. package/posts/45875/index.html +1 -1
  83. package/posts/46640/index.html +1 -1
  84. package/posts/48762/index.html +1 -1
  85. package/posts/50710/index.html +1 -1
  86. package/posts/52677/index.html +1 -1
  87. package/posts/53662/index.html +1 -1
  88. package/posts/54386/index.html +1 -1
  89. package/posts/54481/index.html +1 -1
  90. package/posts/54787/index.html +1 -1
  91. package/posts/56467/index.html +1 -1
  92. package/posts/57692/index.html +1 -1
  93. package/posts/58203/index.html +1 -1
  94. package/posts/60486/index.html +1 -1
  95. package/posts/61417/index.html +1 -1
  96. package/posts/61712/index.html +1 -1
  97. package/posts/61713/index.html +1 -1
  98. package/posts/646/index.html +1 -1
  99. package/posts/64856/index.html +1 -1
  100. package/posts/64935/index.html +1 -1
  101. package/posts/65382/index.html +1 -1
  102. package/sw.js +1 -1
  103. package/tags/Flash/347/233/270/345/205/263/index.html +1 -1
  104. package/tags/Steam/346/270/270/346/210/217/index.html +1 -1
  105. package/tags/Windows/350/275/257/344/273/266/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//344/270/252/344/272/272/345/260/217/350/256/260/page/3/index.html +1 -1
  109. package/tags//345/205/266/345/256/203/346/270/270/346/210/217/index.html +1 -1
  110. package/tags//345/212/240/350/275/275/345/212/250/347/224/273/index.html +1 -1
  111. 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
  112. package/tags//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  113. package/tags//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  114. package/tags//347/253/231/347/202/271/345/272/225/351/203/250/351/255/224/346/224/271/index.html +1 -1
  115. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  116. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  117. package/tags//350/207/252/345/273/272/351/203/250/347/275/262/index.html +1 -1
  118. package/tags//351/241/265/351/235/242/351/255/224/346/224/271/index.html +1 -1
  119. package/tags//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
package/posts/22945/index.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>butterfly主题添加音乐页面（适配手机） | 汐塔魔法屋</title><noscript>开启JavaScript才能访问本站哦~</noscript><link rel="icon" href="/images/icon.png"><link rel="stylesheet" href="/css/index.css?v=3.0.5"><meta name="baidu-site-verification" content="codeva-F0RjFTve6w"><meta name="msvalidate.01" content="18428535B4425286753107589FC35E79"><meta name="blogsclub-find" content="0bcd40f87500234dd4721904e917e748"><meta name="blogsclub-verify" content="c993246f2c944fed8e4fdc8d024561fe"><link rel="canonical" href="https://blog.storical.space/posts/22945/"><link rel="stylesheet" href="https://jsd.cdn.sinzmise.top/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"><link rel="preconnect"><link rel="preconnect" href="images1.blog.sinzmise.top"><link rel="stylesheet" href="https://jsd.cdn.sinzmise.top/npm/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.min.css"><meta name="description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta name="apple-mobile-web-app-capable" content="汐塔魔法屋"><meta name="theme-color" content="var(--efu-main)"><meta name="apple-mobile-web-app-status-bar-style" content="var(--efu-main)"><link rel="bookmark" href="/images/icon.png"><link rel="apple-touch-icon" href="/images/icon.png" sizes="180x180"><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="webmention" href="https://webmention.io/blog.storical.space/webmention"><link rel="pingback" href="https://webmention.io/blog.storical.space/xmlrpc"><script>console.log(" %c Solitude %c 3.0.5 %c https://github.com/everfu/hexo-theme-solitude","background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff","background:#ff9a9a ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff","background:unset ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff")</script><script>let mdate="7-7,9-18,12-13";mdate=mdate.split(",");let ndate=new Date;for(let e of mdate)e===ndate.getMonth()+1+"-"+ndate.getDate()&&document.documentElement.classList.add("memorial")</script><link rel="stylesheet" href="https://jsd.cdn.sinzmise.top/npm/aplayer/dist/APlayer.min.css"><link rel="stylesheet" href="/css/schedule.css"><link rel="stylesheet" href="//at.alicdn.com/t/c/font_4199232_wlo8truegv.css"><script>(()=>{const e={set:function(e,t,n){if(0===n)return;const o=864e5*n,a={value:t,expiry:(new Date).getTime()+o};localStorage.setItem(e,JSON.stringify(a))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const n=JSON.parse(t);if(!((new Date).getTime()>n.expiry))return n.value;localStorage.removeItem(e)}};window.utils={saveToLocal:e,getCSS:(e,t=!1)=>new Promise(((n,o)=>{const a=document.createElement("link");a.rel="stylesheet",a.href=e,t&&(a.id=t),a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,n())},document.head.appendChild(a)})),getScript:(e,t={})=>new Promise(((n,o)=>{const a=document.createElement("script");a.src=e,a.async=!0,a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,n())},Object.keys(t).forEach((e=>{a.setAttribute(e,t[e])})),document.head.appendChild(a)})),addGlobalFn:(e,t,n=!1,o=window)=>{const a=o.globalFn||{},r=a[e]||{};n&&r[n]||(r[n=n||Object.keys(r).length]=t,a[e]=r,o.globalFn=a)},addEventListenerPjax:(e,t,n,o=!1)=>{e.addEventListener(t,n,o),utils.addGlobalFn("pjax",(()=>{e.removeEventListener(t,n,o)}))}}})()</script><script>initTheme=()=>{let e=window.matchMedia("(prefers-color-scheme: dark)").matches;const t=utils.saveToLocal.get("theme");if(void 0===t){const t=e?"dark":"light";document.documentElement.setAttribute("data-theme",t)}else document.documentElement.setAttribute("data-theme",t);"object"==typeof rm&&rm.mode("dark"===t&&e)},initTheme()</script><script>const GLOBAL_CONFIG={root:"/",algolia:{appId:"72TOQYD33Q",apiKey:"608d2f3acd06140a2473153f6cb61eda",indexName:"hexo",hits:{per_page:6}},localsearch:void 0,runtime:"2023-04-20 00:00:00",lazyload:{enable:!0,error:"/img/friend_404.gif"},copyright:!1,highlight:{limit:200,expand:!0,copy:!0,syntax:"highlight.js"},randomlink:!0,lang:{theme:{dark:"已切换至深色模式",light:"已切换至浅色模式"},copy:{success:"复制成功",error:"复制失败"},backtop:"返回顶部",time:{day:"天前",hour:"小时前",just:"刚刚",min:"分钟前",month:"个月前"},day:" 天",f12:"开发者模式已打开，请遵循GPL协议。",totalk:"无需删除空行，直接输入评论即可",search:{empty:"找不到你查询的内容：${query}",hit:"找到 ${hits} 条结果，用时 ${time} 毫秒",placeholder:"输入关键词快速查找",count:"共 <b>${count}</b> 条结果。",loading:"搜索中..."},webmention:{title:'你有对这篇文章写<a href="https://indieweb.org/responses" target="_blank">回应</a>吗? 你可以在这里提交你的文章网址或推特链接（文章或推特内容需要包含这篇文章的地址，点击这里了解 <a href="https://indieweb.org/Webmention" target="_blank">Webmention</a>）：',placeholder:"你的文章网址或推特链接",likes:"已经有 ${distinctMentions.length} 朋友喜欢、分享或讨论这篇文章:",comment:"引用或评论（${replies.length}）"},barrage:{title:"热评"}},aside:{state:{morning:"✨ 早上好，新的一天开始了",noon:"🍲 午餐时间",afternoon:"🌞 下午好",night:"早点休息",goodnight:"晚安 😴"},witty_words:["你可以的","你一定可以的","祝你好运，陌生人"],witty_comment:{prefix:"好久不见，",back:"欢迎再次回来，"}},covercolor:{enable:!0},comment:{avatar:"https://weavatar.com",commentBarrage:!0},lightbox:"fancybox",post_ai:!1,right_menu:{mode:{dark:"深色模式",light:"浅色模式"},img_error:"此图片无法复制与下载",barrage:{open:"显示热评",close:"关闭热评"},translate:!0,ctrlOriginalMenu:"按住Ctrl+右键可打开浏览器右键菜单"},translate:{translateDelay:0,defaultEncoding:2},lure:!1,expire:!1}</script><script id="config-diff">var PAGE_CONFIG={is_post:!0,is_page:!1,is_home:!1,page:"",toc:!0,comment:!0,ai_text:!1,color:!1}</script><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"></head><body id="body"><canvas id="universe"></canvas><div id="global_bg"></div><div id="loading-box" onclick="preloader.endLoading()" style="zoom:1"><div class="loading-bg"><img class="loading-img nolazyload" src="/images/icon.png" alt="loading image"></div></div><script>const preloader={isLoaded:!1,endLoading:()=>{preloader.isLoaded||(document.getElementById("loading-box").classList.add("loaded"),preloader.isLoaded=!0,preloader.togglePaceDone())},initLoading:()=>{document.getElementById("loading-box").classList.remove("loaded"),preloader.isLoaded=!1,preloader.togglePaceDone()},togglePaceDone:()=>{document.getElementById("body").className=preloader.isLoaded?"pace-done":""}};window.addEventListener("load",(()=>{preloader.endLoading()})),window.addEventListener("pjax:send",(()=>{preloader.initLoading()})),document.addEventListener("pjax:complete",(()=>{preloader.endLoading()})),setTimeout((()=>{preloader.endLoading()}),5e3)</script><div id="console"><div class="close-btn" onclick="sco.hideConsole()"><i class="solitude fa-solid fa-xmark"></i></div><div class="console-card-group"><div class="console-card-group-left"><div class="console-card" id="card-newest-comments" onclick="sco.hideConsole()"><div class="card-content"><div class="author-content-item-tips">互动</div><div class="author-content-item-title">最新评论</div></div><div class="console_recentcomments"><script pjax="">(async()=>{document.querySelector(".console-card .console_recentcomments").textContent="加载中...";const e=/<img [^>]+ atk-emoticon="[^"]+">/g;let t=utils.saveToLocal.get("artalk-recent-comments-console");if(t)return void o(document.querySelector(".console-card .console_recentcomments"),t);let n=[];const c=new URLSearchParams({site_name:"汐塔魔法屋",limit:"6"});function o(e,t){e.innerHTML=0!==t.length?t.map((e=>`\n <div class="comment-card" title="${e.title}" onclick="pjax.loadUrl('${e.url}')">\n <div class="comment-info">\n <img src="${e.avatar}" class="nolazyload" alt="${e.nick}">\n <div>\n <span class="comment-user">${e.nick}</span>\n </div>\n <time class="comment-time" datetime="${e.time}"></time>\n </div>\n <div class="comment-content">${e.content}</div>\n <div class="comment-title">\n <i class="solitude fa-solid fa-comment"></i>\n ${e.title}</div>\n </div>\n `)).join(""):"暂无评论...","undefined"!=typeof sco?sco.changeTimeFormat(document.querySelectorAll(".comment-time")):(document.addEventListener("pjax:complete",(()=>sco.changeTimeFormat(document.querySelectorAll(".comment-time")))),document.addEventListener("DOMContentLoaded",(()=>sco.changeTimeFormat(document.querySelectorAll(".comment-time")))))}function a(t){return t=(t=(t=(t=t.replace(e,"[表情]")).replace(/!\[.*?\]\((.*?)\)/g,"[图片]")).replace(/\[.*?\]\((.*?)\)/g,"[链接]")).replace(/```.*?```/g,"[代码]")}await fetch(`https://atk.pl.blog.sinzmise.top/api/v2/stats/latest_comments?${c}`,{method:"GET"}).then((async e=>e.json())).then((async t=>{for(const o of t.data){if(c=o.content,e.test(c))continue;let t="";o.page_key&&await fetch(o.page_key).then((e=>e.text())).then((e=>{const n=(new DOMParser).parseFromString(e,"text/html");t=n.querySelector("title").innerText})).catch((()=>{t=o.page_key})),t.indexOf("|")>0&&(t=t.split("|")[0]),n.push({title:t,url:o.page_key+"#atk-comment-"+o.id,nick:o.nick,avatar:"https://weavatar.com/avatar/"+o.email_encrypted,time:o.date,content:a(o.content)})}var c;o(document.querySelector(".console-card .console_recentcomments"),n),utils.saveToLocal.set("artalk-recent-comments-console",n,.2)}))})()</script></div></div></div><div class="console-card-group-right"><div class="console-card tags" onclick="sco.hideConsole()"><div class="card-content"><div class="author-content-item-tips">标签</div><div class="author-content-item-title">寻找感兴趣的领域</div></div><div class="card-tag-cloud"><a href="/tags/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/">个人小记<sup>24</sup></a><a href="/tags/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/">游戏相关<sup>4</sup></a><a href="/tags/%E5%85%B6%E5%AE%83%E6%B8%B8%E6%88%8F/">其它游戏<sup>3</sup></a><a href="/tags/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/">项目折腾<sup>3</sup></a><a href="/tags/Windows%E8%BD%AF%E4%BB%B6/">Windows软件<sup>2</sup></a><a href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾<sup>14</sup></a><a href="/tags/%E8%87%AA%E5%BB%BA%E9%83%A8%E7%BD%B2/">自建部署<sup>5</sup></a><a href="/tags/Flash%E7%9B%B8%E5%85%B3/">Flash相关<sup>1</sup></a><a href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/">页面魔改<sup>3</sup></a><a href="/tags/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/">歌曲收集<sup>1</sup></a><a href="/tags/Steam%E6%B8%B8%E6%88%8F/">Steam游戏<sup>1</sup></a><a href="/tags/%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB/">加载动画<sup>1</sup></a><a href="/tags/%E6%82%AC%E6%B5%AE%E5%AE%A0%E7%89%A9-%E7%9C%8B%E6%9D%BF%E5%A8%98/">悬浮宠物/看板娘<sup>1</sup></a><a href="/tags/%E7%AB%99%E7%82%B9%E5%BA%95%E9%83%A8%E9%AD%94%E6%94%B9/">站点底部魔改<sup>1</sup></a></div></div><div class="console-card history" onclick="sco.hideConsole()"><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2025/01/"><span class="card-archive-list-date">2025/01</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/12/"><span class="card-archive-list-date">2024/12</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/11/"><span class="card-archive-list-date">2024/11</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/10/"><span class="card-archive-list-date">2024/10</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/09/"><span class="card-archive-list-date">2024/09</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/08/"><span class="card-archive-list-date">2024/08</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/07/"><span class="card-archive-list-date">2024/07</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/06/"><span class="card-archive-list-date">2024/06</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/05/"><span class="card-archive-list-date">2024/05</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/04/"><span class="card-archive-list-date">2024/04</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/03/"><span class="card-archive-list-date">2024/03</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/02/"><span class="card-archive-list-date">2024/02</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">2024/01</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">4</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/12/"><span class="card-archive-list-date">2023/12</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">2023/11</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">2023/10</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/09/"><span class="card-archive-list-date">2023/09</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">2023/08</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/07/"><span class="card-archive-list-date">2023/07</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">5</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">2023/04</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/03/"><span class="card-archive-list-date">2023/03</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/02/"><span class="card-archive-list-date">2023/02</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">2023/01</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">2022/12</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/12/"><span class="card-archive-list-date">2021/12</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/"><span class="card-archive-list-date">全部文章</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">46</span><span class="card-archive-list-count-unit">篇</span></div></a></li></ul></div></div></div><div class="button-group"><div class="console-btn-item"><span class="darkmode_switchbutton" onclick="sco.switchDarkMode()" title="昼夜切换"><i class="solitude fa-solid fa-circle-half-stroke"></i></span></div><div class="console-btn-item" id="consoleHideAside"><span class="asideSwitch" onclick="sco.switchHideAside()" title="边栏显示控制"><i class="solitude fas fa-arrows-left-right-to-line"></i></span></div><div class="console-btn-item on" id="consoleCommentBarrage" onclick="sco.switchCommentBarrage()"><span class="commentBarrage"><i class="solitude fa-solid fa-comment"></i></span></div><div class="console-btn-item" id="consoleplayer" onclick="musicsw()"><span class="music-switch" title="音乐开关"><i class="solitude fa-solid fa-compact-disc"></i></span></div></div><div class="console-mask" onclick="sco.hideConsole()"></div></div><div id="sidebar" style="zoom:1"><div id="menu-mask" style="display:none"></div><div id="sidebar-menus"><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">46</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/recentcomments/"><div class="headline">评论</div><div class="length-num" id="artalk_allcount"><i class="solitude fa-solid fa-spinner fa-spin"></i></div><script pjax="pjax">(async()=>{const t=new URLSearchParams({site_name:"汐塔魔法屋",limit:"-1"});await fetch(`https://atk.pl.blog.sinzmise.top/api/v2/stats/latest_comments?${t}`,{method:"GET"}).then((async t=>t.json())).then((async t=>{document.querySelector("#artalk_allcount").innerHTML=t.length}))})()</script></a></div></div></div><span class="sidebar-menu-item-title">功能</span><div class="sidebar-menu-item"><span class="darkmode_switchbutton menu-child" onclick="sco.switchDarkMode()"><i class="solitude fa-solid fa-circle-half-stroke"></i><span>显示模式</span></span></div><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">我的</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://www.storical.space/" title="个人主页"><img class="nolazyload back-menu-item-icon" src="/images/icon.png" alt="个人主页"><span class="back-menu-item-text">个人主页</span></a></div></div></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>文章</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-guidang1"></use></svg><span>归档</span></a></li><li><a class="site-page child" href="/tags/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-sekuaibiaoqian"></use></svg><span>标签</span></a></li><li><a class="site-page child" href="/categories/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-fenlei"></use></svg><span>分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/fcircle/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pengyouquan"></use></svg><span>朋友圈</span></a></li><li><a class="site-page child" href="/comments/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-liuyan"></use></svg><span>留言板</span></a></li><li><a class="site-page child" href="/link/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-lianjie"></use></svg><span>友人帐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>休闲</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/games/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-Swf"></use></svg><span>小游戏</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://umami.status.sinzmise.top/share/tliXWHHcZzGWhRgI/blog.storical.space"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-tongji"></use></svg><span>站点统计</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>虫洞</span></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://travel.moe/go.html"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-meng"></use></svg><span>异次元之旅</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://storeweb.cn/s/1707"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-shangdian"></use></svg><span>个站商店</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-boke"></use></svg><span>博客录</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://blogscn.fun/random.html"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-data-input"></use></svg><span>笔墨迹</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.blogsclub.org/go"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-b_x"></use></svg><span>BlogsClub</span></a></li></ul></div></div><span class="sidebar-menu-item-title">标签</span><div class="card-widget card-tags card-archives card-webinfo card-allinfo"><div class="card-tag-cloud"><a href="/tags/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/">个人小记<sup>24</sup></a><a href="/tags/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/">游戏相关<sup>4</sup></a><a href="/tags/%E5%85%B6%E5%AE%83%E6%B8%B8%E6%88%8F/">其它游戏<sup>3</sup></a><a href="/tags/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/">项目折腾<sup>3</sup></a><a href="/tags/Windows%E8%BD%AF%E4%BB%B6/">Windows软件<sup>2</sup></a><a href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾<sup>14</sup></a><a href="/tags/%E8%87%AA%E5%BB%BA%E9%83%A8%E7%BD%B2/">自建部署<sup>5</sup></a><a href="/tags/Flash%E7%9B%B8%E5%85%B3/">Flash相关<sup>1</sup></a><a href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/">页面魔改<sup>3</sup></a><a href="/tags/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/">歌曲收集<sup>1</sup></a><a href="/tags/Steam%E6%B8%B8%E6%88%8F/">Steam游戏<sup>1</sup></a><a href="/tags/%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB/">加载动画<sup>1</sup></a><a href="/tags/%E6%82%AC%E6%B5%AE%E5%AE%A0%E7%89%A9-%E7%9C%8B%E6%9D%BF%E5%A8%98/">悬浮宠物/看板娘<sup>1</sup></a><a href="/tags/%E7%AB%99%E7%82%B9%E5%BA%95%E9%83%A8%E9%AD%94%E6%94%B9/">站点底部魔改<sup>1</sup></a></div></div><span class="sidebar-menu-item-title">网站信息</span><div class="webinfo"><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-file-word"></i><div class="item-name">全站字数 :</div></div><div class="item-count">46.4k</div></div></div></div></div><div class="needEndHide" id="rightside"><div class="rs_hide"><button class="translate" type="button" title="简繁转换">简</button><button class="mode" type="button" title="显示模式切换" onclick="sco.switchDarkMode()"><i class="fas fa-circle-half-stroke"></i></button><button class="aside pc" type="button" title="侧边栏" onclick="sco.switchHideAside()"><i class="fas fa-arrows-alt-h"></i></button></div><div class="rs_show"><button class="config" type="button" title="扩展" onclick="document.querySelector(&quot;.rs_hide&quot;).classList.toggle(&quot;show&quot;)"><i class="fas fa-gear fa-spin"></i></button><button class="mobile toc" type="button" title="目录" onclick='document.querySelector("#card-toc").classList.toggle("open")'><i class="fas fa-list"></i></button><button class="comment" type="button" title="评论" onclick='sco.scrollTo("post-comment")'><i class="fas fa-comment"></i></button><button class="barrage pc" type="button" title="弹" onclick="sco.switchCommentBarrage()"><span>弹</span></button><button class="top" type="button" title="返回顶部" onclick="sco.toTop()"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button></div></div><div class="post h-entry" id="body-wrap"><header class="post-bg" id="page-header"><nav class="show" id="nav"><div id="nav-group"><div id="blog_name"><div class="back-home-button" tabindex="-1"><i class="back-home-button-icon solitude fas fa-bars-progress"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">我的</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://www.storical.space/" title="个人主页"><img class="nolazyload back-menu-item-icon" src="/images/icon.png" alt="个人主页"><span class="back-menu-item-text">个人主页</span></a></div></div></div></div><a id="site-name" href="/" title="返回博客主页"><span class="title">汐塔魔法屋</span><i class="solitude fa-solid fa-home"></i></a></div><div id="page-name-mask"><div id="page-name"><a id="page-name-text" onclick="sco.toTop()">butterfly主题添加音乐页面（适配手机）</a></div></div><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>文章</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-guidang1"></use></svg><span>归档</span></a></li><li><a class="site-page child" href="/tags/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-sekuaibiaoqian"></use></svg><span>标签</span></a></li><li><a class="site-page child" href="/categories/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-fenlei"></use></svg><span>分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/fcircle/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pengyouquan"></use></svg><span>朋友圈</span></a></li><li><a class="site-page child" href="/comments/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-liuyan"></use></svg><span>留言板</span></a></li><li><a class="site-page child" href="/link/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-lianjie"></use></svg><span>友人帐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>休闲</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/games/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-Swf"></use></svg><span>小游戏</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://umami.status.sinzmise.top/share/tliXWHHcZzGWhRgI/blog.storical.space"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-tongji"></use></svg><span>站点统计</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>虫洞</span></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://travel.moe/go.html"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-meng"></use></svg><span>异次元之旅</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://storeweb.cn/s/1707"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-shangdian"></use></svg><span>个站商店</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-boke"></use></svg><span>博客录</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://blogscn.fun/random.html"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-data-input"></use></svg><span>笔墨迹</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.blogsclub.org/go"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-b_x"></use></svg><span>BlogsClub</span></a></li></ul></div></div></div><div id="nav-left"></div><div id="nav-right"><div class="nav-button" id="travellings_button"><a class="site-page" target="_blank" rel="noopener" href="https://www.travellings.cn/go-by-clouds.html"><i class="solitude fas fa-train"></i></a></div><div class="nav-button" id="randomPost_button"><a class="site-page" onclick="toRandomPost()" title="随机一篇文章" href="javascript:void(0);"><i class="solitude fa-solid fa-dice-d6"></i></a></div><div class="nav-button" id="search-button"><a class="site-page social-icon search" href="javascript:void(0);" title="搜索"><i class="solitude fa-solid fa-magnifying-glass"></i></a></div><div class="nav-button" id="nav-console"><a class="console_switchbutton" onclick="sco.showConsole()" title="中控台" href="javascript:void(0);"><label><i class="left"></i><i class="center"></i><i class="right"></i></label></a></div><div id="toggle-menu"><a class="site-page"><i class="solitude fa-solid fa-bars"></i></a></div></div></div></nav><div class="coverdiv" id="coverdiv"><img class="nolazyload" id="post-cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp" alt="butterfly主题添加音乐页面（适配手机）"></div><div id="post-info"><div id="post-firstinfo"><div class="meta-firstline"><a class="post-meta-original" title="该文章为原创文章，注意版权协议">原创</a><span class="post-meta-categories"><a class="post-meta-categories p-category" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></span><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/"><span class="tags-name tags-punctuation"><i class="solitude fa-solid fa-hashtag"></i>站点折腾</span></a><a class="post-meta__tags" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/"><span class="tags-name tags-punctuation"><i class="solitude fa-solid fa-hashtag"></i>页面魔改</span></a></div></div></div></div><h1 class="post-title p-name">butterfly主题添加音乐页面（适配手机）</h1><div id="post-meta"><div class="meta-secondline"><span class="post-meta-date" title="发布于 2023-01-08 22:31:46"><i class="post-meta-icon solitude fas fa-calendar-days"></i><time class="dt-published" datetime="2023-01-08T22:31:46.000Z">2023-01-08T22:31:46.000Z</time></span><span class="post-meta-date" title="最后更新于 2025-01-21 09:56:59"><i class="post-meta-icon solitude fa-solid fa-arrows-rotate"></i><time class="dt-updated" datetime="2025-01-21T09:56:59.245Z">2025-01-21T09:56:59.245Z</time></span><span class="post-meta-wordcount"><i class="post-meta-icon solitude fa-solid fa-file-word" title="文章字数"></i><span class="word-count">2.9k</span><span class="post-meta-separator"></span><i class="post-meta-icon solitude fa-solid fa-clock" title="阅读耗时"></i><span>16 min</span></span><span class="post-meta-position" title="作者IP归属地为广东潮州"><i class="post-meta-icon solitude fas fa-location-dot"></i><span class="p-location">广东潮州</span></span><a class="post-meta-pv" href="/posts/22945/" title="文章热度"><i class="post-meta-icon solitude fa-solid fa-fire-flame-curved"></i><span id="busuanzi_value_page_pv"><i class="solitude fa-solid fa-spinner fa-spin"></i></span></a><span class="post-meta-commentcount" title="评论数" onclick='sco.scrollTo("post-comment")'><i class="solitude fa-solid fa-comment"></i><a href="/posts/22945/#post-comment"><span class="artalk-count"><i class="solitude fa-solid fa-spinner fa-spin"></i></span></a></span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section></header><main class="layout" id="content-inner"><div id="post"><article class="post-content article-container e-content"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><div class="tip info"><p>本博客音乐页面已经换成了<a target="_blank" rel="noopener" href="https://anzhiy.cn/posts/c3d3.html">安知鱼大佬的方案</a></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="/img/load-games.gif" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" alt="msedge_x1MaJIbBQg"><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="/img/load-games.gif" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-09-59-57-499_com.2sej4yl2vuw0.webp" alt="Screenshot_2023-01-09-09-59-57-499_com"><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="/img/load-games.gif" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-10-02-41-554_com.6tcc3lty2uo0.webp" alt="Screenshot_2023-01-09-10-02-41-554_com"><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<del>但我懒得适配，于是就有了这个教程</del> ）</p><h1 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h1><div class="tabs" id="教程开始,"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#教程开始,-0">1.0</button></li><li class="tab"><button type="button" data-href="#教程开始,-1">2.0</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="教程开始,-0"><p></p><div class="tip info"><p>这个教程是我基于<a target="_blank" rel="noopener" href="https://www.php.cn/xiazai/js/6169">https://www.php.cn/xiazai/js/6169</a> 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p></div><p></p><p></p><div class="tip warning"><p>目前博客已经弃用这个方案，改用2.0版本</p></div><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><tbody><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='stylesheet' href='/css/musics.css')</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='/svg/playlist.svg', alt='playlist-icon')</span><br><span class="line"> button.player__button.player__button--absolute--center.play</span><br><span class="line"> img(src='/svg/play.svg', alt='play-icon')</span><br><span class="line"> img(src='/svg/pause.svg', alt='pause-icon')</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='cover')</span><br><span class="line"> .player__controls</span><br><span class="line"> button.player__button.back</span><br><span class="line"> img.img(src='/svg/back.svg', alt='back-icon')</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='/svg/next.svg', alt='next-icon')</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='cover')</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="#",target="_blank") :D 获取中...</span><br><span class="line">script(src='/js/player.js')</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch('https://v1.hitokoto.cn')</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; {</span><br><span class="line"> const hitokoto = document.querySelector('#hitokoto_text')</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + " —— " + data.creator + "「" + data.from + "」"</span><br><span class="line"> })</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></tbody></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><tbody><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 {</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">}</span><br><span class="line"><span class="selector-class">.img</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>: block ;</span><br><span class="line"> <span class="attribute">object-fit</span>: cover ;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.list</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flex</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.uppercase</span>{</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span><span class="selector-class">.open-header</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img--absolute</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span>{</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__content</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__img</span> {</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">}</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> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.text-wrap</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> text-wrap {</span><br><span class="line"></span><br><span class="line"> <span class="number">75%</span>{</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"> }</span><br><span class="line"></span><br><span class="line"> <span class="number">100%</span>{</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"> }</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.playlist</span> {</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">}</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> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--nw</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--center</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[alt =<span class="string">"pause-icon"</span>]</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__context</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__context</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> opacity {</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="number">0%</span> {</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"> }</span><br><span class="line"></span><br><span class="line"> <span class="number">90%</span>{</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"> }</span><br><span class="line"></span><br><span class="line">}</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>{</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__title</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres</span> {</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">}</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>{</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span><span class="selector-pseudo">::before</span> {</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">" "</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span>::-webkit-scrollbar {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> <span class="selector-class">.player__context</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-name</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-time</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.audio</span> {</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">}</span><br><span class="line"><span class="selector-class">.player__song-name</span>,<span class="selector-class">.slider__title</span>{</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#000</span></span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#hitokoto</span>{</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br></pre></td></tr></tbody></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><tbody><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">"use strict"</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">"#e5e7e9"</span>, <span class="string">"#ff4545"</span>, <span class="string">"#f8ded3"</span>, <span class="string">"#ffc382"</span>, <span class="string">"#f5eda6"</span>, <span class="string">"#ffcbdc"</span>, <span class="string">"#dcf3f3"</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">".player"</span>);</span><br><span class="line"><span class="keyword">const</span> playerHeader = player.<span class="title function_">querySelector</span>(<span class="string">".player__header"</span>);</span><br><span class="line"><span class="keyword">const</span> playerControls = player.<span class="title function_">querySelector</span>(<span class="string">".player__controls"</span>);</span><br><span class="line"><span class="keyword">const</span> playerPlayList = player.<span class="title function_">querySelectorAll</span>(<span class="string">".player__song"</span>);</span><br><span class="line"><span class="keyword">const</span> playerSongs = player.<span class="title function_">querySelectorAll</span>(<span class="string">".audio"</span>);</span><br><span class="line"><span class="keyword">const</span> playButton = player.<span class="title function_">querySelector</span>(<span class="string">".play"</span>);</span><br><span class="line"><span class="keyword">const</span> nextButton = player.<span class="title function_">querySelector</span>(<span class="string">".next"</span>);</span><br><span class="line"><span class="keyword">const</span> backButton = player.<span class="title function_">querySelector</span>(<span class="string">".back"</span>);</span><br><span class="line"><span class="keyword">const</span> playlistButton = player.<span class="title function_">querySelector</span>(<span class="string">".playlist"</span>);</span><br><span class="line"><span class="keyword">const</span> slider = player.<span class="title function_">querySelector</span>(<span class="string">".slider"</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContext = player.<span class="title function_">querySelector</span>(<span class="string">".slider__context"</span>);</span><br><span class="line"><span class="keyword">const</span> sliderName = sliderContext.<span class="title function_">querySelector</span>(<span class="string">".slider__name"</span>);</span><br><span class="line"><span class="keyword">const</span> sliderTitle = sliderContext.<span class="title function_">querySelector</span>(<span class="string">".slider__title"</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContent = slider.<span class="title function_">querySelector</span>(<span class="string">".slider__content"</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">"img[alt = 'pause-icon']"</span>);</span><br><span class="line"><span class="keyword">const</span> playIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">"img[alt = 'play-icon']"</span>);</span><br><span class="line"><span class="keyword">const</span> progres = player.<span class="title function_">querySelector</span>(<span class="string">".progres"</span>);</span><br><span class="line"><span class="keyword">const</span> progresFilled = progres.<span class="title function_">querySelector</span>(<span class="string">".progres__filled"</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>) {</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">"open-header"</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">"move"</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">"open-slider"</span>);</span><br><span class="line"> </span><br><span class="line">}</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>) {</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">"open-header"</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">"move"</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">"open-slider"</span>);</span><br><span class="line"> </span><br><span class="line">}</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>) {</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength) {</span><br><span class="line"> count = count;</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</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">${left}</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">}</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>) {</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == <span class="number">0</span>) {</span><br><span class="line"> count = count</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</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">${left}</span>%, 0, 0)`</span>;</span><br><span class="line"> count--;</span><br><span class="line"></span><br><span class="line">}</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>) {</span><br><span class="line"></span><br><span class="line"> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> = <span class="string">"opacity"</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">".player__title"</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">".player__song-name"</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>) {</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">"span"</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">"text-wrap"</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderName.<span class="property">textContent</span> + <span class="string">" "</span> + sliderName.<span class="property">textContent</span>; </span><br><span class="line"> sliderName.<span class="property">innerHTML</span> = <span class="string">""</span>;</span><br><span class="line"> sliderName.<span class="title function_">append</span>(textWrap);</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> (sliderTitle.<span class="property">textContent</span>.<span class="property">length</span> &gt;= <span class="number">18</span>) {</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">"span"</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">"text-wrap"</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderTitle.<span class="property">textContent</span> + <span class="string">" "</span> + sliderTitle.<span class="property">textContent</span>; </span><br><span class="line"> sliderTitle.<span class="property">innerHTML</span> = <span class="string">""</span>;</span><br><span class="line"> sliderTitle.<span class="title function_">append</span>(textWrap);</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"><span class="keyword">function</span> <span class="title function_">changeBgBody</span>(<span class="params"></span>) {</span><br><span class="line"> body.<span class="property">style</span>.<span class="property">backgroundColor</span> = bgBody[count];</span><br><span class="line">}</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>) {</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) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (item != song) {</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"> }</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> (isPlay) song.<span class="title function_">play</span>();</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"><span class="keyword">function</span> <span class="title function_">playSong</span>(<span class="params"></span>) {</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>) {</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">"none"</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">"block"</span>;</span><br><span class="line"></span><br><span class="line"> }<span class="keyword">else</span>{</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">""</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">""</span>;</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"></span><br><span class="line">}</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>) {</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">"%"</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>) {</span><br><span class="line"> <span class="title function_">next</span>();</span><br><span class="line"> }</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>) {</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">"block"</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">""</span>;</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line">}</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>) {</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">}</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>) {</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">"0"</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">"0"</span> + sec;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> playerSongTime = <span class="string">`<span class="subst">${min}</span>:<span class="subst">${sec}</span>`</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">closest</span>(<span class="string">".player__song"</span>).<span class="title function_">querySelector</span>(<span class="string">".player__song-time"</span>).<span class="title function_">append</span>(playerSongTime);</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"><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">"click"</span>, openPlayer);</span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">"animationend"</span>, <span class="function">() =&gt;</span> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> =<span class="string">''</span>);</span><br><span class="line">playlistButton.<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, closePlayer);</span><br><span class="line"></span><br><span class="line">nextButton.<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, next);</span><br><span class="line"></span><br><span class="line">backButton.<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, <span class="function">() =&gt;</span> {</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">});</span><br><span class="line"></span><br><span class="line">playButton.<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, <span class="function">() =&gt;</span> {</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">});</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> {</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">"loadeddata"</span> , durationSongs);</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">"timeupdate"</span> , progresUpdate);</span><br><span class="line"> </span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">progres.<span class="title function_">addEventListener</span>(<span class="string">"mousedown"</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> {</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">});</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">"mousemove"</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">"mouseup"</span>, <span class="function">() =&gt;</span> {</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">});</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> {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure></div></details></li><li>编辑[blogroot]\themes\butterfly\layout\page.pug<figure class="highlight diff"><table><tbody><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 'tags'</span><br><span class="line"> include includes/page/tags.pug</span><br><span class="line"> when 'link'</span><br><span class="line"> include includes/page/flink.pug</span><br><span class="line"> when 'bb'</span><br><span class="line"> include includes/page/bb.pug</span><br><span class="line"> when 'categories'</span><br><span class="line"> include includes/page/categories.pug</span><br><span class="line"><span class="addition">+ when 'music'</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></tbody></table></figure></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tbody><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">'Eutopia'</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">'Yoohsic Roomz'</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">'http://music.163.com/song/media/outer/url?id=29129889.mp3'</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">'Everything'</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">'Yinyues'</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">'http://music.163.com/song/media/outer/url?id=29544794.mp3'</span></span><br><span class="line"><span class="comment"># - name: '歌曲名字'</span></span><br><span class="line"><span class="comment"># author: '歌曲作者'</span></span><br><span class="line"><span class="comment"># image: '歌曲图片'</span></span><br><span class="line"><span class="comment"># url: '歌曲链接'</span></span><br></pre></td></tr></tbody></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><tbody><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: 'music'</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></tbody></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="教程开始,-1"><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><tbody><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="/assets/css/tplayer.css"</span><br><span class="line"> rel="stylesheet"</span><br><span class="line"> type="text/css"</span><br><span class="line">)</span><br><span class="line">link(</span><br><span class="line"> href="/assets/plugins/FontAwesome4.1/css/font-awesome.min.css"</span><br><span class="line"> rel="stylesheet"</span><br><span class="line"> type="text/css"</span><br><span class="line">)</span><br><span class="line">script(src="/assets/js/jquery.js")</span><br><span class="line">script(src="/assets/js/jquery-ui.js")</span><br><span class="line">script(src="/assets/js/tPlayer.js")</span><br><span class="line">#t_wrapper</span><br><span class="line"> #t_cover</span><br><span class="line"> img(src="/assets/images/logo.png")</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="width: 0%;")</span><br><span class="line"> span.ui-corner-all.ui-slider-handle.ui-state-default(style="left: 0%;" tabindex="0")</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="#")=musics.name + ' - ' + musics.author</span><br><span class="line"> audio(preload="none" src=musics.url type="audio/mp3")</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="#",target="_blank",style="text-align:center;color: #fff;") :D 获取中...</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch('https://v1.hitokoto.cn')</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; {</span><br><span class="line"> const hitokoto = document.querySelector('#hitokoto_text')</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + " —— " + data.creator + "「" + data.from + "」"</span><br><span class="line"> })</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></tbody></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="tip info"><p>1.0想升级成2.0的，下面的步骤可以不用做</p></div></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tbody><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">'Eutopia'</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">'Yoohsic Roomz'</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">'http://music.163.com/song/media/outer/url?id=29129889.mp3'</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">'Everything'</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">'Yinyues'</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">'http://music.163.com/song/media/outer/url?id=29544794.mp3'</span></span><br><span class="line"><span class="comment"># - name: '歌曲名字'</span></span><br><span class="line"><span class="comment"># author: '歌曲作者'</span></span><br><span class="line"><span class="comment"># image: '歌曲图片'</span></span><br><span class="line"><span class="comment"># url: '歌曲链接'</span></span><br></pre></td></tr></tbody></table></figure></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tbody><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: 'music'</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></tbody></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button></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></article><div class="post-copyright"><div class="post-copyright__author_group"><div class="post-copyright__author_img"><img class="post-copyright__author_img_front" src="/images/icon.png"></div><div class="post-copyright__author_name">汐塔魔法屋</div><div class="post-copyright__author_desc">Ceta Magical House</div></div><div class="post-tools" id="post-tools"><div class="post-tools-left"><div id="quit-box" onclick="RemoveRewardMask()"></div><div class="reward-link mode"><a class="reward-link-button" href="/atom.xml"><i class="solitude fa-solid fa-seedling"></i>订阅</a></div></div></div><div class="social-share"><a class="social-share-ico icon-qq" target="_blank" rel="noopener" href="https://connect.qq.com/widget/shareqq/index.html?url=https%3A%2F%2Fblog.storical.space%2Fposts%2F22945%2F&amp;title=butterfly%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%EF%BC%88%E9%80%82%E9%85%8D%E6%89%8B%E6%9C%BA%EF%BC%89&amp;desc=%E5%8E%9F%E5%85%88%E7%9A%84%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%E5%AD%98%E5%9C%A8BUG%EF%BC%9A%E6%89%8B%E6%9C%BA%E8%AE%BF%E9%97%AE%E4%BC%9A%E9%94%99%E4%B9%B1%EF%BC%8C%E6%89%80%E4%BB%A5%E6%88%91%E9%87%8D%E6%96%B0%E6%89%BE%E4%BA%86%E4%B8%AA%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8%E6%BA%90%E7%A0%81&amp;summary=%E5%8E%9F%E5%85%88%E7%9A%84%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%E5%AD%98%E5%9C%A8BUG%EF%BC%9A%E6%89%8B%E6%9C%BA%E8%AE%BF%E9%97%AE%E4%BC%9A%E9%94%99%E4%B9%B1%EF%BC%8C%E6%89%80%E4%BB%A5%E6%88%91%E9%87%8D%E6%96%B0%E6%89%BE%E4%BA%86%E4%B8%AA%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8%E6%BA%90%E7%A0%81&amp;site=butterfly%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%EF%BC%88%E9%80%82%E9%85%8D%E6%89%8B%E6%9C%BA%EF%BC%89&amp;pics=https%3A%2F%2Fjsd.cdn.storisinz.site%2Fgh%2FSinzMise%2FMYPictures%40master%2F20230114%2Flogo.22azkjyis5uo.webp" title="分享到QQ"><i class="solitude fab fa-qq"></i></a><a class="social-share-ico icon-weibo" target="_blank" rel="noopener" href="http://service.weibo.com/share/share.php?url=https%3A%2F%2Fblog.storical.space%2Fposts%2F22945%2F&amp;title=butterfly%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%EF%BC%88%E9%80%82%E9%85%8D%E6%89%8B%E6%9C%BA%EF%BC%89&amp;pic=https%3A%2F%2Fjsd.cdn.storisinz.site%2Fgh%2FSinzMise%2FMYPictures%40master%2F20230114%2Flogo.22azkjyis5uo.webp" title="分享到微博"><i class="solitude fab fa-weibo"></i></a><a class="social-share-ico icon-twitter" target="_blank" rel="noopener" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fblog.storical.space%2Fposts%2F22945%2F&amp;text=butterfly%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%EF%BC%88%E9%80%82%E9%85%8D%E6%89%8B%E6%9C%BA%EF%BC%89" title="分享到Twitter"><i class="solitude fab fa-twitter"></i></a><a class="social-share-ico icon-facebook" target="_blank" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.storical.space%2Fposts%2F22945%2F" title="分享到Facebook"><i class="solitude fab fa-facebook"></i></a><div class="social-share-ico icon-link" onclick="utils.copy(&quot;https://blog.storical.space/posts/22945/&quot;)" title="复制文章链接"><i class="solitude fas fa-link"></i></div><div class="social-share-ico icon-qrcode" title="使用手机扫码阅读这篇文章"><i class="solitude fas fa-qrcode"></i><div class="share-main"><div class="share-main-all"><div id="qrcode"></div><div class="reward-dec">使用手机扫码阅读这篇文章</div></div></div><script pjax="">"function"==typeof QRCode&&new QRCode(document.getElementById("qrcode"),{text:"https://blog.storical.space/posts/22945/",correctLevel:QRCode.CorrectLevel.L}),window.addEventListener("DOMContentLoaded",(()=>{new QRCode(document.getElementById("qrcode"),{text:"https://blog.storical.space/posts/22945/",correctLevel:QRCode.CorrectLevel.L})}))</script></div></div><div class="post-copyright__notice"><span class="post-copyright-info">本文是原创文章，采用<a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans">CC BY-NC-SA 4.0</a>协议，完整转载请注明来自<a href="/">汐塔魔法屋</a></span></div></div><div class="post-tools-right"><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/"><span class="tags-punctuation"><i class="solitude fa-solid fa-hashtag"></i>站点折腾<span class="tagsPageCount">14</span></span></a><a class="post-meta__tags" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/"><span class="tags-punctuation"><i class="solitude fa-solid fa-hashtag"></i>页面魔改<span class="tagsPageCount">3</span></span></a></div></div></div><nav class="needEndHide pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/38964/"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div class="next-post pull-right"><a href="/posts/23021/"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">再见2022，你好2023</div></div></a></div></nav><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="solitude fa-solid fa-comment"></i> <span>评论</span> <span class="count">(<span class="artalk-count"></span>)</span></div></div><div class="comment-wrap"><div id="artalk-wrap"></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>网络回响</span></div></div><div class="comment-wrap webmention-timeline"></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info h-card"><div class="card-content"><div class="card-info-avatar is-center"><div class="author-info__top-group"><div class="author-info__sayhi" id="author-info__sayhi" onclick="sco.changeWittyWord()"></div></div></div><div class="avatar-img-group"><img class="avatar-img" alt="头像" src="/img/avatar.webp"></div><div class="author-info__description_group"><div class="author-info__description">人生 没必要 想太多“为什么”<br>也 没必要 想太多乱七八糟的事情<br>而是应该想“怎么做”“怎么样”“会成功的”<br>给自己一些鼓励和关爱<br>才能遇到好的生活</div></div><div class="author-info__bottom-group"><span class="author-info__bottom-group-left"><div class="author-info__name p-name p-author">王九弦SZ·Ninty</div><div class="author-info__desc p-note">种下故事的种子，在光的照耀下生根发芽</div></span><div class="card-info-social-icons is-center"><a class="social-icon u-url" target="_blank" href="https://github.com/SinzMise" title="Github" rel="me noopener"><i class="solitude fab fa-github"></i></a><a class="social-icon u-url u-email" href="mailto:email@sinzmise.top" title="Email" rel="me"><i class="solitude fa fa-envelope"></i></a></div></div></div></div><div class="card-widget" id="card-widget-schedule"><div class="item-headline"><i></i><span></span></div><div class="item-content"><div id="schedule-area-left"><div id="schedule-title">距离除夕</div><div id="schedule-days"></div><div id="schedule-date">2025-01-28</div></div><div id="schedule-area-right"><div class="schedule-r0"><div class="schedule-d0">本年</div><div class="schedule-d1"><span id="p_span_year" class="aside-span1"></span> <span class="aside-span2">还剩<a></a>天</span><progress max="365" id="pBar_year"></progress></div></div><div class="schedule-r1"><div class="schedule-d0">本月</div><div class="schedule-d1"><span id="p_span_month" class="aside-span1"></span> <span class="aside-span2">还剩<a></a>天</span><progress max="30" id="pBar_month"></progress></div></div><div class="schedule-r2"><div class="schedule-d0">本周</div><div class="schedule-d1"><span id="p_span_week" class="aside-span1"></span> <span class="aside-span2">还剩<a></a>天</span><progress max="7" id="pBar_week"></progress></div></div></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="solitude fa-solid fa-bars"></i><span>文章目录</span></div><div class="toc-content" id="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%95%99%E7%A8%8B"><span class="toc-text">教程</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#TO-DO"><span class="toc-text">TO DO</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="solitude fa-solid fa-map"></i><span>最近发布</span></div><div class="aside-list"><a class="aside-list-item" href="/posts/60486/" title="新的域名，新的故事"><div class="thumbnail"><img alt="新的域名，新的故事" src="https://images1.blog.sinzmise.top/azurlane/15.avif"></div><div class="content"><span class="title" href="/posts/60486/" title="新的域名，新的故事">新的域名，新的故事</span><span class="article-recent_post_categories" href="/posts/60486/">个人小记</span></div></a><a class="aside-list-item" href="/posts/23226/" title="很屑的2024年度总结（"><div class="thumbnail"><img alt="很屑的2024年度总结（" src="https://images1.blog.sinzmise.top/20250121/再见2024，你好2025.39l9926twi.avif"></div><div class="content"><span class="title" href="/posts/23226/" title="很屑的2024年度总结（">很屑的2024年度总结（</span><span class="article-recent_post_categories" href="/posts/23226/">个人小记</span></div></a><a class="aside-list-item" href="/posts/65382/" title="圣诞快乐+12月小记"><div class="thumbnail"><img alt="圣诞快乐+12月小记" src="https://images1.blog.sinzmise.top/azurlane/13.avif"></div><div class="content"><span class="title" href="/posts/65382/" title="圣诞快乐+12月小记">圣诞快乐+12月小记</span><span class="article-recent_post_categories" href="/posts/65382/">个人小记</span></div></a><a class="aside-list-item" href="/posts/61713/" title="2024-11小记"><div class="thumbnail"><img alt="2024-11小记" src="https://images1.blog.sinzmise.top/azurlane/17.avif"></div><div class="content"><span class="title" href="/posts/61713/" title="2024-11小记">2024-11小记</span><span class="article-recent_post_categories" href="/posts/61713/">个人小记</span></div></a><a class="aside-list-item" href="/posts/61712/" title="2024-10小记"><div class="thumbnail"><img alt="2024-10小记" src="https://images1.blog.sinzmise.top/images/2024-10.9gwlrtheoo.webp"></div><div class="content"><span class="title" href="/posts/61712/" title="2024-10小记">2024-10小记</span><span class="article-recent_post_categories" href="/posts/61712/">个人小记</span></div></a></div></div><div class="card-widget card-tags card-archives card-webinfo card-allinfo"><div class="webinfo"><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon fa-solid fa-folder-closed"></i><div class="item-name">文章总数 :</div></div><div class="item-count">46</div></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-eye"></i><div class="item-name">总访问数 :</div></div><span id="busuanzi_value_site_pv"><i class="solitude fa-solid fa-spinner fa-spin"></i></span></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-user"></i><div class="item-name">总访客数 :</div></div><span id="busuanzi_value_site_uv"><i class="solitude fa-solid fa-spinner fa-spin"></i></span></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-calendar-day"></i><div class="item-name">建站天数 :</div></div><div class="item-count" id="runtimeshow"></div></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-arrows-rotate"></i><div class="item-name">最后更新 :</div></div><time class="item-count" datetime="2025-01-21T09:57:47.380Z"></time></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-file-word"></i><div class="item-name">全站字数 :</div></div><div class="item-count">46.4k</div></div></div></div></div></div></main><footer id="footer"><div id="footer_deal"><a class="deal_link" target="_blank" rel="noopener" href="https://github.com/SinzMise" title="Github"><i class="solitude fab fa-github"></i></a><a class="deal_link" href="mailto:email@sinzmise.top" title="Mail"><i class="solitude far fa-envelope"></i></a><div class="nolazyload footer_mini_logo" id="footer_mini_logo" title="返回顶部" onclick="sco.toTop()"><img src="/img/avatar.webp" alt="返回顶部"></div><a class="deal_link" target="_blank" rel="noopener" href="https://space.bilibili.com/479627766" title="Bilibili"><i class="solitude fab fa-bilibili"></i></a><a class="deal_link" target="_blank" rel="noopener" href="https://www.storical.space/" title="Home"><i class="solitude fa fa-home"></i></a></div><div id="st-footer"><div class="footer-group"><h3 class="footer-title">我加入的1</h3><div class="footer-links"><a class="footer-item" target="_blank" rel="noopener" href="https://zhblogs.ohyee.cc/" title="中文博客列表">中文博客列表</a><a class="footer-item" target="_blank" rel="noopener" href="https://storeweb.cn/member/o/1585" title="个站商店">个站商店</a><a class="footer-item" target="_blank" rel="noopener" href="https://bf.zzxworld.com/s/995" title="BlogFinder">BlogFinder</a><a class="footer-item" target="_blank" rel="noopener" href="https://sites.applinzi.com/site-info?siteType=life&amp;siteId=64cb373190e35300a8eec654" title="站点聚合平台">站点聚合平台</a><a class="footer-item" target="_blank" rel="noopener" href="https://boke.lu/" title="博客录">博客录</a></div></div><div class="footer-group"><h3 class="footer-title">我加入的2</h3><div class="footer-links"><a class="footer-item" target="_blank" rel="noopener" href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/" title="RssBlog">RssBlog</a><a class="footer-item" target="_blank" rel="noopener" href="https://blogscn.fun/" title="笔墨迹">笔墨迹</a><a class="footer-item" target="_blank" rel="noopener" href="https://daohang.lusongsong.com/" title="博客大全">博客大全</a><a class="footer-item" target="_blank" rel="noopener" href="https://www.blogsclub.org/blog/99.html" title="BlogsClub">BlogsClub</a><a class="footer-item" target="_blank" rel="noopener" href="https://ourblo.gs/blogs/55/" title="OurBlogs">OurBlogs</a></div></div><div class="footer-group"><div class="footer-title-group"><h3 class="footer-title">友链</h3><button class="random-friends-btn" onclick="randomLinksList()" title="友链"><i class="solitude fa-solid fa-arrows-rotate"></i></button></div><div class="footer-links" id="friend-links-in-footer"></div></div></div><div id="footer-bar"><div class="footer-bar-links"><div class="footer-bar-left"><div class="copyright">© 2023 - 2025 By&nbsp;<a class="footer-bar-link" href="/"><img class="author-avatar" src="/images/icon.png">王九弦SZ·Ninty</a></div><div class="beian-group"><a class="footer-bar-link" target="_blank" rel="noopener" href="https://icp.gov.moe/?keyword=20231033" title="萌ICP备20231033号"><span class="beian-name">萌ICP备20231033号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://icp.yuncheng.fun/id.php?keyword=20241025" title="团ICP备20241025号"><span class="beian-name">团ICP备20241025号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://beian.miit.cn.com/gov/search.php?query=20240818" title="MIIT备20240818号"><img class="beian-icon" src="https://beian.miit.cn.com/logo.svg" alt="MIIT备20240818号"><span class="beian-name">MIIT备20240818号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/" title="官码2024000155号"><span class="beian-name">官码2024000155号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://icp.snzy.cc/?id=2024120181" title="梵AIA盟2024120181号"><img class="beian-icon" src="https://icp.snzy.cc/static/picture/icpba.png" alt="梵AIA盟2024120181号"><span class="beian-name">梵AIA盟2024120181号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://icp.sepocatch.xyz/search.php?keyword=blog.storical.space" title="SICP备20243448号"><span class="beian-name">SICP备20243448号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://hexo.io/">框架：Hexo</a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://github.com/everfu/hexo-theme-solitude">主题：Solitude</a></div></div><div class="footer-bar-right"><a class="footer-bar-link" alt="<a href=&quot;https://xn--sr8hvo.ws/previous&quot;>←</a>&amp;nbsp;An&amp;nbsp;<a href=&quot;https://xn--sr8hvo.ws&quot;>IndieWeb Webring</a>&amp;nbsp;🕸💍&amp;nbsp;<a href=&quot;https://xn--sr8hvo.ws/next&quot;>→</a>"></a><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a>&nbsp;An&nbsp;<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a>&nbsp;🕸💍&nbsp;<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a><a class="footer-bar-link" href="/atom.xml" alt="RSS">RSS</a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans" alt="License"><i class="solitude fas fa-copyright"></i><i class="solitude fab fa-creative-commons-by"></i><i class="solitude fab fa-creative-commons-nc"></i><i class="solitude fab fa-creative-commons-nd"></i></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" alt="开往-友链接力"><img src="https://www.travellings.cn/assets/logo.gif" alt="开往-友链接力"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://boringbay.com/" alt="无聊湾 🥱 The Boring Bay"><img src="https://boringbay.com/api/badge/blog.storical.space" alt="无聊湾 🥱 The Boring Bay"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://blogscn.fun/" alt="本站已加入BLOGS·CN"><img src="https://photo.xiangming.site/img/blogscn.png" alt="本站已加入BLOGS·CN"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://blogscn.fun/random.html" alt="BLOGS·CN随机访问"><img src="https://photo.xiangming.site/img/footer.gif" alt="BLOGS·CN随机访问"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://www.blogsclub.org/go" alt="空间穿梭-随机访问BlogsClub成员博客"><img src="https://www.blogsclub.org/images/shuttle_1.png" alt="空间穿梭-随机访问BlogsClub成员博客"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://http3.wcode.net/?q=blog.storical.space" alt="本站支持HTTP/3"><img src="https://http3.wcode.net/badges/http3.svg?host=blog.storical.space" alt="本站支持HTTP/3"></a></div></div></div><div class="comment-barrage needEndHide"></div></footer></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="solitude fa-solid fa-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="solitude fa-solid fa-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="solitude fa-solid fa-arrows-rotate"></i></div><div class="rightMenu-item" id="menu-top"><i class="solitude fa-solid fa-arrow-up"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuPlugin"><div class="rightMenu-item" id="menu-copytext"><i class="solitude fa-solid fa-clone"></i><span>复制选中文本</span></div><div class="rightMenu-item" id="menu-pastetext"><i class="solitude fa-solid fa-clipboard"></i><span>粘贴文本</span></div><div class="rightMenu-item" id="menu-commenttext"><i class="solitude fa-solid fa-comment-medical"></i><span>引用到评论</span></div><div class="rightMenu-item" id="menu-newwindow"><i class="solitude fa-regular fa-window-maximize"></i><span>新窗口打开</span></div><div class="rightMenu-item" id="menu-copylink"><i class="solitude fa-solid fa-link"></i><span>复制链接地址</span></div><div class="rightMenu-item" id="menu-copyimg"><i class="solitude fa-solid fa-clone"></i><span>复制此图片</span></div><div class="rightMenu-item" id="menu-downloadimg"><i class="solitude fa-solid fa-cloud-arrow-down"></i><span>下载此图片</span></div><div class="rightMenu-item" id="menu-search"><i class="solitude fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><div class="rightMenu-item" id="menu-commentBarrage" onclick="sco.switchCommentBarrage()"><i class="solitude fa-solid fa-comment"></i><span class="menu-commentBarrage-text">关闭热评</span></div><div class="rightMenu-item" id="menu-darkmode" onclick="sco.switchDarkMode()"><i class="solitude fa-solid fa-circle-half-stroke"></i><span class="menu-darkmode-text">深色模式</span></div><div class="rightMenu-item" id="menu-translate"><i class="solitude fa-solid fa-language"></i><span>轉為繁體</span></div></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js?v=3.0.5"></script><script src="/js/main.js?v=3.0.5"></script><script src="/js/third_party/waterfall.min.js?v=3.0.5"></script><script src="https://jsd.cdn.sinzmise.top/npm/pjax@0.2.8/pjax.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/qrcodejs@1.0.0/qrcode.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/typeit@8.8.7/dist/index.umd.min.js"></script><script src="/js/third_party/universe.min.js?v=3.0.5"></script><script>dark()</script><script src="/js/tw_cn.js?v=3.0.5"></script><script src="https://jsd.cdn.sinzmise.top/npm/vanilla-lazyload@19.1.3/dist/lazyload.iife.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/node-snackbar@0.1.16/dist/snackbar.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.umd.min.js"></script><script>const coverColorConfig={api:"https://api.qjqq.cn/api/Imgcolor?img=",time:432e5}</script><script src="/js/covercolor/api.js?v=3.0.5"></script><script>window.paceOptions={restartOnPushState:!1},utils.addGlobalFn("pjaxSend",(()=>{Pace.restart()}),"pace_restart")</script><script src="https://jsd.cdn.sinzmise.top/npm/pace-js@1.2.4/pace.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/instantsearch.js@4.75.6/dist/instantsearch.production.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/algoliasearch@5.18.0/dist/algoliasearch.umd.min.js"></script><script src="/js/right_menu.js?v=3.0.5"></script><script src="/js/schedule.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script><script src="/chatroom/chatroom.js"></script><script async src="//at.alicdn.com/t/c/font_3586335_hsivh70x0fm.js"></script><script async src="//at.alicdn.com/t/c/font_4199232_wlo8truegv.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/aplayer/dist/APlayer.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/meting/dist/Meting.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/@ruffle-rs/ruffle"></script><script src="/js/cenguigui.js"></script><div class="js-pjax"><script>(()=>{let t=null;const e=()=>{if(t=Artalk.init({el:"#artalk-wrap",server:"https://atk.pl.blog.sinzmise.top",site:"汐塔魔法屋",pageKey:location.pathname,darkMode:"dark"===document.documentElement.getAttribute("data-theme"),countEl:".artalk-count"},null),"null"===GLOBAL_CONFIG.lightbox)return;t.on("list-loaded",(()=>{const e=[];t.ctx.get("list").getCommentNodes().forEach((t=>{e.push({nick:t.data.nick,content:t.data.content_marked,mailMd5:t.data.email_encrypted});const a=t.getRender().$content;GLOBAL_CONFIG.lightbox&&utils.lightbox(a.querySelectorAll("img:not([atk-emoticon])"))})),sco.owoBig({body:".atk-grp",item:".atk-item"})&&barrageArtalk(e)}));utils.addGlobalFn("pjax",(()=>t.destroy()),"destroyArtalk"),document.addEventListener("pjax:complete",(function(){t.update({pageKey:window.location.pathname,pageTitle:document.title}),t.reload()}))},a=async()=>{"object"==typeof Artalk?e():(await utils.getCSS("https://jsd.cdn.sinzmise.top/npm/artalk@2.9.1/dist/Artalk.min.css"),await utils.getScript("https://jsd.cdn.sinzmise.top/npm/artalk@2.9.1/dist/Artalk.min.js").then(e))};utils.addGlobalFn("themeChange",(e=>{const a=document.getElementById("artalk-wrap");if(!a||!a.children.length)return;const n="dark"===e;t.setDarkMode(n)}),"artalk"),a()})()</script><script defer pjax="" src="https://jsd.cdn.sinzmise.top/npm/busuanzi@2.3.0/bsz.pure.mini.min.js"></script></div><script>var webmentionContext={baseUrl:"https://webmention.io"},webmentionEndpoint="https://webmention.io/blog.storical.space/webmention"</script><script data-pjax="" src="/js/webmention/webmention.js?v=3.0.5"></script><script data-pjax="" src="/js/webmention/webmention-timeline.js?v=3.0.5"></script><script src="https://jsd.cdn.sinzmise.top/npm/jquery@3.5.1/dist/jquery.min.js"></script></div><script>const links=[{name:"Hexo",link:"https://hexo.io/"},{name:"Solitude",link:"https://github.com/everfu/hexo-theme-solitude"},{name:"安知鱼",link:"https://blog.anheyu.com/"},{name:"轻笑Chuckle",link:"https://www.qcqx.cn"},{name:"SeaEpoch",link:"https://www.seayj.cn"},{name:"晓雨杂记",link:"https://lihaoyu.cn"},{name:"山岳库博",link:"https://kmar.top/"},{name:"Ariasakaの小窝",link:"https://blog.yaria.top"},{name:"勿埋我心",link:"https://www.skyqian.com"},{name:"iMaeGoo’s Blog",link:"https://www.imaegoo.com"},{name:"贰猹的小窝",link:"https://noionion.top/"},{name:"定の栈",link:"https://saop.cc"},{name:"Guoqi Sun",link:"https://blog.sunguoqi.com"},{name:"Echo 的小窝",link:"https://www.liveout.cn/"},{name:"米米的博客",link:"https://zhangshuqiao.org"},{name:"MHuiG",link:"https://mhuig.top"},{name:"杜老师说",link:"https://dusays.com"},{name:"Leonus",link:"https://blog.leonus.cn/"},{name:"小N同学",link:"https://www.imcharon.com/"},{name:"Android",link:"https://android99.com"},{name:"张洪Heo",link:"https://blog.zhheo.com/"},{name:"刘洪亮Leo",link:"https://lhliang.com"},{name:"张时贰",link:"https://zhsher.cn"},{name:"Tianli",link:"https://blog.tianli0.top/"},{name:"时光日志",link:"https://www.timelogs.cn"},{name:"葱苓sama",link:"https://blog.ciraos.top"},{name:"Wayne's Blog",link:"https://wrans.top"},{name:"铭心石刻",link:"https://blog.kouseki.cn/"},{name:"猫羽のブログす",link:"https://www.maoyv.cn/"},{name:"猫羽のブログす（新站）",link:"https://www.maoyv.com/"},{name:"风起",link:"https://www.fqxk.com.cn"},{name:"Mycpen",link:"https://blog.cpen.top/"},{name:"W4J1e's blog",link:"https://hin.cool"},{name:"Fomalhaut🥝",link:"https://www.fomal.cc/"},{name:"醉月酿星河",link:"https://blog.catrol.cn/"},{name:"CyanFalse's Weblog",link:"https://blog.eurekac.cn"},{name:"阿锋的小宇宙",link:"https://feng.pub"},{name:"白云苍狗",link:"https://www.imalun.com"},{name:"半方池水半方田",link:"https://uuanqin.top/"},{name:"朽丘秋雨",link:"https://koxiuqiu.cn/"},{name:"网友小宋",link:"https://xyzbz.cn/"},{name:"懋和道人",link:"https://www.dao.js.cn/"},{name:"青桔气球",link:"https://blog.qjqq.cn/"},{name:"微光档案",link:"https://bikari.top"},{name:"风记星辰",link:"https://www.thyuu.com"},{name:"甜鱼/Ayu",link:"https://ayu.land/"},{name:"小鹿的个人网站",link:"https://www.siena.zone"},{name:"Aciano",link:"https://aciano.top/"},{name:"奇思妙想录",link:"https://blog.nicebao.com"},{name:"喵二の小博客",link:"https://www.miaoer.net/"},{name:"Ordis",link:"https://imbhj.com"},{name:"ANXYの小窝",link:"https://blog.anxy.top/"},{name:"月光小镇",link:"https://mooncc.cn/"},{name:"希乐博客",link:"https://blog.xlenco.top/"},{name:"福福不服",link:"https://ffbf.top"},{name:"追梦幻境·云之都",link:"https://blog.dreamerhe.cn/"},{name:"Xiobb’s Blog",link:"https://www.i45s.com/?_ref=blog.sinzmise.top"},{name:"foxcat（狐狸猫的博客）",link:"https://blog.foxcat.eu.org/"},{name:"Gaspard の传火祭祀场",link:"https://www.gaspard.top/"},{name:"阿方的博客",link:"https://fang.blog.miri.site/"},{name:"落落のBlog",link:"https://www.whaleluo.top/"},{name:"俊逸的博客",link:"https://lijunyi.xyz/"},{name:"Calyee",link:"https://blog.calyee.top/"},{name:"小丁的屋舍",link:"https://xding.top/"},{name:"冬天的小窝",link:"https://www.iamdt.cn/"},{name:"郑文峰的博客",link:"https://www.zhengwenfeng.com"},{name:"Naive Koala 🐨",link:"https://www.xalaok.top/"},{name:"微霞",link:"https://yuuu.org"},{name:"孤熵小狼",link:"https://blog.furen.link"},{name:"奥奥の探索日记",link:"https://blog.shaoao.top/"},{name:"Daoker小站",link:"https://daoker.cc"},{name:"LZHの小窝",link:"https://blog.lzh.life/"},{name:"lveMonsiのBlog",link:"https://blog.lvems.top/"},{name:"彬彬加冰",link:"https://blog.wzwzx.cn"},{name:"Isoheptane",link:"https://blog.cascade.moe/"},{name:"雨宮千夏の博麗神社",link:"https://blog.uuz.moe/"},{name:"清羽飞扬",link:"https://blog.liushen.fun/"},{name:"杰帕斯の小窝",link:"https://japerz.com"},{name:"星の野",link:"https://blog.byer.top/"},{name:"Souiken’s Homepage",link:"https://souiken.moe/"},{name:"PuddingKCの小站",link:"https://www.puddingkc.com/"},{name:"MBRjun-Blog",link:"https://www.mbrjun.cn/"},{name:"Homulilly",link:"https://homulilly.com"},{name:"蓝调时刻",link:"https://www.landiaoshike.com/"},{name:"XenWayne’s Blog",link:"https://xenwayne.top"},{name:"白丁往事",link:"https://blog.rayvv.com/"},{name:"haohang",link:"https://www.shimmerl.top"},{name:"咖啡豆子coffee的小站",link:"https://blog.kfdzcoffee.cn"},{name:"雪萌天文台",link:"https://blog.snowy.moe"},{name:"澄沨的漫游茶记",link:"https://champhoon.xyz/"},{name:"VanllaOcap Blog",link:"https://blog.255650.xyz"},{name:"LeZi的猫窝",link:"https://leziblog.com"},{name:"雨滴思绪",link:"https://www.qunqin.net/"},{name:"Pinpe 的云端",link:"https://pinpe.top"},{name:"Debug客栈",link:"https://debuginn.com"},{name:"lhDream",link:"https://blog.luhua.site"},{name:"XingJiのBlog",link:"https://love.xingji.fun/"},{name:"无名博客",link:"https://wuminboke.site/"},{name:"murenyouの小窝",link:"https://murenyou.cn"},{name:"Elykia",link:"https://blog.elykia.cn/"},{name:"小妖客栈",link:"https://wangkay.top"},{name:"陵长镜的小博客",link:"https://r1n.top"},{name:"森尧记",link:"https://07111.cn"},{name:"厄尔科斯",link:"https://sikan.moe/"},{name:"萌！萝莉",link:"https://loliloli.moe"},{name:"洛卡日记",link:"https://luoca.cn/"},{name:"FloatSheep",link:"https://blog.hesiy.cn"},{name:"云团子的博客",link:"https://www.yuncheng.fun/"},{name:"亚斯之声",link:"https://we.owaii.net"},{name:"酸奶云✨",link:"https://blog.mcyogurt.cn/"},{name:"王鑫的小站",link:"https://wxweb.xyz"}],randomText="点击前往按钮进入随机一个友链，不保证跳转网站的安全性和可用性。本次随机到的是本站友链：⌈ ${name} ⌋";function travelling(){const n=links[utils.randomNum(links.length)];Snackbar.show({text:randomText.replace(/\$\{name}/,n.name),duration:8e3,pos:"top-center",actionText:"前往",onActionClick:function(t){t.style.opacity=0,window.open(n.link,"_blank")}})}</script><script>function randomLinksList(){const e=document.getElementById("friend-links-in-footer");if(null==e)return;let n="",t=[...links],l=Math.min(3,t.length);for(let e=0;e<l;e++){let e=utils.randomNum(t.length);const{link:l,name:o}=t[e];n+=`<a class="footer-item" href="${l}" target="_blank" rel="noopener noreferrer nofollow">${o}</a>`,t.splice(e,1)}e.innerHTML=n+'<a class="footer-item" href="/links/">更多</a>'}</script><script>const pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:["title","#body-wrap","#site-config",'meta[name="description"]',".js-pjax",'meta[property^="og:"]',"#config-diff",".rs_show",".rs_hide"],cacheBust:!1,analytics:!1,scrollRestoration:!1});document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)})),document.addEventListener("pjax:complete",(()=>{window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><div id="algolia-search"><div class="search-dialog"><div class="algolia-navbar"><div class="search-dialog__title" id="algolia-search-title">搜索</div><div class="algolia-tips"><i class="solitude fab fa-algolia"></i><span class="algolia-tips-text">Algolia</span></div><span class="search-close-button"><i class="solitude fa-solid fa-xmark"></i></span></div><div id="algolia-input-panel"><div id="algolia-search-input"></div></div><div id="search-results"><div id="algolia-hits"></div></div><div id="algolia-tips"><div id="algolia-pagination"></div><div id="algolia-stats"></div></div></div><div id="search-mask"></div></div><script src="/js/search/algolia.js?v=3.0.5"></script></body></html><script>const posts=["posts/60486/","posts/23226/","posts/65382/","posts/61713/","posts/61712/","posts/10733/","posts/64856/","posts/15688/","posts/46640/","posts/15799/","posts/64935/","posts/10021/","posts/57692/","posts/15748/","posts/10996/","posts/13624/","posts/27762/","posts/15842/","posts/54787/","posts/52677/","posts/10045/","posts/45875/","posts/28536/","posts/27531/","posts/42580/","posts/56467/","posts/54386/","posts/29196/","posts/38917/","posts/18063/","posts/58203/","posts/50710/","posts/28733/","posts/12779/","posts/53662/","posts/20412/","posts/21375/","posts/646/","posts/42487/","posts/54481/","posts/48762/","posts/61417/","posts/38964/","posts/22945/","posts/23021/","posts/16107/"];function toRandomPost(){const s=posts[Math.floor(Math.random()*posts.length)];pjax.loadUrl(GLOBAL_CONFIG.root+s)}</script>
1
+ <!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>butterfly主题添加音乐页面（适配手机） | 汐塔魔法屋</title><noscript>开启JavaScript才能访问本站哦~</noscript><link rel="icon" href="/images/icon.png"><link rel="stylesheet" href="/css/index.css?v=3.0.5"><meta name="baidu-site-verification" content="codeva-F0RjFTve6w"><meta name="msvalidate.01" content="18428535B4425286753107589FC35E79"><meta name="blogsclub-find" content="0bcd40f87500234dd4721904e917e748"><meta name="blogsclub-verify" content="c993246f2c944fed8e4fdc8d024561fe"><link rel="canonical" href="https://blog.storical.space/posts/22945/"><link rel="stylesheet" href="https://jsd.cdn.sinzmise.top/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"><link rel="preconnect"><link rel="preconnect" href="images1.blog.sinzmise.top"><link rel="stylesheet" href="https://jsd.cdn.sinzmise.top/npm/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.min.css"><meta name="description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta name="apple-mobile-web-app-capable" content="汐塔魔法屋"><meta name="theme-color" content="var(--efu-main)"><meta name="apple-mobile-web-app-status-bar-style" content="var(--efu-main)"><link rel="bookmark" href="/images/icon.png"><link rel="apple-touch-icon" href="/images/icon.png" sizes="180x180"><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="webmention" href="https://webmention.io/blog.storical.space/webmention"><link rel="pingback" href="https://webmention.io/blog.storical.space/xmlrpc"><script>console.log(" %c Solitude %c 3.0.5 %c https://github.com/everfu/hexo-theme-solitude","background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff","background:#ff9a9a ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff","background:unset ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff")</script><script>let mdate="7-7,9-18,12-13";mdate=mdate.split(",");let ndate=new Date;for(let e of mdate)e===ndate.getMonth()+1+"-"+ndate.getDate()&&document.documentElement.classList.add("memorial")</script><link rel="stylesheet" href="https://jsd.cdn.sinzmise.top/npm/aplayer/dist/APlayer.min.css"><link rel="stylesheet" href="/css/schedule.css"><link rel="stylesheet" href="//at.alicdn.com/t/c/font_4199232_wlo8truegv.css"><script>(()=>{const e={set:function(e,t,n){if(0===n)return;const o=864e5*n,a={value:t,expiry:(new Date).getTime()+o};localStorage.setItem(e,JSON.stringify(a))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const n=JSON.parse(t);if(!((new Date).getTime()>n.expiry))return n.value;localStorage.removeItem(e)}};window.utils={saveToLocal:e,getCSS:(e,t=!1)=>new Promise(((n,o)=>{const a=document.createElement("link");a.rel="stylesheet",a.href=e,t&&(a.id=t),a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,n())},document.head.appendChild(a)})),getScript:(e,t={})=>new Promise(((n,o)=>{const a=document.createElement("script");a.src=e,a.async=!0,a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,n())},Object.keys(t).forEach((e=>{a.setAttribute(e,t[e])})),document.head.appendChild(a)})),addGlobalFn:(e,t,n=!1,o=window)=>{const a=o.globalFn||{},r=a[e]||{};n&&r[n]||(r[n=n||Object.keys(r).length]=t,a[e]=r,o.globalFn=a)},addEventListenerPjax:(e,t,n,o=!1)=>{e.addEventListener(t,n,o),utils.addGlobalFn("pjax",(()=>{e.removeEventListener(t,n,o)}))}}})()</script><script>initTheme=()=>{let e=window.matchMedia("(prefers-color-scheme: dark)").matches;const t=utils.saveToLocal.get("theme");if(void 0===t){const t=e?"dark":"light";document.documentElement.setAttribute("data-theme",t)}else document.documentElement.setAttribute("data-theme",t);"object"==typeof rm&&rm.mode("dark"===t&&e)},initTheme()</script><script>const GLOBAL_CONFIG={root:"/",algolia:{appId:"72TOQYD33Q",apiKey:"608d2f3acd06140a2473153f6cb61eda",indexName:"hexo",hits:{per_page:6}},localsearch:void 0,runtime:"2023-04-20 00:00:00",lazyload:{enable:!0,error:"/img/friend_404.gif"},copyright:!1,highlight:{limit:200,expand:!0,copy:!0,syntax:"highlight.js"},randomlink:!0,lang:{theme:{dark:"已切换至深色模式",light:"已切换至浅色模式"},copy:{success:"复制成功",error:"复制失败"},backtop:"返回顶部",time:{day:"天前",hour:"小时前",just:"刚刚",min:"分钟前",month:"个月前"},day:" 天",f12:"开发者模式已打开，请遵循GPL协议。",totalk:"无需删除空行，直接输入评论即可",search:{empty:"找不到你查询的内容：${query}",hit:"找到 ${hits} 条结果，用时 ${time} 毫秒",placeholder:"输入关键词快速查找",count:"共 <b>${count}</b> 条结果。",loading:"搜索中..."},webmention:{title:'你有对这篇文章写<a href="https://indieweb.org/responses" target="_blank">回应</a>吗? 你可以在这里提交你的文章网址或推特链接（文章或推特内容需要包含这篇文章的地址，点击这里了解 <a href="https://indieweb.org/Webmention" target="_blank">Webmention</a>）：',placeholder:"你的文章网址或推特链接",likes:"已经有 ${distinctMentions.length} 朋友喜欢、分享或讨论这篇文章:",comment:"引用或评论（${replies.length}）"},barrage:{title:"热评"}},aside:{state:{morning:"✨ 早上好，新的一天开始了",noon:"🍲 午餐时间",afternoon:"🌞 下午好",night:"早点休息",goodnight:"晚安 😴"},witty_words:["你可以的","你一定可以的","祝你好运，陌生人"],witty_comment:{prefix:"好久不见，",back:"欢迎再次回来，"}},covercolor:{enable:!0},comment:{avatar:"https://weavatar.com",commentBarrage:!0},lightbox:"fancybox",post_ai:!1,right_menu:{mode:{dark:"深色模式",light:"浅色模式"},img_error:"此图片无法复制与下载",barrage:{open:"显示热评",close:"关闭热评"},translate:!0,ctrlOriginalMenu:"按住Ctrl+右键可打开浏览器右键菜单"},translate:{translateDelay:0,defaultEncoding:2},lure:!1,expire:!1}</script><script id="config-diff">var PAGE_CONFIG={is_post:!0,is_page:!1,is_home:!1,page:"",toc:!0,comment:!0,ai_text:!1,color:!1}</script><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"></head><body id="body"><canvas id="universe"></canvas><div id="global_bg"></div><div id="loading-box" onclick="preloader.endLoading()" style="zoom:1"><div class="loading-bg"><img class="loading-img nolazyload" src="/images/icon.png" alt="loading image"></div></div><script>const preloader={isLoaded:!1,endLoading:()=>{preloader.isLoaded||(document.getElementById("loading-box").classList.add("loaded"),preloader.isLoaded=!0,preloader.togglePaceDone())},initLoading:()=>{document.getElementById("loading-box").classList.remove("loaded"),preloader.isLoaded=!1,preloader.togglePaceDone()},togglePaceDone:()=>{document.getElementById("body").className=preloader.isLoaded?"pace-done":""}};window.addEventListener("load",(()=>{preloader.endLoading()})),window.addEventListener("pjax:send",(()=>{preloader.initLoading()})),document.addEventListener("pjax:complete",(()=>{preloader.endLoading()})),setTimeout((()=>{preloader.endLoading()}),5e3)</script><div id="console"><div class="close-btn" onclick="sco.hideConsole()"><i class="solitude fa-solid fa-xmark"></i></div><div class="console-card-group"><div class="console-card-group-left"><div class="console-card" id="card-newest-comments" onclick="sco.hideConsole()"><div class="card-content"><div class="author-content-item-tips">互动</div><div class="author-content-item-title">最新评论</div></div><div class="console_recentcomments"><script pjax="">(async()=>{document.querySelector(".console-card .console_recentcomments").textContent="加载中...";const e=/<img [^>]+ atk-emoticon="[^"]+">/g;let t=utils.saveToLocal.get("artalk-recent-comments-console");if(t)return void o(document.querySelector(".console-card .console_recentcomments"),t);let n=[];const c=new URLSearchParams({site_name:"汐塔魔法屋",limit:"6"});function o(e,t){e.innerHTML=0!==t.length?t.map((e=>`\n <div class="comment-card" title="${e.title}" onclick="pjax.loadUrl('${e.url}')">\n <div class="comment-info">\n <img src="${e.avatar}" class="nolazyload" alt="${e.nick}">\n <div>\n <span class="comment-user">${e.nick}</span>\n </div>\n <time class="comment-time" datetime="${e.time}"></time>\n </div>\n <div class="comment-content">${e.content}</div>\n <div class="comment-title">\n <i class="solitude fa-solid fa-comment"></i>\n ${e.title}</div>\n </div>\n `)).join(""):"暂无评论...","undefined"!=typeof sco?sco.changeTimeFormat(document.querySelectorAll(".comment-time")):(document.addEventListener("pjax:complete",(()=>sco.changeTimeFormat(document.querySelectorAll(".comment-time")))),document.addEventListener("DOMContentLoaded",(()=>sco.changeTimeFormat(document.querySelectorAll(".comment-time")))))}function a(t){return t=(t=(t=(t=t.replace(e,"[表情]")).replace(/!\[.*?\]\((.*?)\)/g,"[图片]")).replace(/\[.*?\]\((.*?)\)/g,"[链接]")).replace(/```.*?```/g,"[代码]")}await fetch(`https://atk.pl.blog.sinzmise.top/api/v2/stats/latest_comments?${c}`,{method:"GET"}).then((async e=>e.json())).then((async t=>{for(const o of t.data){if(c=o.content,e.test(c))continue;let t="";o.page_key&&await fetch(o.page_key).then((e=>e.text())).then((e=>{const n=(new DOMParser).parseFromString(e,"text/html");t=n.querySelector("title").innerText})).catch((()=>{t=o.page_key})),t.indexOf("|")>0&&(t=t.split("|")[0]),n.push({title:t,url:o.page_key+"#atk-comment-"+o.id,nick:o.nick,avatar:"https://weavatar.com/avatar/"+o.email_encrypted,time:o.date,content:a(o.content)})}var c;o(document.querySelector(".console-card .console_recentcomments"),n),utils.saveToLocal.set("artalk-recent-comments-console",n,.2)}))})()</script></div></div></div><div class="console-card-group-right"><div class="console-card tags" onclick="sco.hideConsole()"><div class="card-content"><div class="author-content-item-tips">标签</div><div class="author-content-item-title">寻找感兴趣的领域</div></div><div class="card-tag-cloud"><a href="/tags/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/">个人小记<sup>24</sup></a><a href="/tags/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/">游戏相关<sup>4</sup></a><a href="/tags/%E5%85%B6%E5%AE%83%E6%B8%B8%E6%88%8F/">其它游戏<sup>3</sup></a><a href="/tags/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/">项目折腾<sup>3</sup></a><a href="/tags/Windows%E8%BD%AF%E4%BB%B6/">Windows软件<sup>2</sup></a><a href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾<sup>14</sup></a><a href="/tags/%E8%87%AA%E5%BB%BA%E9%83%A8%E7%BD%B2/">自建部署<sup>5</sup></a><a href="/tags/Flash%E7%9B%B8%E5%85%B3/">Flash相关<sup>1</sup></a><a href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/">页面魔改<sup>3</sup></a><a href="/tags/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/">歌曲收集<sup>1</sup></a><a href="/tags/Steam%E6%B8%B8%E6%88%8F/">Steam游戏<sup>1</sup></a><a href="/tags/%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB/">加载动画<sup>1</sup></a><a href="/tags/%E6%82%AC%E6%B5%AE%E5%AE%A0%E7%89%A9-%E7%9C%8B%E6%9D%BF%E5%A8%98/">悬浮宠物/看板娘<sup>1</sup></a><a href="/tags/%E7%AB%99%E7%82%B9%E5%BA%95%E9%83%A8%E9%AD%94%E6%94%B9/">站点底部魔改<sup>1</sup></a></div></div><div class="console-card history" onclick="sco.hideConsole()"><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2025/01/"><span class="card-archive-list-date">2025/01</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/12/"><span class="card-archive-list-date">2024/12</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/11/"><span class="card-archive-list-date">2024/11</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/10/"><span class="card-archive-list-date">2024/10</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/09/"><span class="card-archive-list-date">2024/09</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/08/"><span class="card-archive-list-date">2024/08</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/07/"><span class="card-archive-list-date">2024/07</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/06/"><span class="card-archive-list-date">2024/06</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/05/"><span class="card-archive-list-date">2024/05</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/04/"><span class="card-archive-list-date">2024/04</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/03/"><span class="card-archive-list-date">2024/03</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/02/"><span class="card-archive-list-date">2024/02</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">2024/01</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">4</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/12/"><span class="card-archive-list-date">2023/12</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">2023/11</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">2023/10</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/09/"><span class="card-archive-list-date">2023/09</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">2023/08</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/07/"><span class="card-archive-list-date">2023/07</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">5</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">2023/04</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/03/"><span class="card-archive-list-date">2023/03</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/02/"><span class="card-archive-list-date">2023/02</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">2023/01</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">2022/12</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/12/"><span class="card-archive-list-date">2021/12</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span class="card-archive-list-count-unit">篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/"><span class="card-archive-list-date">全部文章</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">46</span><span class="card-archive-list-count-unit">篇</span></div></a></li></ul></div></div></div><div class="button-group"><div class="console-btn-item"><span class="darkmode_switchbutton" onclick="sco.switchDarkMode()" title="昼夜切换"><i class="solitude fa-solid fa-circle-half-stroke"></i></span></div><div class="console-btn-item" id="consoleHideAside"><span class="asideSwitch" onclick="sco.switchHideAside()" title="边栏显示控制"><i class="solitude fas fa-arrows-left-right-to-line"></i></span></div><div class="console-btn-item on" id="consoleCommentBarrage" onclick="sco.switchCommentBarrage()"><span class="commentBarrage"><i class="solitude fa-solid fa-comment"></i></span></div><div class="console-btn-item" id="consoleplayer" onclick="musicsw()"><span class="music-switch" title="音乐开关"><i class="solitude fa-solid fa-compact-disc"></i></span></div></div><div class="console-mask" onclick="sco.hideConsole()"></div></div><div id="sidebar" style="zoom:1"><div id="menu-mask" style="display:none"></div><div id="sidebar-menus"><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">46</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/recentcomments/"><div class="headline">评论</div><div class="length-num" id="artalk_allcount"><i class="solitude fa-solid fa-spinner fa-spin"></i></div><script pjax="pjax">(async()=>{const t=new URLSearchParams({site_name:"汐塔魔法屋",limit:"-1"});await fetch(`https://atk.pl.blog.sinzmise.top/api/v2/stats/latest_comments?${t}`,{method:"GET"}).then((async t=>t.json())).then((async t=>{document.querySelector("#artalk_allcount").innerHTML=t.length}))})()</script></a></div></div></div><span class="sidebar-menu-item-title">功能</span><div class="sidebar-menu-item"><span class="darkmode_switchbutton menu-child" onclick="sco.switchDarkMode()"><i class="solitude fa-solid fa-circle-half-stroke"></i><span>显示模式</span></span></div><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">我的</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://www.storical.space/" title="个人主页"><img class="nolazyload back-menu-item-icon" src="/images/icon.png" alt="个人主页"><span class="back-menu-item-text">个人主页</span></a></div></div></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>文章</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-guidang1"></use></svg><span>归档</span></a></li><li><a class="site-page child" href="/tags/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-sekuaibiaoqian"></use></svg><span>标签</span></a></li><li><a class="site-page child" href="/categories/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-fenlei"></use></svg><span>分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/fcircle/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pengyouquan"></use></svg><span>朋友圈</span></a></li><li><a class="site-page child" href="/comments/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-liuyan"></use></svg><span>留言板</span></a></li><li><a class="site-page child" href="/link/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-lianjie"></use></svg><span>友人帐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>休闲</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/games/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-Swf"></use></svg><span>小游戏</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://umami.status.sinzmise.top/share/tliXWHHcZzGWhRgI/blog.storical.space"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-tongji"></use></svg><span>站点统计</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>虫洞</span></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://travel.moe/go.html"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-meng"></use></svg><span>异次元之旅</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://storeweb.cn/s/1707"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-shangdian"></use></svg><span>个站商店</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-boke"></use></svg><span>博客录</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://blogscn.fun/random.html"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-data-input"></use></svg><span>笔墨迹</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.blogsclub.org/go"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-b_x"></use></svg><span>BlogsClub</span></a></li></ul></div></div><span class="sidebar-menu-item-title">标签</span><div class="card-widget card-tags card-archives card-webinfo card-allinfo"><div class="card-tag-cloud"><a href="/tags/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/">个人小记<sup>24</sup></a><a href="/tags/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/">游戏相关<sup>4</sup></a><a href="/tags/%E5%85%B6%E5%AE%83%E6%B8%B8%E6%88%8F/">其它游戏<sup>3</sup></a><a href="/tags/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/">项目折腾<sup>3</sup></a><a href="/tags/Windows%E8%BD%AF%E4%BB%B6/">Windows软件<sup>2</sup></a><a href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾<sup>14</sup></a><a href="/tags/%E8%87%AA%E5%BB%BA%E9%83%A8%E7%BD%B2/">自建部署<sup>5</sup></a><a href="/tags/Flash%E7%9B%B8%E5%85%B3/">Flash相关<sup>1</sup></a><a href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/">页面魔改<sup>3</sup></a><a href="/tags/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/">歌曲收集<sup>1</sup></a><a href="/tags/Steam%E6%B8%B8%E6%88%8F/">Steam游戏<sup>1</sup></a><a href="/tags/%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB/">加载动画<sup>1</sup></a><a href="/tags/%E6%82%AC%E6%B5%AE%E5%AE%A0%E7%89%A9-%E7%9C%8B%E6%9D%BF%E5%A8%98/">悬浮宠物/看板娘<sup>1</sup></a><a href="/tags/%E7%AB%99%E7%82%B9%E5%BA%95%E9%83%A8%E9%AD%94%E6%94%B9/">站点底部魔改<sup>1</sup></a></div></div><span class="sidebar-menu-item-title">网站信息</span><div class="webinfo"><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-file-word"></i><div class="item-name">全站字数 :</div></div><div class="item-count">46.4k</div></div></div></div></div><div class="needEndHide" id="rightside"><div class="rs_hide"><button class="translate" type="button" title="简繁转换">简</button><button class="mode" type="button" title="显示模式切换" onclick="sco.switchDarkMode()"><i class="fas fa-circle-half-stroke"></i></button><button class="aside pc" type="button" title="侧边栏" onclick="sco.switchHideAside()"><i class="fas fa-arrows-alt-h"></i></button></div><div class="rs_show"><button class="config" type="button" title="扩展" onclick="document.querySelector(&quot;.rs_hide&quot;).classList.toggle(&quot;show&quot;)"><i class="fas fa-gear fa-spin"></i></button><button class="mobile toc" type="button" title="目录" onclick='document.querySelector("#card-toc").classList.toggle("open")'><i class="fas fa-list"></i></button><button class="comment" type="button" title="评论" onclick='sco.scrollTo("post-comment")'><i class="fas fa-comment"></i></button><button class="barrage pc" type="button" title="弹" onclick="sco.switchCommentBarrage()"><span>弹</span></button><button class="top" type="button" title="返回顶部" onclick="sco.toTop()"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button></div></div><div class="post h-entry" id="body-wrap"><header class="post-bg" id="page-header"><nav class="show" id="nav"><div id="nav-group"><div id="blog_name"><div class="back-home-button" tabindex="-1"><i class="back-home-button-icon solitude fas fa-bars-progress"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">我的</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://www.storical.space/" title="个人主页"><img class="nolazyload back-menu-item-icon" src="/images/icon.png" alt="个人主页"><span class="back-menu-item-text">个人主页</span></a></div></div></div></div><a id="site-name" href="/" title="返回博客主页"><span class="title">汐塔魔法屋</span><i class="solitude fa-solid fa-home"></i></a></div><div id="page-name-mask"><div id="page-name"><a id="page-name-text" onclick="sco.toTop()">butterfly主题添加音乐页面（适配手机）</a></div></div><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>文章</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-guidang1"></use></svg><span>归档</span></a></li><li><a class="site-page child" href="/tags/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-sekuaibiaoqian"></use></svg><span>标签</span></a></li><li><a class="site-page child" href="/categories/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-fenlei"></use></svg><span>分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/fcircle/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pengyouquan"></use></svg><span>朋友圈</span></a></li><li><a class="site-page child" href="/comments/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-liuyan"></use></svg><span>留言板</span></a></li><li><a class="site-page child" href="/link/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-lianjie"></use></svg><span>友人帐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>休闲</span></a><ul class="menus_item_child"><li><a class="site-page child" href="/games/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-Swf"></use></svg><span>小游戏</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://umami.status.sinzmise.top/share/tliXWHHcZzGWhRgI/blog.storical.space"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-tongji"></use></svg><span>站点统计</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>虫洞</span></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://travel.moe/go.html"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-meng"></use></svg><span>异次元之旅</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://storeweb.cn/s/1707"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-shangdian"></use></svg><span>个站商店</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs/"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-boke"></use></svg><span>博客录</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://blogscn.fun/random.html"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-data-input"></use></svg><span>笔墨迹</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.blogsclub.org/go"><svg class="menu_icon solitude" aria-hidden="true" style="width:20px;height:20px;vertical-align:-.15em;fill:currentColor;overflow:hidden"><use xlink:href="#icon-pjh-b_x"></use></svg><span>BlogsClub</span></a></li></ul></div></div></div><div id="nav-left"></div><div id="nav-right"><div class="nav-button" id="travellings_button"><a class="site-page" target="_blank" rel="noopener" href="https://www.travellings.cn/go-by-clouds.html"><i class="solitude fas fa-train"></i></a></div><div class="nav-button" id="randomPost_button"><a class="site-page" onclick="toRandomPost()" title="随机一篇文章" href="javascript:void(0);"><i class="solitude fa-solid fa-dice-d6"></i></a></div><div class="nav-button" id="search-button"><a class="site-page social-icon search" href="javascript:void(0);" title="搜索"><i class="solitude fa-solid fa-magnifying-glass"></i></a></div><div class="nav-button" id="nav-console"><a class="console_switchbutton" onclick="sco.showConsole()" title="中控台" href="javascript:void(0);"><label><i class="left"></i><i class="center"></i><i class="right"></i></label></a></div><div id="toggle-menu"><a class="site-page"><i class="solitude fa-solid fa-bars"></i></a></div></div></div></nav><div class="coverdiv" id="coverdiv"><img class="nolazyload" id="post-cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp" alt="butterfly主题添加音乐页面（适配手机）"></div><div id="post-info"><div id="post-firstinfo"><div class="meta-firstline"><a class="post-meta-original" title="该文章为原创文章，注意版权协议">原创</a><span class="post-meta-categories"><a class="post-meta-categories p-category" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></span><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/"><span class="tags-name tags-punctuation"><i class="solitude fa-solid fa-hashtag"></i>站点折腾</span></a><a class="post-meta__tags" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/"><span class="tags-name tags-punctuation"><i class="solitude fa-solid fa-hashtag"></i>页面魔改</span></a></div></div></div></div><h1 class="post-title p-name">butterfly主题添加音乐页面（适配手机）</h1><div id="post-meta"><div class="meta-secondline"><span class="post-meta-date" title="发布于 2023-01-08 22:31:46"><i class="post-meta-icon solitude fas fa-calendar-days"></i><time class="dt-published" datetime="2023-01-08T22:31:46.000Z">2023-01-08T22:31:46.000Z</time></span><span class="post-meta-date" title="最后更新于 2025-01-21 10:00:04"><i class="post-meta-icon solitude fa-solid fa-arrows-rotate"></i><time class="dt-updated" datetime="2025-01-21T10:00:04.833Z">2025-01-21T10:00:04.833Z</time></span><span class="post-meta-wordcount"><i class="post-meta-icon solitude fa-solid fa-file-word" title="文章字数"></i><span class="word-count">2.9k</span><span class="post-meta-separator"></span><i class="post-meta-icon solitude fa-solid fa-clock" title="阅读耗时"></i><span>16 min</span></span><span class="post-meta-position" title="作者IP归属地为广东潮州"><i class="post-meta-icon solitude fas fa-location-dot"></i><span class="p-location">广东潮州</span></span><a class="post-meta-pv" href="/posts/22945/" title="文章热度"><i class="post-meta-icon solitude fa-solid fa-fire-flame-curved"></i><span id="busuanzi_value_page_pv"><i class="solitude fa-solid fa-spinner fa-spin"></i></span></a><span class="post-meta-commentcount" title="评论数" onclick='sco.scrollTo("post-comment")'><i class="solitude fa-solid fa-comment"></i><a href="/posts/22945/#post-comment"><span class="artalk-count"><i class="solitude fa-solid fa-spinner fa-spin"></i></span></a></span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section></header><main class="layout" id="content-inner"><div id="post"><article class="post-content article-container e-content"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><div class="tip info"><p>本博客音乐页面已经换成了<a target="_blank" rel="noopener" href="https://anzhiy.cn/posts/c3d3.html">安知鱼大佬的方案</a></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="/img/load-games.gif" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" alt="msedge_x1MaJIbBQg"><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="/img/load-games.gif" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-09-59-57-499_com.2sej4yl2vuw0.webp" alt="Screenshot_2023-01-09-09-59-57-499_com"><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="/img/load-games.gif" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-10-02-41-554_com.6tcc3lty2uo0.webp" alt="Screenshot_2023-01-09-10-02-41-554_com"><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<del>但我懒得适配，于是就有了这个教程</del> ）</p><h1 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h1><div class="tabs" id="教程开始,"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#教程开始,-0">1.0</button></li><li class="tab"><button type="button" data-href="#教程开始,-1">2.0</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="教程开始,-0"><p></p><div class="tip info"><p>这个教程是我基于<a target="_blank" rel="noopener" href="https://www.php.cn/xiazai/js/6169">https://www.php.cn/xiazai/js/6169</a> 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p></div><p></p><p></p><div class="tip warning"><p>目前博客已经弃用这个方案，改用2.0版本</p></div><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><tbody><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='stylesheet' href='/css/musics.css')</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='/svg/playlist.svg', alt='playlist-icon')</span><br><span class="line"> button.player__button.player__button--absolute--center.play</span><br><span class="line"> img(src='/svg/play.svg', alt='play-icon')</span><br><span class="line"> img(src='/svg/pause.svg', alt='pause-icon')</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='cover')</span><br><span class="line"> .player__controls</span><br><span class="line"> button.player__button.back</span><br><span class="line"> img.img(src='/svg/back.svg', alt='back-icon')</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='/svg/next.svg', alt='next-icon')</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='cover')</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="#",target="_blank") :D 获取中...</span><br><span class="line">script(src='/js/player.js')</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch('https://v1.hitokoto.cn')</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; {</span><br><span class="line"> const hitokoto = document.querySelector('#hitokoto_text')</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + " —— " + data.creator + "「" + data.from + "」"</span><br><span class="line"> })</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></tbody></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><tbody><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 {</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">}</span><br><span class="line"><span class="selector-class">.img</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>: block ;</span><br><span class="line"> <span class="attribute">object-fit</span>: cover ;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.list</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flex</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.uppercase</span>{</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__header</span><span class="selector-class">.open-header</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__img--absolute</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider</span><span class="selector-class">.open-slider</span>{</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__content</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__img</span> {</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">}</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> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.text-wrap</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> text-wrap {</span><br><span class="line"></span><br><span class="line"> <span class="number">75%</span>{</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"> }</span><br><span class="line"></span><br><span class="line"> <span class="number">100%</span>{</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"> }</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.playlist</span> {</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">}</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> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--nw</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__button--absolute--center</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[alt =<span class="string">"pause-icon"</span>]</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__controls</span><span class="selector-class">.move</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__context</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slider__context</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> opacity {</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="number">0%</span> {</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"> }</span><br><span class="line"></span><br><span class="line"> <span class="number">90%</span>{</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"> }</span><br><span class="line"></span><br><span class="line">}</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>{</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__title</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres</span> {</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">}</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>{</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progres__filled</span><span class="selector-pseudo">::before</span> {</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">" "</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__playlist</span>::-webkit-scrollbar {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song</span> <span class="selector-class">.player__context</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-name</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.player__song-time</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.audio</span> {</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">}</span><br><span class="line"><span class="selector-class">.player__song-name</span>,<span class="selector-class">.slider__title</span>{</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#000</span></span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#hitokoto</span>{</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br></pre></td></tr></tbody></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><tbody><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">"use strict"</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">"#e5e7e9"</span>, <span class="string">"#ff4545"</span>, <span class="string">"#f8ded3"</span>, <span class="string">"#ffc382"</span>, <span class="string">"#f5eda6"</span>, <span class="string">"#ffcbdc"</span>, <span class="string">"#dcf3f3"</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">".player"</span>);</span><br><span class="line"><span class="keyword">const</span> playerHeader = player.<span class="title function_">querySelector</span>(<span class="string">".player__header"</span>);</span><br><span class="line"><span class="keyword">const</span> playerControls = player.<span class="title function_">querySelector</span>(<span class="string">".player__controls"</span>);</span><br><span class="line"><span class="keyword">const</span> playerPlayList = player.<span class="title function_">querySelectorAll</span>(<span class="string">".player__song"</span>);</span><br><span class="line"><span class="keyword">const</span> playerSongs = player.<span class="title function_">querySelectorAll</span>(<span class="string">".audio"</span>);</span><br><span class="line"><span class="keyword">const</span> playButton = player.<span class="title function_">querySelector</span>(<span class="string">".play"</span>);</span><br><span class="line"><span class="keyword">const</span> nextButton = player.<span class="title function_">querySelector</span>(<span class="string">".next"</span>);</span><br><span class="line"><span class="keyword">const</span> backButton = player.<span class="title function_">querySelector</span>(<span class="string">".back"</span>);</span><br><span class="line"><span class="keyword">const</span> playlistButton = player.<span class="title function_">querySelector</span>(<span class="string">".playlist"</span>);</span><br><span class="line"><span class="keyword">const</span> slider = player.<span class="title function_">querySelector</span>(<span class="string">".slider"</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContext = player.<span class="title function_">querySelector</span>(<span class="string">".slider__context"</span>);</span><br><span class="line"><span class="keyword">const</span> sliderName = sliderContext.<span class="title function_">querySelector</span>(<span class="string">".slider__name"</span>);</span><br><span class="line"><span class="keyword">const</span> sliderTitle = sliderContext.<span class="title function_">querySelector</span>(<span class="string">".slider__title"</span>);</span><br><span class="line"><span class="keyword">const</span> sliderContent = slider.<span class="title function_">querySelector</span>(<span class="string">".slider__content"</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">"img[alt = 'pause-icon']"</span>);</span><br><span class="line"><span class="keyword">const</span> playIcon = playButton.<span class="title function_">querySelector</span>(<span class="string">"img[alt = 'play-icon']"</span>);</span><br><span class="line"><span class="keyword">const</span> progres = player.<span class="title function_">querySelector</span>(<span class="string">".progres"</span>);</span><br><span class="line"><span class="keyword">const</span> progresFilled = progres.<span class="title function_">querySelector</span>(<span class="string">".progres__filled"</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>) {</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">"open-header"</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">"move"</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">"open-slider"</span>);</span><br><span class="line"> </span><br><span class="line">}</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>) {</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">"open-header"</span>);</span><br><span class="line"> playerControls.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">"move"</span>);</span><br><span class="line"> slider.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">"open-slider"</span>);</span><br><span class="line"> </span><br><span class="line">}</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>) {</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == sliderContentLength) {</span><br><span class="line"> count = count;</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</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">${left}</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">}</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>) {</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (count == <span class="number">0</span>) {</span><br><span class="line"> count = count</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</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">${left}</span>%, 0, 0)`</span>;</span><br><span class="line"> count--;</span><br><span class="line"></span><br><span class="line">}</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>) {</span><br><span class="line"></span><br><span class="line"> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> = <span class="string">"opacity"</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">".player__title"</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">".player__song-name"</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>) {</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">"span"</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">"text-wrap"</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderName.<span class="property">textContent</span> + <span class="string">" "</span> + sliderName.<span class="property">textContent</span>; </span><br><span class="line"> sliderName.<span class="property">innerHTML</span> = <span class="string">""</span>;</span><br><span class="line"> sliderName.<span class="title function_">append</span>(textWrap);</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> (sliderTitle.<span class="property">textContent</span>.<span class="property">length</span> &gt;= <span class="number">18</span>) {</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">"span"</span>);</span><br><span class="line"> textWrap.<span class="property">className</span> = <span class="string">"text-wrap"</span>;</span><br><span class="line"> textWrap.<span class="property">innerHTML</span> = sliderTitle.<span class="property">textContent</span> + <span class="string">" "</span> + sliderTitle.<span class="property">textContent</span>; </span><br><span class="line"> sliderTitle.<span class="property">innerHTML</span> = <span class="string">""</span>;</span><br><span class="line"> sliderTitle.<span class="title function_">append</span>(textWrap);</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"><span class="keyword">function</span> <span class="title function_">changeBgBody</span>(<span class="params"></span>) {</span><br><span class="line"> body.<span class="property">style</span>.<span class="property">backgroundColor</span> = bgBody[count];</span><br><span class="line">}</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>) {</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) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (item != song) {</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"> }</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> (isPlay) song.<span class="title function_">play</span>();</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"><span class="keyword">function</span> <span class="title function_">playSong</span>(<span class="params"></span>) {</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>) {</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">"none"</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">"block"</span>;</span><br><span class="line"></span><br><span class="line"> }<span class="keyword">else</span>{</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">""</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">""</span>;</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"></span><br><span class="line">}</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>) {</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">"%"</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>) {</span><br><span class="line"> <span class="title function_">next</span>();</span><br><span class="line"> }</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>) {</span><br><span class="line"> playIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">"block"</span>;</span><br><span class="line"> pauseIcon.<span class="property">style</span>.<span class="property">display</span> = <span class="string">""</span>;</span><br><span class="line"> isPlay = <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line">}</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>) {</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">}</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>) {</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">"0"</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">"0"</span> + sec;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> playerSongTime = <span class="string">`<span class="subst">${min}</span>:<span class="subst">${sec}</span>`</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">closest</span>(<span class="string">".player__song"</span>).<span class="title function_">querySelector</span>(<span class="string">".player__song-time"</span>).<span class="title function_">append</span>(playerSongTime);</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"><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">"click"</span>, openPlayer);</span><br><span class="line">sliderContext.<span class="title function_">addEventListener</span>(<span class="string">"animationend"</span>, <span class="function">() =&gt;</span> sliderContext.<span class="property">style</span>.<span class="property">animationName</span> =<span class="string">''</span>);</span><br><span class="line">playlistButton.<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, closePlayer);</span><br><span class="line"></span><br><span class="line">nextButton.<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, next);</span><br><span class="line"></span><br><span class="line">backButton.<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, <span class="function">() =&gt;</span> {</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">});</span><br><span class="line"></span><br><span class="line">playButton.<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, <span class="function">() =&gt;</span> {</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">});</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> {</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">"loadeddata"</span> , durationSongs);</span><br><span class="line"> song.<span class="title function_">addEventListener</span>(<span class="string">"timeupdate"</span> , progresUpdate);</span><br><span class="line"> </span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">progres.<span class="title function_">addEventListener</span>(<span class="string">"mousedown"</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> {</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">});</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">"mousemove"</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">"mouseup"</span>, <span class="function">() =&gt;</span> {</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">});</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> {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure></div></details></li><li>编辑[blogroot]\themes\butterfly\layout\page.pug<figure class="highlight diff"><table><tbody><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 'tags'</span><br><span class="line"> include includes/page/tags.pug</span><br><span class="line"> when 'link'</span><br><span class="line"> include includes/page/flink.pug</span><br><span class="line"> when 'bb'</span><br><span class="line"> include includes/page/bb.pug</span><br><span class="line"> when 'categories'</span><br><span class="line"> include includes/page/categories.pug</span><br><span class="line"><span class="addition">+ when 'music'</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></tbody></table></figure></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tbody><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">'Eutopia'</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">'Yoohsic Roomz'</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">'http://music.163.com/song/media/outer/url?id=29129889.mp3'</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">'Everything'</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">'Yinyues'</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">'http://music.163.com/song/media/outer/url?id=29544794.mp3'</span></span><br><span class="line"><span class="comment"># - name: '歌曲名字'</span></span><br><span class="line"><span class="comment"># author: '歌曲作者'</span></span><br><span class="line"><span class="comment"># image: '歌曲图片'</span></span><br><span class="line"><span class="comment"># url: '歌曲链接'</span></span><br></pre></td></tr></tbody></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><tbody><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: 'music'</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></tbody></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="教程开始,-1"><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><tbody><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="/assets/css/tplayer.css"</span><br><span class="line"> rel="stylesheet"</span><br><span class="line"> type="text/css"</span><br><span class="line">)</span><br><span class="line">link(</span><br><span class="line"> href="/assets/plugins/FontAwesome4.1/css/font-awesome.min.css"</span><br><span class="line"> rel="stylesheet"</span><br><span class="line"> type="text/css"</span><br><span class="line">)</span><br><span class="line">script(src="/assets/js/jquery.js")</span><br><span class="line">script(src="/assets/js/jquery-ui.js")</span><br><span class="line">script(src="/assets/js/tPlayer.js")</span><br><span class="line">#t_wrapper</span><br><span class="line"> #t_cover</span><br><span class="line"> img(src="/assets/images/logo.png")</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="width: 0%;")</span><br><span class="line"> span.ui-corner-all.ui-slider-handle.ui-state-default(style="left: 0%;" tabindex="0")</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="#")=musics.name + ' - ' + musics.author</span><br><span class="line"> audio(preload="none" src=musics.url type="audio/mp3")</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="#",target="_blank",style="text-align:center;color: #fff;") :D 获取中...</span><br><span class="line">if theme.musicplayer.hitokoto</span><br><span class="line"> script.</span><br><span class="line"> fetch('https://v1.hitokoto.cn')</span><br><span class="line"> .then(response =&gt; response.json())</span><br><span class="line"> .then(data =&gt; {</span><br><span class="line"> const hitokoto = document.querySelector('#hitokoto_text')</span><br><span class="line"> hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`</span><br><span class="line"> hitokoto.innerText = data.hitokoto + " —— " + data.creator + "「" + data.from + "」"</span><br><span class="line"> })</span><br><span class="line"> .catch(console.error)</span><br></pre></td></tr></tbody></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="tip info"><p>1.0想升级成2.0的，下面的步骤可以不用做</p></div></li><li>编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：<figure class="highlight yml"><table><tbody><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">'Eutopia'</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">'Yoohsic Roomz'</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">'http://music.163.com/song/media/outer/url?id=29129889.mp3'</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">'Everything'</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">'Yinyues'</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">'http://music.163.com/song/media/outer/url?id=29544794.mp3'</span></span><br><span class="line"><span class="comment"># - name: '歌曲名字'</span></span><br><span class="line"><span class="comment"># author: '歌曲作者'</span></span><br><span class="line"><span class="comment"># image: '歌曲图片'</span></span><br><span class="line"><span class="comment"># url: '歌曲链接'</span></span><br></pre></td></tr></tbody></table></figure></li><li>运行<code>hexo new page music</code></li><li>编辑[blogroot]\source\music\index.md，把里面的内容替换成：<figure class="highlight markdown"><table><tbody><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: 'music'</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></tbody></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button></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></article><div class="post-copyright"><div class="post-copyright__author_group"><div class="post-copyright__author_img"><img class="post-copyright__author_img_front" src="/images/icon.png"></div><div class="post-copyright__author_name">汐塔魔法屋</div><div class="post-copyright__author_desc">Ceta Magical House</div></div><div class="post-tools" id="post-tools"><div class="post-tools-left"><div id="quit-box" onclick="RemoveRewardMask()"></div><div class="reward-link mode"><a class="reward-link-button" href="/atom.xml"><i class="solitude fa-solid fa-seedling"></i>订阅</a></div></div></div><div class="social-share"><a class="social-share-ico icon-qq" target="_blank" rel="noopener" href="https://connect.qq.com/widget/shareqq/index.html?url=https%3A%2F%2Fblog.storical.space%2Fposts%2F22945%2F&amp;title=butterfly%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%EF%BC%88%E9%80%82%E9%85%8D%E6%89%8B%E6%9C%BA%EF%BC%89&amp;desc=%E5%8E%9F%E5%85%88%E7%9A%84%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%E5%AD%98%E5%9C%A8BUG%EF%BC%9A%E6%89%8B%E6%9C%BA%E8%AE%BF%E9%97%AE%E4%BC%9A%E9%94%99%E4%B9%B1%EF%BC%8C%E6%89%80%E4%BB%A5%E6%88%91%E9%87%8D%E6%96%B0%E6%89%BE%E4%BA%86%E4%B8%AA%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8%E6%BA%90%E7%A0%81&amp;summary=%E5%8E%9F%E5%85%88%E7%9A%84%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%E5%AD%98%E5%9C%A8BUG%EF%BC%9A%E6%89%8B%E6%9C%BA%E8%AE%BF%E9%97%AE%E4%BC%9A%E9%94%99%E4%B9%B1%EF%BC%8C%E6%89%80%E4%BB%A5%E6%88%91%E9%87%8D%E6%96%B0%E6%89%BE%E4%BA%86%E4%B8%AA%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8%E6%BA%90%E7%A0%81&amp;site=butterfly%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%EF%BC%88%E9%80%82%E9%85%8D%E6%89%8B%E6%9C%BA%EF%BC%89&amp;pics=https%3A%2F%2Fjsd.cdn.storisinz.site%2Fgh%2FSinzMise%2FMYPictures%40master%2F20230114%2Flogo.22azkjyis5uo.webp" title="分享到QQ"><i class="solitude fab fa-qq"></i></a><a class="social-share-ico icon-weibo" target="_blank" rel="noopener" href="http://service.weibo.com/share/share.php?url=https%3A%2F%2Fblog.storical.space%2Fposts%2F22945%2F&amp;title=butterfly%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%EF%BC%88%E9%80%82%E9%85%8D%E6%89%8B%E6%9C%BA%EF%BC%89&amp;pic=https%3A%2F%2Fjsd.cdn.storisinz.site%2Fgh%2FSinzMise%2FMYPictures%40master%2F20230114%2Flogo.22azkjyis5uo.webp" title="分享到微博"><i class="solitude fab fa-weibo"></i></a><a class="social-share-ico icon-twitter" target="_blank" rel="noopener" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fblog.storical.space%2Fposts%2F22945%2F&amp;text=butterfly%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E9%A1%B5%E9%9D%A2%EF%BC%88%E9%80%82%E9%85%8D%E6%89%8B%E6%9C%BA%EF%BC%89" title="分享到Twitter"><i class="solitude fab fa-twitter"></i></a><a class="social-share-ico icon-facebook" target="_blank" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.storical.space%2Fposts%2F22945%2F" title="分享到Facebook"><i class="solitude fab fa-facebook"></i></a><div class="social-share-ico icon-link" onclick="utils.copy(&quot;https://blog.storical.space/posts/22945/&quot;)" title="复制文章链接"><i class="solitude fas fa-link"></i></div><div class="social-share-ico icon-qrcode" title="使用手机扫码阅读这篇文章"><i class="solitude fas fa-qrcode"></i><div class="share-main"><div class="share-main-all"><div id="qrcode"></div><div class="reward-dec">使用手机扫码阅读这篇文章</div></div></div><script pjax="">"function"==typeof QRCode&&new QRCode(document.getElementById("qrcode"),{text:"https://blog.storical.space/posts/22945/",correctLevel:QRCode.CorrectLevel.L}),window.addEventListener("DOMContentLoaded",(()=>{new QRCode(document.getElementById("qrcode"),{text:"https://blog.storical.space/posts/22945/",correctLevel:QRCode.CorrectLevel.L})}))</script></div></div><div class="post-copyright__notice"><span class="post-copyright-info">本文是原创文章，采用<a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans">CC BY-NC-SA 4.0</a>协议，完整转载请注明来自<a href="/">汐塔魔法屋</a></span></div></div><div class="post-tools-right"><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/"><span class="tags-punctuation"><i class="solitude fa-solid fa-hashtag"></i>站点折腾<span class="tagsPageCount">14</span></span></a><a class="post-meta__tags" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/"><span class="tags-punctuation"><i class="solitude fa-solid fa-hashtag"></i>页面魔改<span class="tagsPageCount">3</span></span></a></div></div></div><nav class="needEndHide pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/38964/"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div class="next-post pull-right"><a href="/posts/23021/"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">再见2022，你好2023</div></div></a></div></nav><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="solitude fa-solid fa-comment"></i> <span>评论</span> <span class="count">(<span class="artalk-count"></span>)</span></div></div><div class="comment-wrap"><div id="artalk-wrap"></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>网络回响</span></div></div><div class="comment-wrap webmention-timeline"></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info h-card"><div class="card-content"><div class="card-info-avatar is-center"><div class="author-info__top-group"><div class="author-info__sayhi" id="author-info__sayhi" onclick="sco.changeWittyWord()"></div></div></div><div class="avatar-img-group"><img class="avatar-img" alt="头像" src="/img/avatar.webp"></div><div class="author-info__description_group"><div class="author-info__description">人生 没必要 想太多“为什么”<br>也 没必要 想太多乱七八糟的事情<br>而是应该想“怎么做”“怎么样”“会成功的”<br>给自己一些鼓励和关爱<br>才能遇到好的生活</div></div><div class="author-info__bottom-group"><span class="author-info__bottom-group-left"><div class="author-info__name p-name p-author">王九弦SZ·Ninty</div><div class="author-info__desc p-note">种下故事的种子，在光的照耀下生根发芽</div></span><div class="card-info-social-icons is-center"><a class="social-icon u-url" target="_blank" href="https://github.com/SinzMise" title="Github" rel="me noopener"><i class="solitude fab fa-github"></i></a><a class="social-icon u-url u-email" href="mailto:email@sinzmise.top" title="Email" rel="me"><i class="solitude fa fa-envelope"></i></a></div></div></div></div><div class="card-widget" id="card-widget-schedule"><div class="item-headline"><i></i><span></span></div><div class="item-content"><div id="schedule-area-left"><div id="schedule-title">距离除夕</div><div id="schedule-days"></div><div id="schedule-date">2025-01-28</div></div><div id="schedule-area-right"><div class="schedule-r0"><div class="schedule-d0">本年</div><div class="schedule-d1"><span id="p_span_year" class="aside-span1"></span> <span class="aside-span2">还剩<a></a>天</span><progress max="365" id="pBar_year"></progress></div></div><div class="schedule-r1"><div class="schedule-d0">本月</div><div class="schedule-d1"><span id="p_span_month" class="aside-span1"></span> <span class="aside-span2">还剩<a></a>天</span><progress max="30" id="pBar_month"></progress></div></div><div class="schedule-r2"><div class="schedule-d0">本周</div><div class="schedule-d1"><span id="p_span_week" class="aside-span1"></span> <span class="aside-span2">还剩<a></a>天</span><progress max="7" id="pBar_week"></progress></div></div></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="solitude fa-solid fa-bars"></i><span>文章目录</span></div><div class="toc-content" id="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%95%99%E7%A8%8B"><span class="toc-text">教程</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#TO-DO"><span class="toc-text">TO DO</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="solitude fa-solid fa-map"></i><span>最近发布</span></div><div class="aside-list"><a class="aside-list-item" href="/posts/60486/" title="新的域名，新的故事"><div class="thumbnail"><img alt="新的域名，新的故事" src="https://images1.blog.sinzmise.top/azurlane/421f8fbd754f7f6264cb40b78812cc5d60e5911b.avif"></div><div class="content"><span class="title" href="/posts/60486/" title="新的域名，新的故事">新的域名，新的故事</span><span class="article-recent_post_categories" href="/posts/60486/">个人小记</span></div></a><a class="aside-list-item" href="/posts/23226/" title="很屑的2024年度总结（"><div class="thumbnail"><img alt="很屑的2024年度总结（" src="https://images1.blog.sinzmise.top/20250121/再见2024，你好2025.39l9926twi.avif"></div><div class="content"><span class="title" href="/posts/23226/" title="很屑的2024年度总结（">很屑的2024年度总结（</span><span class="article-recent_post_categories" href="/posts/23226/">个人小记</span></div></a><a class="aside-list-item" href="/posts/65382/" title="圣诞快乐+12月小记"><div class="thumbnail"><img alt="圣诞快乐+12月小记" src="https://images1.blog.sinzmise.top/azurlane/b8171c65a69cb14d1bb8150936585151edc7cb72.avif"></div><div class="content"><span class="title" href="/posts/65382/" title="圣诞快乐+12月小记">圣诞快乐+12月小记</span><span class="article-recent_post_categories" href="/posts/65382/">个人小记</span></div></a><a class="aside-list-item" href="/posts/61713/" title="2024-11小记"><div class="thumbnail"><img alt="2024-11小记" src="https://images1.blog.sinzmise.top/azurlane/11.avif"></div><div class="content"><span class="title" href="/posts/61713/" title="2024-11小记">2024-11小记</span><span class="article-recent_post_categories" href="/posts/61713/">个人小记</span></div></a><a class="aside-list-item" href="/posts/61712/" title="2024-10小记"><div class="thumbnail"><img alt="2024-10小记" src="https://images1.blog.sinzmise.top/images/2024-10.9gwlrtheoo.webp"></div><div class="content"><span class="title" href="/posts/61712/" title="2024-10小记">2024-10小记</span><span class="article-recent_post_categories" href="/posts/61712/">个人小记</span></div></a></div></div><div class="card-widget card-tags card-archives card-webinfo card-allinfo"><div class="webinfo"><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon fa-solid fa-folder-closed"></i><div class="item-name">文章总数 :</div></div><div class="item-count">46</div></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-eye"></i><div class="item-name">总访问数 :</div></div><span id="busuanzi_value_site_pv"><i class="solitude fa-solid fa-spinner fa-spin"></i></span></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-user"></i><div class="item-name">总访客数 :</div></div><span id="busuanzi_value_site_uv"><i class="solitude fa-solid fa-spinner fa-spin"></i></span></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-calendar-day"></i><div class="item-name">建站天数 :</div></div><div class="item-count" id="runtimeshow"></div></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-arrows-rotate"></i><div class="item-name">最后更新 :</div></div><time class="item-count" datetime="2025-01-21T10:00:47.706Z"></time></div><div class="webinfo-item"><div class="webinfo-item-title"><i class="item-icon solitude fa-solid fa-file-word"></i><div class="item-name">全站字数 :</div></div><div class="item-count">46.4k</div></div></div></div></div></div></main><footer id="footer"><div id="footer_deal"><a class="deal_link" target="_blank" rel="noopener" href="https://github.com/SinzMise" title="Github"><i class="solitude fab fa-github"></i></a><a class="deal_link" href="mailto:email@sinzmise.top" title="Mail"><i class="solitude far fa-envelope"></i></a><div class="nolazyload footer_mini_logo" id="footer_mini_logo" title="返回顶部" onclick="sco.toTop()"><img src="/img/avatar.webp" alt="返回顶部"></div><a class="deal_link" target="_blank" rel="noopener" href="https://space.bilibili.com/479627766" title="Bilibili"><i class="solitude fab fa-bilibili"></i></a><a class="deal_link" target="_blank" rel="noopener" href="https://www.storical.space/" title="Home"><i class="solitude fa fa-home"></i></a></div><div id="st-footer"><div class="footer-group"><h3 class="footer-title">我加入的1</h3><div class="footer-links"><a class="footer-item" target="_blank" rel="noopener" href="https://zhblogs.ohyee.cc/" title="中文博客列表">中文博客列表</a><a class="footer-item" target="_blank" rel="noopener" href="https://storeweb.cn/member/o/1585" title="个站商店">个站商店</a><a class="footer-item" target="_blank" rel="noopener" href="https://bf.zzxworld.com/s/995" title="BlogFinder">BlogFinder</a><a class="footer-item" target="_blank" rel="noopener" href="https://sites.applinzi.com/site-info?siteType=life&amp;siteId=64cb373190e35300a8eec654" title="站点聚合平台">站点聚合平台</a><a class="footer-item" target="_blank" rel="noopener" href="https://boke.lu/" title="博客录">博客录</a></div></div><div class="footer-group"><h3 class="footer-title">我加入的2</h3><div class="footer-links"><a class="footer-item" target="_blank" rel="noopener" href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/" title="RssBlog">RssBlog</a><a class="footer-item" target="_blank" rel="noopener" href="https://blogscn.fun/" title="笔墨迹">笔墨迹</a><a class="footer-item" target="_blank" rel="noopener" href="https://daohang.lusongsong.com/" title="博客大全">博客大全</a><a class="footer-item" target="_blank" rel="noopener" href="https://www.blogsclub.org/blog/99.html" title="BlogsClub">BlogsClub</a><a class="footer-item" target="_blank" rel="noopener" href="https://ourblo.gs/blogs/55/" title="OurBlogs">OurBlogs</a></div></div><div class="footer-group"><div class="footer-title-group"><h3 class="footer-title">友链</h3><button class="random-friends-btn" onclick="randomLinksList()" title="友链"><i class="solitude fa-solid fa-arrows-rotate"></i></button></div><div class="footer-links" id="friend-links-in-footer"></div></div></div><div id="footer-bar"><div class="footer-bar-links"><div class="footer-bar-left"><div class="copyright">© 2023 - 2025 By&nbsp;<a class="footer-bar-link" href="/"><img class="author-avatar" src="/images/icon.png">王九弦SZ·Ninty</a></div><div class="beian-group"><a class="footer-bar-link" target="_blank" rel="noopener" href="https://icp.gov.moe/?keyword=20231033" title="萌ICP备20231033号"><span class="beian-name">萌ICP备20231033号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://icp.yuncheng.fun/id.php?keyword=20241025" title="团ICP备20241025号"><span class="beian-name">团ICP备20241025号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://beian.miit.cn.com/gov/search.php?query=20240818" title="MIIT备20240818号"><img class="beian-icon" src="https://beian.miit.cn.com/logo.svg" alt="MIIT备20240818号"><span class="beian-name">MIIT备20240818号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/" title="官码2024000155号"><span class="beian-name">官码2024000155号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://icp.snzy.cc/?id=2024120181" title="梵AIA盟2024120181号"><img class="beian-icon" src="https://icp.snzy.cc/static/picture/icpba.png" alt="梵AIA盟2024120181号"><span class="beian-name">梵AIA盟2024120181号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://icp.sepocatch.xyz/search.php?keyword=blog.storical.space" title="SICP备20243448号"><span class="beian-name">SICP备20243448号</span></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://hexo.io/">框架：Hexo</a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://github.com/everfu/hexo-theme-solitude">主题：Solitude</a></div></div><div class="footer-bar-right"><a class="footer-bar-link" alt="<a href=&quot;https://xn--sr8hvo.ws/previous&quot;>←</a>&amp;nbsp;An&amp;nbsp;<a href=&quot;https://xn--sr8hvo.ws&quot;>IndieWeb Webring</a>&amp;nbsp;🕸💍&amp;nbsp;<a href=&quot;https://xn--sr8hvo.ws/next&quot;>→</a>"></a><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a>&nbsp;An&nbsp;<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a>&nbsp;🕸💍&nbsp;<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a><a class="footer-bar-link" href="/atom.xml" alt="RSS">RSS</a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans" alt="License"><i class="solitude fas fa-copyright"></i><i class="solitude fab fa-creative-commons-by"></i><i class="solitude fab fa-creative-commons-nc"></i><i class="solitude fab fa-creative-commons-nd"></i></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" alt="开往-友链接力"><img src="https://www.travellings.cn/assets/logo.gif" alt="开往-友链接力"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://boringbay.com/" alt="无聊湾 🥱 The Boring Bay"><img src="https://boringbay.com/api/badge/blog.storical.space" alt="无聊湾 🥱 The Boring Bay"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://blogscn.fun/" alt="本站已加入BLOGS·CN"><img src="https://photo.xiangming.site/img/blogscn.png" alt="本站已加入BLOGS·CN"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://blogscn.fun/random.html" alt="BLOGS·CN随机访问"><img src="https://photo.xiangming.site/img/footer.gif" alt="BLOGS·CN随机访问"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://www.blogsclub.org/go" alt="空间穿梭-随机访问BlogsClub成员博客"><img src="https://www.blogsclub.org/images/shuttle_1.png" alt="空间穿梭-随机访问BlogsClub成员博客"></a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://http3.wcode.net/?q=blog.storical.space" alt="本站支持HTTP/3"><img src="https://http3.wcode.net/badges/http3.svg?host=blog.storical.space" alt="本站支持HTTP/3"></a></div></div></div><div class="comment-barrage needEndHide"></div></footer></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="solitude fa-solid fa-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="solitude fa-solid fa-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="solitude fa-solid fa-arrows-rotate"></i></div><div class="rightMenu-item" id="menu-top"><i class="solitude fa-solid fa-arrow-up"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuPlugin"><div class="rightMenu-item" id="menu-copytext"><i class="solitude fa-solid fa-clone"></i><span>复制选中文本</span></div><div class="rightMenu-item" id="menu-pastetext"><i class="solitude fa-solid fa-clipboard"></i><span>粘贴文本</span></div><div class="rightMenu-item" id="menu-commenttext"><i class="solitude fa-solid fa-comment-medical"></i><span>引用到评论</span></div><div class="rightMenu-item" id="menu-newwindow"><i class="solitude fa-regular fa-window-maximize"></i><span>新窗口打开</span></div><div class="rightMenu-item" id="menu-copylink"><i class="solitude fa-solid fa-link"></i><span>复制链接地址</span></div><div class="rightMenu-item" id="menu-copyimg"><i class="solitude fa-solid fa-clone"></i><span>复制此图片</span></div><div class="rightMenu-item" id="menu-downloadimg"><i class="solitude fa-solid fa-cloud-arrow-down"></i><span>下载此图片</span></div><div class="rightMenu-item" id="menu-search"><i class="solitude fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><div class="rightMenu-item" id="menu-commentBarrage" onclick="sco.switchCommentBarrage()"><i class="solitude fa-solid fa-comment"></i><span class="menu-commentBarrage-text">关闭热评</span></div><div class="rightMenu-item" id="menu-darkmode" onclick="sco.switchDarkMode()"><i class="solitude fa-solid fa-circle-half-stroke"></i><span class="menu-darkmode-text">深色模式</span></div><div class="rightMenu-item" id="menu-translate"><i class="solitude fa-solid fa-language"></i><span>轉為繁體</span></div></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js?v=3.0.5"></script><script src="/js/main.js?v=3.0.5"></script><script src="/js/third_party/waterfall.min.js?v=3.0.5"></script><script src="https://jsd.cdn.sinzmise.top/npm/pjax@0.2.8/pjax.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/qrcodejs@1.0.0/qrcode.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/typeit@8.8.7/dist/index.umd.min.js"></script><script src="/js/third_party/universe.min.js?v=3.0.5"></script><script>dark()</script><script src="/js/tw_cn.js?v=3.0.5"></script><script src="https://jsd.cdn.sinzmise.top/npm/vanilla-lazyload@19.1.3/dist/lazyload.iife.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/node-snackbar@0.1.16/dist/snackbar.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.umd.min.js"></script><script>const coverColorConfig={api:"https://api.qjqq.cn/api/Imgcolor?img=",time:432e5}</script><script src="/js/covercolor/api.js?v=3.0.5"></script><script>window.paceOptions={restartOnPushState:!1},utils.addGlobalFn("pjaxSend",(()=>{Pace.restart()}),"pace_restart")</script><script src="https://jsd.cdn.sinzmise.top/npm/pace-js@1.2.4/pace.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/instantsearch.js@4.75.6/dist/instantsearch.production.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/algoliasearch@5.18.0/dist/algoliasearch.umd.min.js"></script><script src="/js/right_menu.js?v=3.0.5"></script><script src="/js/schedule.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script><script src="/chatroom/chatroom.js"></script><script async src="//at.alicdn.com/t/c/font_3586335_hsivh70x0fm.js"></script><script async src="//at.alicdn.com/t/c/font_4199232_wlo8truegv.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/aplayer/dist/APlayer.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/meting/dist/Meting.min.js"></script><script src="https://jsd.cdn.sinzmise.top/npm/@ruffle-rs/ruffle"></script><script src="/js/cenguigui.js"></script><div class="js-pjax"><script>(()=>{let t=null;const e=()=>{if(t=Artalk.init({el:"#artalk-wrap",server:"https://atk.pl.blog.sinzmise.top",site:"汐塔魔法屋",pageKey:location.pathname,darkMode:"dark"===document.documentElement.getAttribute("data-theme"),countEl:".artalk-count"},null),"null"===GLOBAL_CONFIG.lightbox)return;t.on("list-loaded",(()=>{const e=[];t.ctx.get("list").getCommentNodes().forEach((t=>{e.push({nick:t.data.nick,content:t.data.content_marked,mailMd5:t.data.email_encrypted});const a=t.getRender().$content;GLOBAL_CONFIG.lightbox&&utils.lightbox(a.querySelectorAll("img:not([atk-emoticon])"))})),sco.owoBig({body:".atk-grp",item:".atk-item"})&&barrageArtalk(e)}));utils.addGlobalFn("pjax",(()=>t.destroy()),"destroyArtalk"),document.addEventListener("pjax:complete",(function(){t.update({pageKey:window.location.pathname,pageTitle:document.title}),t.reload()}))},a=async()=>{"object"==typeof Artalk?e():(await utils.getCSS("https://jsd.cdn.sinzmise.top/npm/artalk@2.9.1/dist/Artalk.min.css"),await utils.getScript("https://jsd.cdn.sinzmise.top/npm/artalk@2.9.1/dist/Artalk.min.js").then(e))};utils.addGlobalFn("themeChange",(e=>{const a=document.getElementById("artalk-wrap");if(!a||!a.children.length)return;const n="dark"===e;t.setDarkMode(n)}),"artalk"),a()})()</script><script defer pjax="" src="https://jsd.cdn.sinzmise.top/npm/busuanzi@2.3.0/bsz.pure.mini.min.js"></script></div><script>var webmentionContext={baseUrl:"https://webmention.io"},webmentionEndpoint="https://webmention.io/blog.storical.space/webmention"</script><script data-pjax="" src="/js/webmention/webmention.js?v=3.0.5"></script><script data-pjax="" src="/js/webmention/webmention-timeline.js?v=3.0.5"></script><script src="https://jsd.cdn.sinzmise.top/npm/jquery@3.5.1/dist/jquery.min.js"></script></div><script>const links=[{name:"Hexo",link:"https://hexo.io/"},{name:"Solitude",link:"https://github.com/everfu/hexo-theme-solitude"},{name:"安知鱼",link:"https://blog.anheyu.com/"},{name:"轻笑Chuckle",link:"https://www.qcqx.cn"},{name:"SeaEpoch",link:"https://www.seayj.cn"},{name:"晓雨杂记",link:"https://lihaoyu.cn"},{name:"山岳库博",link:"https://kmar.top/"},{name:"Ariasakaの小窝",link:"https://blog.yaria.top"},{name:"勿埋我心",link:"https://www.skyqian.com"},{name:"iMaeGoo’s Blog",link:"https://www.imaegoo.com"},{name:"贰猹的小窝",link:"https://noionion.top/"},{name:"定の栈",link:"https://saop.cc"},{name:"Guoqi Sun",link:"https://blog.sunguoqi.com"},{name:"Echo 的小窝",link:"https://www.liveout.cn/"},{name:"米米的博客",link:"https://zhangshuqiao.org"},{name:"MHuiG",link:"https://mhuig.top"},{name:"杜老师说",link:"https://dusays.com"},{name:"Leonus",link:"https://blog.leonus.cn/"},{name:"小N同学",link:"https://www.imcharon.com/"},{name:"Android",link:"https://android99.com"},{name:"张洪Heo",link:"https://blog.zhheo.com/"},{name:"刘洪亮Leo",link:"https://lhliang.com"},{name:"张时贰",link:"https://zhsher.cn"},{name:"Tianli",link:"https://blog.tianli0.top/"},{name:"时光日志",link:"https://www.timelogs.cn"},{name:"葱苓sama",link:"https://blog.ciraos.top"},{name:"Wayne's Blog",link:"https://wrans.top"},{name:"铭心石刻",link:"https://blog.kouseki.cn/"},{name:"猫羽のブログす",link:"https://www.maoyv.cn/"},{name:"猫羽のブログす（新站）",link:"https://www.maoyv.com/"},{name:"风起",link:"https://www.fqxk.com.cn"},{name:"Mycpen",link:"https://blog.cpen.top/"},{name:"W4J1e's blog",link:"https://hin.cool"},{name:"Fomalhaut🥝",link:"https://www.fomal.cc/"},{name:"醉月酿星河",link:"https://blog.catrol.cn/"},{name:"CyanFalse's Weblog",link:"https://blog.eurekac.cn"},{name:"阿锋的小宇宙",link:"https://feng.pub"},{name:"白云苍狗",link:"https://www.imalun.com"},{name:"半方池水半方田",link:"https://uuanqin.top/"},{name:"朽丘秋雨",link:"https://koxiuqiu.cn/"},{name:"网友小宋",link:"https://xyzbz.cn/"},{name:"懋和道人",link:"https://www.dao.js.cn/"},{name:"青桔气球",link:"https://blog.qjqq.cn/"},{name:"微光档案",link:"https://bikari.top"},{name:"风记星辰",link:"https://www.thyuu.com"},{name:"甜鱼/Ayu",link:"https://ayu.land/"},{name:"小鹿的个人网站",link:"https://www.siena.zone"},{name:"Aciano",link:"https://aciano.top/"},{name:"奇思妙想录",link:"https://blog.nicebao.com"},{name:"喵二の小博客",link:"https://www.miaoer.net/"},{name:"Ordis",link:"https://imbhj.com"},{name:"ANXYの小窝",link:"https://blog.anxy.top/"},{name:"月光小镇",link:"https://mooncc.cn/"},{name:"希乐博客",link:"https://blog.xlenco.top/"},{name:"福福不服",link:"https://ffbf.top"},{name:"追梦幻境·云之都",link:"https://blog.dreamerhe.cn/"},{name:"Xiobb’s Blog",link:"https://www.i45s.com/?_ref=blog.sinzmise.top"},{name:"foxcat（狐狸猫的博客）",link:"https://blog.foxcat.eu.org/"},{name:"Gaspard の传火祭祀场",link:"https://www.gaspard.top/"},{name:"阿方的博客",link:"https://fang.blog.miri.site/"},{name:"落落のBlog",link:"https://www.whaleluo.top/"},{name:"俊逸的博客",link:"https://lijunyi.xyz/"},{name:"Calyee",link:"https://blog.calyee.top/"},{name:"小丁的屋舍",link:"https://xding.top/"},{name:"冬天的小窝",link:"https://www.iamdt.cn/"},{name:"郑文峰的博客",link:"https://www.zhengwenfeng.com"},{name:"Naive Koala 🐨",link:"https://www.xalaok.top/"},{name:"微霞",link:"https://yuuu.org"},{name:"孤熵小狼",link:"https://blog.furen.link"},{name:"奥奥の探索日记",link:"https://blog.shaoao.top/"},{name:"Daoker小站",link:"https://daoker.cc"},{name:"LZHの小窝",link:"https://blog.lzh.life/"},{name:"lveMonsiのBlog",link:"https://blog.lvems.top/"},{name:"彬彬加冰",link:"https://blog.wzwzx.cn"},{name:"Isoheptane",link:"https://blog.cascade.moe/"},{name:"雨宮千夏の博麗神社",link:"https://blog.uuz.moe/"},{name:"清羽飞扬",link:"https://blog.liushen.fun/"},{name:"杰帕斯の小窝",link:"https://japerz.com"},{name:"星の野",link:"https://blog.byer.top/"},{name:"Souiken’s Homepage",link:"https://souiken.moe/"},{name:"PuddingKCの小站",link:"https://www.puddingkc.com/"},{name:"MBRjun-Blog",link:"https://www.mbrjun.cn/"},{name:"Homulilly",link:"https://homulilly.com"},{name:"蓝调时刻",link:"https://www.landiaoshike.com/"},{name:"XenWayne’s Blog",link:"https://xenwayne.top"},{name:"白丁往事",link:"https://blog.rayvv.com/"},{name:"haohang",link:"https://www.shimmerl.top"},{name:"咖啡豆子coffee的小站",link:"https://blog.kfdzcoffee.cn"},{name:"雪萌天文台",link:"https://blog.snowy.moe"},{name:"澄沨的漫游茶记",link:"https://champhoon.xyz/"},{name:"VanllaOcap Blog",link:"https://blog.255650.xyz"},{name:"LeZi的猫窝",link:"https://leziblog.com"},{name:"雨滴思绪",link:"https://www.qunqin.net/"},{name:"Pinpe 的云端",link:"https://pinpe.top"},{name:"Debug客栈",link:"https://debuginn.com"},{name:"lhDream",link:"https://blog.luhua.site"},{name:"XingJiのBlog",link:"https://love.xingji.fun/"},{name:"无名博客",link:"https://wuminboke.site/"},{name:"murenyouの小窝",link:"https://murenyou.cn"},{name:"Elykia",link:"https://blog.elykia.cn/"},{name:"小妖客栈",link:"https://wangkay.top"},{name:"陵长镜的小博客",link:"https://r1n.top"},{name:"森尧记",link:"https://07111.cn"},{name:"厄尔科斯",link:"https://sikan.moe/"},{name:"萌！萝莉",link:"https://loliloli.moe"},{name:"洛卡日记",link:"https://luoca.cn/"},{name:"FloatSheep",link:"https://blog.hesiy.cn"},{name:"云团子的博客",link:"https://www.yuncheng.fun/"},{name:"亚斯之声",link:"https://we.owaii.net"},{name:"酸奶云✨",link:"https://blog.mcyogurt.cn/"},{name:"王鑫的小站",link:"https://wxweb.xyz"}],randomText="点击前往按钮进入随机一个友链，不保证跳转网站的安全性和可用性。本次随机到的是本站友链：⌈ ${name} ⌋";function travelling(){const n=links[utils.randomNum(links.length)];Snackbar.show({text:randomText.replace(/\$\{name}/,n.name),duration:8e3,pos:"top-center",actionText:"前往",onActionClick:function(t){t.style.opacity=0,window.open(n.link,"_blank")}})}</script><script>function randomLinksList(){const e=document.getElementById("friend-links-in-footer");if(null==e)return;let n="",t=[...links],l=Math.min(3,t.length);for(let e=0;e<l;e++){let e=utils.randomNum(t.length);const{link:l,name:o}=t[e];n+=`<a class="footer-item" href="${l}" target="_blank" rel="noopener noreferrer nofollow">${o}</a>`,t.splice(e,1)}e.innerHTML=n+'<a class="footer-item" href="/links/">更多</a>'}</script><script>const pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:["title","#body-wrap","#site-config",'meta[name="description"]',".js-pjax",'meta[property^="og:"]',"#config-diff",".rs_show",".rs_hide"],cacheBust:!1,analytics:!1,scrollRestoration:!1});document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)})),document.addEventListener("pjax:complete",(()=>{window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><div id="algolia-search"><div class="search-dialog"><div class="algolia-navbar"><div class="search-dialog__title" id="algolia-search-title">搜索</div><div class="algolia-tips"><i class="solitude fab fa-algolia"></i><span class="algolia-tips-text">Algolia</span></div><span class="search-close-button"><i class="solitude fa-solid fa-xmark"></i></span></div><div id="algolia-input-panel"><div id="algolia-search-input"></div></div><div id="search-results"><div id="algolia-hits"></div></div><div id="algolia-tips"><div id="algolia-pagination"></div><div id="algolia-stats"></div></div></div><div id="search-mask"></div></div><script src="/js/search/algolia.js?v=3.0.5"></script></body></html><script>const posts=["posts/60486/","posts/23226/","posts/65382/","posts/61713/","posts/61712/","posts/10733/","posts/64856/","posts/15688/","posts/46640/","posts/15799/","posts/64935/","posts/10021/","posts/57692/","posts/15748/","posts/10996/","posts/13624/","posts/27762/","posts/15842/","posts/54787/","posts/52677/","posts/10045/","posts/45875/","posts/28536/","posts/27531/","posts/42580/","posts/56467/","posts/54386/","posts/29196/","posts/38917/","posts/18063/","posts/58203/","posts/50710/","posts/28733/","posts/12779/","posts/53662/","posts/20412/","posts/21375/","posts/646/","posts/42487/","posts/54481/","posts/48762/","posts/61417/","posts/38964/","posts/22945/","posts/23021/","posts/16107/"];function toRandomPost(){const s=posts[Math.floor(Math.random()*posts.length)];pjax.loadUrl(GLOBAL_CONFIG.root+s)}</script>