sinzmise-cetastories 1.9.0-1727007356316 → 1.9.0-1727922193410

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/404/index.html +1 -1
  2. package/404.html +1 -1
  3. package/about/index.html +1 -1
  4. package/album/index.html +1 -1
  5. package/archives/2021/12/index.html +1 -1
  6. package/archives/2021/index.html +1 -1
  7. package/archives/2022/12/index.html +1 -1
  8. package/archives/2022/index.html +1 -1
  9. package/archives/2023/01/index.html +1 -1
  10. package/archives/2023/02/index.html +1 -1
  11. package/archives/2023/03/index.html +1 -1
  12. package/archives/2023/04/index.html +1 -1
  13. package/archives/2023/07/index.html +1 -1
  14. package/archives/2023/08/index.html +1 -1
  15. package/archives/2023/09/index.html +1 -1
  16. package/archives/2023/10/index.html +1 -1
  17. package/archives/2023/11/index.html +1 -1
  18. package/archives/2023/12/index.html +1 -1
  19. package/archives/2023/index.html +1 -1
  20. package/archives/2023/page/2/index.html +1 -1
  21. package/archives/2023/page/3/index.html +1 -1
  22. package/archives/2024/01/index.html +1 -1
  23. package/archives/2024/02/index.html +1 -1
  24. package/archives/2024/03/index.html +1 -1
  25. package/archives/2024/04/index.html +1 -1
  26. package/archives/2024/05/index.html +1 -1
  27. package/archives/2024/06/index.html +1 -1
  28. package/archives/2024/07/index.html +1 -1
  29. package/archives/2024/08/index.html +1 -1
  30. package/archives/2024/09/index.html +1 -0
  31. package/archives/2024/index.html +1 -1
  32. package/archives/2024/page/2/index.html +1 -1
  33. package/archives/index.html +1 -1
  34. package/archives/page/2/index.html +1 -1
  35. package/archives/page/3/index.html +1 -1
  36. package/archives/page/4/index.html +1 -1
  37. package/article.json +1 -1
  38. package/atom.xml +45 -46
  39. package/baidusitemap.xml +78 -74
  40. package/bangumis/index.html +1 -1
  41. package/bbs/index.html +1 -1
  42. package/cacheList.json +1 -1
  43. package/categories/index.html +1 -1
  44. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  45. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  46. package/categories//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  47. package/categories//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  48. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  49. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  50. package/categories//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  51. package/charts/index.html +1 -1
  52. package/comments/index.html +1 -1
  53. package/css/mys.css +0 -0
  54. package/essay/index.html +1 -1
  55. package/fcircle/index.html +1 -1
  56. package/google8073542809160a67.html +1 -1
  57. package/index.html +1 -1
  58. package/js/randompost.js +1 -1
  59. package/link/index.html +1 -1
  60. package/music/index.html +1 -1
  61. package/package.json +1 -1
  62. package/page/2/index.html +1 -1
  63. package/page/3/index.html +1 -1
  64. package/page/4/index.html +1 -1
  65. package/posts/10021/index.html +1 -1
  66. package/posts/10045/index.html +1 -1
  67. package/posts/10996/index.html +1 -1
  68. package/posts/12779/index.html +1 -1
  69. package/posts/13624/index.html +1 -1
  70. package/posts/15688/index.html +1 -1
  71. package/posts/15748/index.html +1 -1
  72. package/posts/15799/index.html +1 -1
  73. package/posts/15842/index.html +1 -1
  74. package/posts/16107/index.html +1 -1
  75. package/posts/18063/index.html +1 -1
  76. package/posts/20412/index.html +1 -1
  77. package/posts/21375/index.html +1 -1
  78. package/posts/22945/index.html +1 -1
  79. package/posts/23021/index.html +1 -1
  80. package/posts/27531/index.html +1 -1
  81. package/posts/27762/index.html +1 -1
  82. package/posts/28536/index.html +1 -1
  83. package/posts/28733/index.html +1 -1
  84. package/posts/29196/index.html +1 -1
  85. package/posts/38917/index.html +1 -1
  86. package/posts/38964/index.html +1 -1
  87. package/posts/42487/index.html +1 -1
  88. package/posts/42580/index.html +1 -1
  89. package/posts/45875/index.html +1 -1
  90. package/posts/46640/index.html +1 -1
  91. package/posts/48762/index.html +1 -1
  92. package/posts/50710/index.html +1 -1
  93. package/posts/52677/index.html +1 -1
  94. package/posts/53662/index.html +1 -1
  95. package/posts/54386/index.html +1 -1
  96. package/posts/54481/index.html +1 -1
  97. package/posts/54787/index.html +1 -1
  98. package/posts/56467/index.html +1 -1
  99. package/posts/57692/index.html +1 -1
  100. package/posts/58203/index.html +1 -1
  101. package/posts/61417/index.html +1 -1
  102. package/posts/646/index.html +1 -1
  103. package/posts/64856/index.html +1 -0
  104. package/posts/64935/index.html +1 -1
  105. package/seas/index.html +1 -1
  106. package/sitemap.xml +134 -125
  107. package/tags/Flash/347/233/270/345/205/263/index.html +1 -1
  108. package/tags/Steam/346/270/270/346/210/217/index.html +1 -1
  109. package/tags/Windows/350/275/257/344/273/266/index.html +1 -1
  110. package/tags/index.html +1 -1
  111. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  112. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  113. package/tags//345/205/266/345/256/203/346/270/270/346/210/217/index.html +1 -1
  114. package/tags//345/212/240/350/275/275/345/212/250/347/224/273/index.html +1 -1
  115. 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
  116. package/tags//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  117. package/tags//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  118. package/tags//347/253/231/347/202/271/345/272/225/351/203/250/351/255/224/346/224/271/index.html +1 -1
  119. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  120. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  121. package/tags//350/207/252/345/273/272/351/203/250/347/275/262/index.html +1 -1
  122. package/tags//351/241/265/351/235/242/351/255/224/346/224/271/index.html +1 -1
  123. package/tags//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  124. package/update/index.html +1 -1
  125. package/update.json +1 -1
package/posts/22945/index.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><script>(()=>{let r=navigator.serviceWorker,e=()=>console.error("Service Worker 注册失败！可能是由于您的浏览器不支持该功能！");r?.register("/sw.js")?.catch(e)||e()})()</script><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>butterfly主题添加音乐页面（适配手机） | 星空故事·魔法小屋</title><meta name="author" content="王九弦SZ·Ninty"><meta name="copyright" content="王九弦SZ·Ninty"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><script src="/js/statistic.js"></script><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="webmention" href="https://webmention.io/blog.sinzmise.top/webmention"><meta name="description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:type" content="article"><meta property="og:title" content="butterfly主题添加音乐页面（适配手机）"><meta property="og:url" content="https://blog.sinzmise.top/posts/22945/"><meta property="og:site_name" content="星空故事·魔法小屋"><meta property="og:description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><meta property="article:published_time" content="2023-01-08T22:31:46.000Z"><meta property="article:modified_time" content="2024-09-22T12:14:47.370Z"><meta property="article:author" content="王九弦SZ·Ninty"><meta property="article:tag" content="站点折腾"><meta property="article:tag" content="页面魔改"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><link rel="shortcut icon" href="/img/icon-dark.png"><link rel="canonical" href="https://blog.sinzmise.top/posts/22945/"><link rel="preconnect"><link rel="preconnect" href="//www.google-analytics.com" crossorigin=""><link rel="preconnect" href="//hm.baidu.com"><link rel="preconnect" href="//static.cloudflareinsights.com"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="preconnect" href="//sdk.51.la"><meta name="baidu-site-verification" content="codeva-NA6uDlCuZg"><meta name="msvalidate.01" content="18428535B4425286753107589FC35E79"><meta name="google-site-verification" content="H2O2-443XGKJh5l1ik9o6ZgFmcBEf9AKSoMRRlNIltQ"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload='this.media="all"'><link rel="manifest" href="/manifest.json"><meta name="msapplication-TileColor" content="var(--anzhiyu-main)"><link rel="mask-icon" href="/img/siteicon/safari-pinned-tab.svg" color="#5bbad5"><link rel="apple-touch-icon" sizes="180x180" href="/img/siteicon/apple-touch-icon.png"><link rel="apple-touch-icon-precomposed" sizes="180x180" href="/img/siteicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/siteicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/siteicon/favicon-16x16.png"><link rel="bookmark" href="/img/siteicon/apple-touch-icon.png"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1290-2796.jpg" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2796-1290.jpg" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1179-2556.jpg" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2556-1179.jpg" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/anzhiyu-theme-static/icon/ali_iconfont_css.min.css"><link rel="stylesheet" href="//at.alicdn.com/t/c/font_4199232_yyljyxsak2m.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.min.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus/lib/assets/font-awesome-animation.min.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload='this.media="all"'><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?59986c9d6715c06178a2b6e2f118f837";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-7MR59SK1DP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-7MR59SK1DP")</script><script defer data-pjax="data-pjax" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;9156db3f439e470d9c3e7bf91a7aa995&quot;}"></script><script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script><script>LA.init({id:"K9WDMA2h2AfDg5GG",ck:"K9WDMA2h2AfDg5GG",autoTrack:!0,hashMode:!0})</script><script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script><script>(new LingQue.Monitor).init({id:"K94JRCDsbHJJSjNs"})</script><script>const GLOBAL_CONFIG={root:"/",algolia:void 0,localSearch:void 0,translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"繁",msgToSimplifiedChinese:"簡"},noticeOutdate:void 0,highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:270},postHeadAiDescription:{enable:!0,gptName:"MagicRing",mode:"tianli",switchBtn:!1,btnLink:"https://afdian.net/item/886a79d4db6711eda42a52540025c377",randomNum:1,basicWordCount:1e3,key:"3782872dfbfe495c1c52",Referer:"https://blog.sinzmise.top/"},date:"2021/12/17 14:53:11",copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:50,languages:{author:"作者: 王九弦SZ·Ninty",link:"链接: ",source:"来源: 星空故事·魔法小屋",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体",cht_to_chs:"你已切换为简体",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#49b1f5",bgDark:"#1f1f1f",position:"top-left"},source:{justifiedGallery:{js:"https://jsd.cdn.storisinz.site/npm/flickr-justified-gallery/dist/fjGallery.min.js",css:"https://jsd.cdn.storisinz.site/npm/flickr-justified-gallery/dist/fjGallery.min.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1,percent:{toc:!0,rightside:!1},player:{key:"661a038c31f2b",mobile:"1"},uiversion:"v1.9.0"},GLOBAL_LANG={fps:{normal1:"非常好",normal2:"很好",laggy1:"卡",laggy2:"难受",laggy3:"电竞级帧率",laggy4:"卡成ppt"},about:{comments:"个评论",introduction:["测试一下","测试",233],comment_error:"错误：评论总数功能无法获取到正确的元素，请检查页面是否正常！",stats:{today_users:"今日人数",today_uv:"今日访问",yesterday_users:"昨日人数",yesterday_uv:"昨日访问",month_uv:"本月访问",recent:"最近访问",years:"已稳定运行 ${q} 年"}}}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"butterfly主题添加音乐页面（适配手机）",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2024-09-22 12:14:47"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script src="https://jsd.cdn.storisinz.site/npm/jquery/dist/jquery.min.js"></script><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const a=864e5*o,n={value:t,expiry:(new Date).getTime()+a};localStorage.setItem(e,JSON.stringify(n))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise(((t,o)=>{const a=document.createElement("script");a.src=e,a.async=!0,a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)})),e.getCSS=e=>new Promise(((t,o)=>{const a=document.createElement("link");a.rel="stylesheet",a.href=e,a.onload=()=>t(),a.onerror=()=>o(),document.head.appendChild(a)})),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme"),o=window.matchMedia("(prefers-color-scheme: dark)").matches,a=window.matchMedia("(prefers-color-scheme: light)").matches,n=window.matchMedia("(prefers-color-scheme: no-preference)").matches,c=!o&&!a&&!n;if(void 0===t){if(a)activateLightMode();else if(o)activateDarkMode();else if(n||c){const e=(new Date).getHours();e<=6||e>=18?activateDarkMode():activateLightMode()}window.matchMedia("(prefers-color-scheme: dark)").addListener((function(e){void 0===saveToLocal.get("theme")&&(e.matches?activateDarkMode():activateLightMode())}))}else"light"===t?activateLightMode():activateDarkMode();const d=saveToLocal.get("aside-status");void 0!==d&&("hide"===d?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/custom2.css"><link rel="stylesheet" href="/css/anzhiyu-var.css"><link rel="stylesheet" href="/css/heo-var.css"><link rel="stylesheet" href="/css/bywind-var.css"><link rel="stylesheet" href="/css/icat-var.css"><link rel="stylesheet" href="https://cdn2.codesign.qq.com/icons/XMx86jzlQw0brz3/latest/iconfont.css"><link rel="stylesheet" href="/css/rightmenu.css"><link rel="stylesheet" href="/css/iconfont.css"><link rel="stylesheet" href="/css/categoryBar.css"><script async src="/js/categoryBar.js"></script><link rel="stylesheet" href="/css/orlike.css"><link rel="stylesheet" href="/css/footer.css"><link rel="stylesheet" href="/css/404.css"><link rel="stylesheet" href="/css/plane.css"><link rel="stylesheet" href="/css/console.css"><style id="settingStyle"></style><style id="css"></style><style id="yjjs"></style><style id="themeColor"></style><script defer src="/sw-dom.js"></script><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="星空故事·魔法小屋" type="application/atom+xml"></head><body><div class="float-box left top"></div><div class="float-box left bottom"></div><div class="float-box right top"></div><div class="float-box right bottom"></div><div id="loading-box" onclick="document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)"><div class="sparks-combo"><div class="spark"></div><div class="spark"></div><div class="spark"></div><div class="spark"></div></div><div class="rainbow"><span></span></div><div class="nyan-cat"><div class="feet"></div><div class="tail"><span></span></div><div class="body"></div><div class="head"></div></div><script src="/js/nyan.js"></script></div><script>const preloader={endLoading:()=>{document.body.style.overflow="auto",document.getElementById("loading-box").classList.add("loaded")},initLoading:()=>{document.body.style.overflow="",document.getElementById("loading-box").classList.remove("loaded")}};window.addEventListener("load",(()=>{preloader.endLoading()})),document.addEventListener("pjax:send",(()=>{preloader.initLoading()})),document.addEventListener("pjax:complete",(()=>{preloader.endLoading()}))</script><link rel="stylesheet" href="/css/pace/big-counter.css"><script src="https://jsd.cdn.storisinz.site/npm/pace-js/pace.min.js"></script><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/avatar.png" onerror='onerror=null,src="/img/friend_404.gif"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">39</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a><a href="/comments/"><div class="headline">评论</div><div class="length-num icat-pe-comment">0</div></a></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-wenzhang"></use></svg> <span>站点</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-a-xiangzishouna"></use></svg> <span>隧道</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-fenlei"></use></svg> <span>分类</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-fenlei-copy"></use></svg> <span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/update/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-gengxin"></use></svg> <span>更新日志</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-youlian"></use></svg> <span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-lianjie"></use></svg> <span>友人帐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-icon_pengyouquan"></use></svg> <span>朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-liuyanban"></use></svg> <span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bbs/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-laba"></use></svg> <span>哔哔广场</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-guanyuwomenicon"></use></svg> <span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-zhifeiji"></use></svg> <span>关于屋主</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-bilibili"></use></svg> <span>屋主追番</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/essay/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-icon-test"></use></svg> <span>闲言碎语</span></a></li><li><a class="site-page child faa-parent animated-hover" href="javascript:toRandomPost()"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-zuji"></use></svg> <span>随便逛逛</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg nav-fixed nav-visible" id="page-header" style="background-image:url('https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp')"><nav id="nav"><span id="blog-info"><a href="/" title="星空故事·魔法小屋"><img class="site-logo" src="/img/icon-dark.png"></a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-wenzhang"></use></svg> <span>站点</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-a-xiangzishouna"></use></svg> <span>隧道</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-fenlei"></use></svg> <span>分类</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-fenlei-copy"></use></svg> <span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/update/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-gengxin"></use></svg> <span>更新日志</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-youlian"></use></svg> <span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-lianjie"></use></svg> <span>友人帐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-icon_pengyouquan"></use></svg> <span>朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-liuyanban"></use></svg> <span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bbs/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-laba"></use></svg> <span>哔哔广场</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-guanyuwomenicon"></use></svg> <span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-zhifeiji"></use></svg> <span>关于屋主</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-bilibili"></use></svg> <span>屋主追番</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/essay/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-icon-test"></use></svg> <span>闲言碎语</span></a></li><li><a class="site-page child faa-parent animated-hover" href="javascript:toRandomPost()"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-zuji"></use></svg> <span>随便逛逛</span></a></li></ul></div></div><center id="name-container"><a id="page-name" href="javascript:rmf.scrollToTop()">PAGE_NAME</a></center></div><div id="nav-right"><div id="travellings"><a class="site-page" target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" title="随机前往一个开往项目网站"><i class="fas fa-train fa-fw"></i></a></div><div id="random"><a class="site-page" href="javascript:toRandomPost()" title="随机前往一个文章"><i class="fas fa-paper-plane fa-fw"></i></a></div><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i></a></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">butterfly主题添加音乐页面（适配手机）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-orlike"><i class="iconfont icon-aixin fa-fw post-meta-icon"></i><span class="post-meta-label">点赞数:</span><a href="/posts/22945/#orlike-box"><span class="orlike-count"></span></a></span><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-01-08T22:31:46.000Z" title="发表于 2023-01-08 22:31:46">2023-01-08</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-09-22T12:14:47.370Z" title="更新于 2024-09-22 12:14:47">2024-09-22</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" data-flag-title="butterfly主题添加音乐页面（适配手机）"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section></header><main class="layout" id="content-inner"><div class="h-entry" id="post"><article class="post-content e-content" id="article-container"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><div class="note info modern"><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="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" alt="msedge_x1MaJIbBQg"><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-09-59-57-499_com.2sej4yl2vuw0.webp" alt="Screenshot_2023-01-09-09-59-57-499_com"><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-10-02-41-554_com.6tcc3lty2uo0.webp" alt="Screenshot_2023-01-09-10-02-41-554_com"><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<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="#教程开始-1">1.0</button></li><li class="tab active"><button type="button" data-href="#教程开始-2">2.0</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="教程开始-1"><p></p><div class="note info modern"><p>这个教程是我基于<a target="_blank" rel="noopener" href="https://www.php.cn/xiazai/js/6169">https://www.php.cn/xiazai/js/6169</a> 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p></div><p></p><p></p><div class="note warning modern"><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="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="教程开始-2"><p><a href="/music/old/">2.0效果预览</a></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug（有搞1.0的话直接把music.pug里面的内容全都替换成下面的内容），内容如下：<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="note info modern"><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="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="orlike-box" id="orlike-box"><script>(()=>{function e(){new OrLike({serverUrl:"https://orlike.blog.sinzmise.top/",el:".orlike-box",days:30})}window.pjax?e():window.addEventListener("load",e)})()</script></div><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h class="p-name">butterfly主题添加音乐页面（适配手机）</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a class="u-url" href="https://blog.sinzmise.top/posts/22945/">https://blog.sinzmise.top/posts/22945/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h class="p-author">王九弦SZ·Ninty</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h class="dt-published">2023-01-08</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h class="dt-updated">2024-09-22</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags p-category" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a><a class="post-meta__tags p-category" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/">页面魔改</a></div><div class="post_share"><div class="social-share" data-image="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://jsd.cdn.storisinz.site/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/38964/"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" onerror='onerror=null,src="/img/404.jpg"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div class="next-post pull-right"><a href="/posts/23021/"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230104/Goodbye2022.21ppwx94kqf4.webp" onerror='onerror=null,src="/img/404.jpg"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">再见2022，你好2023</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/10045/" title="为博客添加一个游戏收藏页（npm插件版）"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240525/fe131d7f5a6b38b23cc967316c13dae2.8dwp7xp4q5.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">为博客添加一个游戏收藏页（npm插件版）</div></div></a></div><div><a href="/posts/38964/" title="小康大佬的说说方案 ———— ispeak搭建教程"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-01-13</div><div class="title">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div><a href="/posts/53662/" title="博客大更新"><img class="cover" src="https://files.blog.sinzmise.top/images/645fa3cf90d70.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-07-05</div><div class="title">博客大更新</div></div></a></div><div><a href="/posts/16107/" title="新起点，新出发"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20221230/46348.3e004dfapae0.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-12-17</div><div class="title">新起点，新出发</div></div></a></div><div><a href="/posts/57692/" title="Ruffle测试"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240525/logo.4913vyk2ki.svg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-05-25</div><div class="title">Ruffle测试</div></div></a></div><div><a href="/posts/28536/" title="自建不蒜子API"><img class="cover" src="https://vip1.loli.io/2022/05/11/eKfrdV9p48IcCj5.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-11</div><div class="title">自建不蒜子API</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div><div id="comment-switch"><span class="first-comment">Twikoo</span><span class="switch-btn"></span><span class="second-comment">Artalk</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div><div><div id="artalk-wrap"></div></div></div><div class="comment-barrage"></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info h-card"><div class="is-center"><div class="avatar-img"><img class="u-photo" src="/img/avatar.png" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="avatar"></div><div class="author-info__name p-name">王九弦SZ·Ninty</div><div class="author-info__description p-note">The Story,The Dream.</div><div class="card-info-data site-data is-center"><div class="card-info-data-item"><a href="/archives/"><i class="headline fas fa-cash-register"></i><div class="length-num">39</div></a></div><div class="card-info-data-item"><a href="/tags/"><i class="headline fas fa-tags"></i><div class="length-num">14</div></a></div><div class="card-info-data-item"><a href="/categories/"><i class="headline fas fa-folder-open"></i><div class="length-num">5</div></a></div><div class="card-info-data-item"><a href="/comments/"><i class="headline fas fa-comment"></i><div class="length-num icat-pc-comment">0</div></a></div></div></div><div class="social-list"><a class="social-icon u-url" href="https://www.sinzmise.top/" target="_blank" title="Home" rel="me"><i class="fas fa-house"></i></a><a class="social-icon u-url" href="https://github.com/SinzMise" target="_blank" title="Github" rel="me"><i class="fab fa-github"></i></a><a class="social-icon u-email" href="mailto:email@sinzmise.top" target="_blank" title="Email" rel="me"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-clock-weather"><div class="item-headline"><i class="pj-historical icon-pjh-shijian"></i><span>时间</span></div><div class="item-content"><canvas id="canvas" style="width:100%" width="100%" height="150"></canvas><script src="/js/clock.js"></script><div id="weather"></div></div></div><div class="card-widget card-clock-kickass"><div class="item-headline"><i class="pj-historical icon-pjh-fasong"></i><span>Kick Ass</span></div><div class="item-content"><img src="https://cdn.jsdmirror.com/npm/pzai-staticr@1.0.2/blog/img/planeBg.png" style="width:100%"><div class="planeOpt"><p>退出：<kbd>esc</kbd></p><p>方向控制： <kbd>←</kbd><kbd>↑</kbd><kbd>→</kbd></p><p>射击：<kbd>Space</kbd></p><p>轰炸：<kbd>B</kbd></p><div style="display:flex;justify-content:center"><button onclick='const s=document.createElement("script");s.type="text/javascript",document.body.appendChild(s),s.src="/js/plane.js"'><div class="svg-wrapper-1"><div class="svg-wrapper"><svg height="20" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z" fill="currentColor"></path></svg></div></div><span>开始游戏</span></button></div></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <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-number">2.</span> <span class="toc-text">教程</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#TO-DO"><span class="toc-number">3.</span> <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="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/15688/" title="2024-08小记"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240901/2024-08.1023w7rffi.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="2024-08小记"></a><div class="content"><a class="title" href="/posts/15688/" title="2024-08小记">2024-08小记</a><time datetime="2024-08-31T11:33:48.000Z" title="发表于 2024-08-31 11:33:48">2024-08-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/46640/" title="真·彩虹猫加载动画"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240802/msedge_CbWmjbcmrr.175al3jem3.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="真·彩虹猫加载动画"></a><div class="content"><a class="title" href="/posts/46640/" title="真·彩虹猫加载动画">真·彩虹猫加载动画</a><time datetime="2024-08-02T17:12:28.000Z" title="发表于 2024-08-02 17:12:28">2024-08-02</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/15799/" title="2024-07小记"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240731/2024-07.8dwrv8pdqe.jpg" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="2024-07小记"></a><div class="content"><a class="title" href="/posts/15799/" title="2024-07小记">2024-07小记</a><time datetime="2024-07-30T22:42:19.000Z" title="发表于 2024-07-30 22:42:19">2024-07-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/64935/" title="2024-06小记"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240705/2024-06.3nrhwc67r0.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="2024-06小记"></a><div class="content"><a class="title" href="/posts/64935/" title="2024-06小记">2024-06小记</a><time datetime="2024-06-28T22:31:59.000Z" title="发表于 2024-06-28 22:31:59">2024-06-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/10021/" title="2024-05小记"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240531/2024-05.13lm5fgrki.webp" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="2024-05小记"></a><div class="content"><a class="title" href="/posts/10021/" title="2024-05小记">2024-05小记</a><time datetime="2024-05-26T21:18:33.000Z" title="发表于 2024-05-26 21:18:33">2024-05-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="footer_custom_text"><section class="footer-wave-svg main-hero-waves-area-footer waves-area" id="jsi-flying-fish-container"><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><div class="footer-content"><div class="footer-content-column"><div class="footer-logo"><a class="footer-logo-link" href="#"><span class="hidden-link-text">LOGO</span><img src="/img/icon-light.png" style="height:40%;width:40%"></a></div><div class="footer-menu"><h2 class="footer-menu-name">开始</h2><ul class="footer-menu-list" id="menu-get-started"><li class="menu-item menu-item-object-product menu-item-type-post_type"><a target="_blank" rel="noopener" href="https://www.sinzmise.top/">个人主页</a></li><li class="menu-item menu-item-object-product menu-item-type-post_type"><a href="/sitemap.xml">站点地图</a></li></ul></div></div><div class="footer-content-column"><div class="footer-menu"><h2 class="footer-menu-name">我加入的</h2><ul class="footer-menu-list" id="menu-company"><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://www.travellings.cn/go.html">开往·友链接力</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://storeweb.cn/s/1707">虫洞·个站商店</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://zhblogs.ohyee.cc/go">中文博客随机跳转</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://travel.moe/go.html">异次元之旅</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs">博客录-随机博客</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://forever.dreamerhe.cn/planet-shuttle">梦境列车 · 时空穿梭</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://blogscn.fun/random.html">笔墨迹·随机访问</a></li></ul></div></div><div class="footer-content-column"><div class="footer-menu"><h2 class="footer-menu-name">联系我</h2><ul class="footer-menu-list" id="menu-company"><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&amp;k=TK1cLmWzuZ-LhACNH8GCntLD6zbo-nUW&amp;authKey=Lym2j6%2BggcPrl77XV1vwVTSM12%2B7O7yMMf02Xi6meCVPEFASHTFX01k%2F1KbFrv1%2B&amp;noverify=0&amp;group_code=623816093">官方Q群</a></li></ul></div></div><div class="footer-content-column"><ul class="footer-menu-list" id="menu-get-started"><li class="menu-item menu-item-object-product menu-item-type-post_type"><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img class="img-not-ai" width="120" height="42" alt="署名-非商业性使用-相同方式共享 4.0 国际" src="https://cdn.gallery.uuanqin.top/img/by-nc-sa.svg"></a></li><li class="menu-item menu-item-object-product menu-item-type-post_type"><a target="_blank" rel="noopener" href="https://blogscn.fun/"><img class="img-not-ai" width="120" height="42" alt="本站已加入BLOGS·CN" src="https://photo.xiangming.site/img/blogscnlogo.png"></a></li><li class="menu-item menu-item-object-product menu-item-type-post_type"><a target="_blank" rel="noopener" href="https://boringbay.com"><img class="img-not-ai" width="120" height="42" alt="无聊湾 🥱 The Boring Bay" src="https://boringbay.com/api/badge/blog.sinzmise.top"></a></li><li class="menu-item menu-item-object-product menu-item-type-post_type">©2024 By 王九弦SZ·Ninty</li></ul></div><div class="footer-social-links"><a class="footer-social-link link1" href="mailto:email@sinzmise.top" target="_self"><span class="hidden-link-text">Email</span><i class="footer-social-icon-svg fa fa-envelope"></i></a><a class="footer-social-link link2" href="https://github.com/SinzMise" target="_blank"><span class="hidden-link-text">Github</span><i class="footer-social-icon-svg fab fa-github"></i></a><a class="footer-social-link link3" href="/atom.xml" target="_self"><span class="hidden-link-text">RSS</span><i class="footer-social-icon-svg fas fa-square-rss"></i></a><a class="footer-social-link link4" href="https://xlog.sinzmise.top/" target="_blank"><span class="hidden-link-text">星空魔法书·Delta</span><i class="footer-social-icon-svg iconfont icon-pjh-icon_riji"></i></a></div></div><div class="footer-copyright"><div class="footer-copyright-wrapper"><p class="footer-copyright-text"><a href="https://hexo.io" rel="noopener external nofollow noreferrer" target="_blank">Hexo v4.9.0</a>&nbsp;|&nbsp;<a href="https://github.com/jerryc127/hexo-theme-butterfly" rel="noopener external nofollow noreferrer" target="_blank">Butterfly v6.3.0</a>&nbsp;|&nbsp;<a href="https://blog.sinzmise.top/update/" rel="noopener external nofollow noreferrer" target="_blank">CetaStories v1.9.0</a></p><p class="footer-copyright-text"><a href="https://icp.gov.moe/?keyword=20231033" target="_blank">萌ICP备20231033号</a>&nbsp;|<a target="_blank" href="https://beian.miit.cn.com/gov/search.php?query=blog.sinzmise.top" title="MIIT备20240818号">MIIT备20240818号</a>&nbsp;|<a target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/" title="官码2024000155号"><img src="https://style.wmou.com/images/guanma.png" alt="官码" width="9">官码2024000155号</a><br><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a>An <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a><br><span>我加入的：</span><a href="https://zhblogs.ohyee.cc/" target="_blank">中文博客列表</a>&nbsp;|<a href="https://storeweb.cn/member/o/1585" target="_blank">个站商店</a>&nbsp;|<a href="https://bf.zzxworld.com/s/995" target="_blank">BlogFinder</a>&nbsp;|<a href="https://sites.link/site-info?siteType=life&amp;siteId=64cb373190e35300a8eec654" target="_blank">站点聚合平台</a>&nbsp;|<a href="https://boke.lu" target="_blank">博客录</a>&nbsp;|<a href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/" target="_blank">RssBlog</a>&nbsp;|<a href="https://blogscn.fun" target="_blank">笔墨迹</a>&nbsp;|<a href="https://forever.dreamerhe.cn/" target="_blank">梦境列车</a>&nbsp;|<a href="https://firewood.news/" target="_blank">积薪</a>&nbsp;|<a href="https://daohang.lusongsong.com/" target="_blank">博客大全</a>&nbsp;|</p></div></div></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅深转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><a href="javascript:toggleWinbox();"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button></a><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@docsearch/css/dist/style.min.css"><script src="https://jsd.cdn.storisinz.site/npm/@docsearch/js/dist/umd/index.min.js"></script><script>(()=>{docsearch(Object.assign({appId:"QAS05YI2PH",apiKey:"67ffd4c9fa1234148ec4f8b27dfdb2a7",indexName:"sinzmise",container:"#docsearch"},null));const e=()=>{document.querySelector(".DocSearch-Button").click()},c=()=>{document.querySelector("#search-button > .search").addEventListener("click",e)};c(),window.addEventListener("pjax:complete",c)})()</script></div><div class="js-pjax" id="settingWindow"><span class="setting-title"><button id="backer" onclick='$(".asetting").hide(),$(".settingx").show(),$("#backer").hide(),$("#stt-style").hide(),$("#stt-font").hide(),$("#stt-background").hide(),$("#stt-count").hide(),$("#stt-about").hide()'><i class="fa fa-chevron-left"></i></button><span id="stt">设置</span> <span id="stt-style">-&gt; 站点</span> <span id="stt-font">-&gt; 字体</span> <span id="stt-background">-&gt; 背景</span> <span id="stt-count">-&gt; 统计</span> <span id="stt-about">-&gt; 关于</span><a id="close-console" onclick="toggleWinbox()">×</a></span><div class="settings"><div id="setting-buttons"><button class="settingx" onclick='$("#theme-settings").show(),$(".settingx").hide(),$("#backer").show(),$("#stt-style").show()'><i class="fas fa-layer-group"></i><span>站点</span></button><button class="settingx" onclick='$("#font-settings").show(),$(".settingx").hide(),$("#backer").show(),$("#stt-font").show()'><i class="fa fa-font"></i><span>字体</span></button><button class="settingx" onclick='$("#background-settings").show(),$(".settingx").hide(),$("#backer").show(),$("#stt-background").show()'><i class="far fa-image"></i><span>背景</span></button><button class="settingx" onclick="$('#con-echarts').show();$('.settingx').hide();$('#backer').show();$('#stt-count').show();var evt = document.createEvent(&quot;HTMLEvents&quot;);evt.initEvent(&quot;resize&quot;, false, false);window.dispatchEvent(evt);"><i class="fas fa-chart-pie"></i><span>统计</span></button><button class="settingx" onclick='$("#con-abouts").show(),$(".settingx").hide(),$("#backer").show(),$("#stt-about").show()'><i class="fa fa-cloud-download"></i><span>关于</span></button></div><div id="setting-hides"><div class="asetting" id="theme-settings"><h2 class="content-head">站点</h2><p></p><div class="content" style="display:flex"><input id="blur" type="checkbox" onclick="setBlur()"><div class="content-text">启用模糊效果</div></div><div class="content" style="display:flex"><input id="fpson" type="checkbox" onclick="fpssw()" style="flex-shrink:0"><div class="content-text"><span>开启帧率检测 （<a href="javascript:window.location.reload()">刷新</a>后生效）</span></div></div><p></p><p></p><h2 class="content-head">主题</h2><div class="content" style="display:flex"><input id="hideAplayer" type="checkbox" onclick="toggleAplayer()"><div class="content-text"><span>音乐播放器</span></div></div><div class="content" style="display:flex"><input id="hideSakura" type="checkbox" onclick="toggleSakuras()"><div class="content-text">落樱特效</div></div><div class="content" style="display:flex"><input id="autoTheme" type="checkbox" onclick="toggleAutoTheme()"><div class="content-text">明暗模式自动切换</div></div><p></p><p></p><h3 class="content-head">主题色</h3><div class="content" id="themeColorSettings" style="display:flex"><input id="default" type="radio" name="colors" onclick='setColor("default")' checked><span id="deftext">默认</span><input id="red" type="radio" name="colors" onclick='setColor("red")'><input id="orange" type="radio" name="colors" onclick='setColor("orange")'><input id="yellow" type="radio" name="colors" onclick='setColor("yellow")'><input id="green" type="radio" name="colors" onclick='setColor("green")'><input id="blue" type="radio" name="colors" onclick='setColor("blue")'><input id="heoblue" type="radio" name="colors" onclick='setColor("heoblue")'><input id="darkblue" type="radio" name="colors" onclick='setColor("darkblue")'><input id="purple" type="radio" name="colors" onclick='setColor("purple")'><input id="pink" type="radio" name="colors" onclick='setColor("pink")'><input id="black" type="radio" name="colors" onclick='setColor("black")'><input id="blackgray" type="radio" name="colors" onclick='setColor("blackgray")'></div><p></p></div><div class="asetting" id="font-settings"><h2 class="content-head">字体</h2><p id="swfs"><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:HYTMR!important;color:#000" onclick='setFont("HYTMR")'>汉仪唐美人</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:HYPailou!important;color:#000" onclick='setFont("HYPailou")'>汉仪新蒂牌楼</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:FZXJLJ!important;color:#000" onclick='setFont("FZXJLJ")'>方正金陵体</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:FZXS!important;color:#000" onclick='setFont("FZXS")'>方正像素体</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:ZhuZiAWan!important;color:#000" onclick='setFont("ZhuZiAWan")'>筑紫A丸ゴシック</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:FZODZK!important;color:#000" onclick='setFont("FZODZK")'>方正欧蝶正楷</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:'Source Serif'!important;color:#000" onclick='setFont("Source Serif")'>思源宋体</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:'Source Sans'!important;color:#000" onclick='setFont("Source Sans")'>思源黑体</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:HMOSANS!important;color:#000" onclick='setFont("HMOSANS")'>HarmonyOS Sans</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:-apple-system,IBM Plex Mono,monosapce,'微软雅黑',sans-serif" onclick='setFont("main")'>系统默认</a><br></p></div><div class="asetting" id="background-settings"><h2 style="margin-left:10px">背景</h2><div></div><button class="content-button" onclick='localStorage.removeItem("blogbg"),location.reload()'><i class="fa-solid fa-arrows-rotate"></i><span>恢复默认背景</span></button><div class="bg-mobi"><h3>BA图片</h3><div class="bgbox"><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/01.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/01.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/02.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/02.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/03.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/03.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/04.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/04.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/05.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/05.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/06.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/06.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/07.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/07.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/08.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/08.webp)")'></a></div></div><div class="bg-pc"><h3>BA图片</h3><div class="bgbox"><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/20.ibw8bgqp8.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/20.ibw8bgqp8.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/19.7p2f61ijp.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/19.7p2f61ijp.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/18.839tcinjtm.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/18.839tcinjtm.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/17.5q76vb9qmr.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/17.5q76vb9qmr.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/16.2doh0xt6a1.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/16.2doh0xt6a1.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/15.pf43r2w3d.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/15.pf43r2w3d.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/14.7i05q7t3hn.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/14.7i05q7t3hn.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/13.3uum2oxazj.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/13.3uum2oxazj.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/12.7p3dlnf8wi.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/12.7p3dlnf8wi.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/11.4g49ozrrhv.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/11.4g49ozrrhv.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/10.54xj90fai0.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/10.54xj90fai0.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/09.2veipiuk0n.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/09.2veipiuk0n.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/08.9rj69pdu4s.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/08.9rj69pdu4s.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/07.4qr3i56zll.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/07.4qr3i56zll.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/06.86tfa8gmnm.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/06.86tfa8gmnm.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/05.esaalno2u.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/05.esaalno2u.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/04.8ojgyti07r.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/04.8ojgyti07r.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/03.5tqst12tfi.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/03.5tqst12tfi.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/02.pf43r2w6h.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/02.pf43r2w6h.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/01.73tpzcksoy.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/01.73tpzcksoy.webp"></a></div></div><div class="bg-mobi"><h3>其它图片</h3><div class="bgbox"><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d4d539a5.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d4d539a5.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d4e15c9d.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d4e15c9d.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6f22c03c6.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6f22c03c6.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d56c83eb.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d56c83eb.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d50b439b.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d50b439b.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d5574d0e.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d5574d0e.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d529adf9.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d529adf9.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d5159b31.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d5159b31.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d718bbeef6.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d718bbeef6.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d72f237d19.jpg)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72f237d19.jpg)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d72f2032c8.jpg)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72f2032c8.jpg)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2021/12/01/7792ff0082ec4.jpg)" onclick='changeBg("url(https://bu.dusays.com/2021/12/01/7792ff0082ec4.jpg)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d72ee6d4f3.png)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72ee6d4f3.png)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d72ed76532.jpg)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72ed76532.jpg)")'></a></div></div><div class="bg-pc"><h3>其它图片</h3><div class="bgbox"><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d5574d0e.webp)")'><img src="https://bu.dusays.com/2022/08/30/630d6d5574d0e.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d529adf9.webp)")'><img src="https://bu.dusays.com/2022/08/30/630d6d529adf9.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d5159b31.webp)")'><img src="https://bu.dusays.com/2022/08/30/630d6d5159b31.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d718bbeef6.webp)")'><img src="https://bu.dusays.com/2022/08/30/630d718bbeef6.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72f237d19.jpg)")'><img src="https://bu.dusays.com/2022/08/30/630d72f237d19.jpg"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72f2032c8.jpg)")'><img src="https://bu.dusays.com/2022/08/30/630d72f2032c8.jpg"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2021/12/01/7792ff0082ec4.jpg)")'><img src="https://bu.dusays.com/2021/12/01/7792ff0082ec4.jpg"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72ee6d4f3.png)")'><img src="https://bu.dusays.com/2022/08/30/630d72ee6d4f3.png"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72ed76532.jpg)")'><img src="https://bu.dusays.com/2022/08/30/630d72ed76532.jpg"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/1.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/1.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/2.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/2.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/3.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/3.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/4.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/4.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/5.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/5.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/6.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/6.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/7.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/7.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/8.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/8.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/9.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/9.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/10.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/10.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/11.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/11.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/12.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/12.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/13.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/13.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/14.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/14.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/15.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/15.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/16.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/16.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/17.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/17.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/18.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/18.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/19.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/19.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/20.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/20.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/21.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/21.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/22.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/22.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/23.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/23.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/24.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/24.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/25.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/25.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/26.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/26.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/27.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/27.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/28.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/28.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/29.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/29.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/30.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/30.webp"></a></div></div><div class="bg"><h3>渐变色</h3><div class="bgbox"><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#eecda3,#ef629f)" onclick="changeBg(linear-gradient(to right, #eecda3, #ef629f))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#b7d31e,#42ce1e)" onclick="changeBg(linear-gradient(to right, #B7D31E, #42CE1E))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#06de86,#06a5de)" onclick="changeBg(linear-gradient(to right, #06DE86, #06A5DE))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#189bc4,#183dc4)" onclick="changeBg(linear-gradient(to right, #189BC4, #183DC4))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#c018c4,#c41818)" onclick="changeBg(linear-gradient(to right, #C018C4, #C41818))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#8b00bb,#030094)" onclick="changeBg(linear-gradient(to right, #8B00BB, #030094))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#eecda3,#ef629f)" onclick="changeBg(linear-gradient(to right, #eecda3, #ef629f))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(90deg,#ffd7e4 0,#c8f1ff 100%)" onclick="changeBg(linear-gradient(90deg, #ffd7e4 0%, #c8f1ff 100%))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(45deg,#e5737b,#c6999e,#96b9c2,#00d6e8)" onclick="changeBg(linear-gradient(45deg, #e5737b, #c6999e, #96b9c2, #00d6e8))"></a></div></div><div class="bg"><h3>纯色</h3><div class="bgbox"><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#7d9d9c" onclick="changeBg(#7D9D9C)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#fff" onclick="changeBg(#fff)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#49a6e9" onclick="changeBg(#49A6E9)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#f7ceff" onclick="changeBg(#F7CEFF)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#ffffce" onclick="changeBg(#FFFFCE)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#cfffce" onclick="changeBg(#CFFFCE)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#17efe9" onclick="changeBg(#17EFE9)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#9f17ef" onclick="changeBg(#9F17EF)"></a></div></div></div><div class="asetting" id="con-echarts"><h1>统计</h1><img src="https://moe.counter.blog.sinzmise.top/sznhouse?theme=asoul"><h2>文章统计</h2><div id="posts-chart" data-start="2021-01" style="border-radius:8px;height:300px;padding:10px"></div><script id="postsChart">var color="light"===document.documentElement.getAttribute("data-theme")?"#4c4948":"rgba(255,255,255,0.7)",postsChart=echarts.init(document.getElementById("posts-chart"),"light"),postsOption={title:{text:"文章发布统计图",x:"center",textStyle:{color:color}},tooltip:{trigger:"axis"},xAxis:{name:"日期",type:"category",boundaryGap:!1,nameTextStyle:{color:color},axisTick:{show:!1},axisLabel:{show:!0,color:color},axisLine:{show:!0,lineStyle:{color:color}},data:["2021-01","2021-02","2021-03","2021-04","2021-05","2021-06","2021-07","2021-08","2021-09","2021-10","2021-11","2021-12","2022-01","2022-02","2022-03","2022-04","2022-05","2022-06","2022-07","2022-08","2022-09","2022-10","2022-11","2022-12","2023-01","2023-02","2023-03","2023-04","2023-05","2023-06","2023-07","2023-08","2023-09","2023-10","2023-11","2023-12","2024-01","2024-02","2024-03","2024-04","2024-05","2024-06","2024-07","2024-08","2024-09"]},yAxis:{name:"文章篇数",type:"value",nameTextStyle:{color:color},splitLine:{show:!1},axisTick:{show:!1},axisLabel:{show:!0,color:color},axisLine:{show:!0,lineStyle:{color:color}}},series:[{name:"文章篇数",type:"line",smooth:!0,lineStyle:{width:0},showSymbol:!1,itemStyle:{opacity:1,color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(128, 255, 165)"},{offset:1,color:"rgba(1, 191, 236)"}])},areaStyle:{opacity:1,color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(128, 255, 165)"},{offset:1,color:"rgba(1, 191, 236)"}])},data:[0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,3,1,3,2,0,0,5,3,1,1,1,1,4,1,1,3,3,1,1,2,0],markLine:{data:[{name:"平均值",type:"average",label:{color:color}}]}}]};postsChart.setOption(postsOption),window.addEventListener("resize",(()=>{postsChart.resize()})),postsChart.on("click","series",(e=>{"series"===e.componentType&&(window.location.href="/archives/"+e.name.replace("-","/"))}))</script><div id="tags-chart" data-length="10" style="border-radius:8px;height:300px;padding:10px"></div><script id="tagsChart">var color="light"===document.documentElement.getAttribute("data-theme")?"#4c4948":"rgba(255,255,255,0.7)",tagsChart=echarts.init(document.getElementById("tags-chart"),"light"),tagsOption={title:{text:"Top 10 标签统计图",x:"center",textStyle:{color:color}},tooltip:{},xAxis:{name:"标签",type:"category",nameTextStyle:{color:color},axisTick:{show:!1},axisLabel:{show:!0,color:color,interval:0},axisLine:{show:!0,lineStyle:{color:color}},data:["个人小记","站点折腾","自建部署","游戏相关","其它游戏","页面魔改","项目折腾","Windows软件","加载动画","歌曲收集"]},yAxis:{name:"文章篇数",type:"value",splitLine:{show:!1},nameTextStyle:{color:color},axisTick:{show:!1},axisLabel:{show:!0,color:color},axisLine:{show:!0,lineStyle:{color:color}}},series:[{name:"文章篇数",type:"bar",data:[{name:"个人小记",value:17,path:"tags/个人小记/"},{name:"站点折腾",value:14,path:"tags/站点折腾/"},{name:"自建部署",value:5,path:"tags/自建部署/"},{name:"游戏相关",value:4,path:"tags/游戏相关/"},{name:"其它游戏",value:3,path:"tags/其它游戏/"},{name:"页面魔改",value:3,path:"tags/页面魔改/"},{name:"项目折腾",value:3,path:"tags/项目折腾/"},{name:"Windows软件",value:2,path:"tags/Windows软件/"},{name:"加载动画",value:1,path:"tags/加载动画/"},{name:"歌曲收集",value:1,path:"tags/歌曲收集/"},{name:"站点底部魔改",value:1,path:"tags/站点底部魔改/"},{name:"Flash相关",value:1,path:"tags/Flash相关/"},{name:"Steam游戏",value:1,path:"tags/Steam游戏/"},{name:"悬浮宠物/看板娘",value:1,path:"tags/悬浮宠物-看板娘/"}],itemStyle:{borderRadius:[5,5,0,0],color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(128, 255, 165)"},{offset:1,color:"rgba(1, 191, 236)"}])},emphasis:{itemStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(128, 255, 195)"},{offset:1,color:"rgba(1, 211, 255)"}])}},markLine:{data:[{name:"平均值",type:"average",label:{color:color}}]}}]};tagsChart.setOption(tagsOption),window.addEventListener("resize",(()=>{tagsChart.resize()})),tagsChart.on("click","series",(a=>{a.data.path&&(window.location.href="/"+a.data.path)}))</script><div id="categories-chart" data-parent="true" style="border-radius:8px;height:300px;padding:10px"></div><script id="categoriesChart">var color="light"===document.documentElement.getAttribute("data-theme")?"#4c4948":"rgba(255,255,255,0.7)",categoriesChart=echarts.init(document.getElementById("categories-chart"),"light"),categoryParentFlag=!1,categoriesOption={title:{text:"文章分类统计图",x:"center",textStyle:{color:color}},legend:{top:"bottom",data:["个人小记","站点折腾","游戏相关","项目折腾","歌曲收集"],textStyle:{color:color}},tooltip:{trigger:"item"},series:[]};categoriesOption.series.push(categoryParentFlag?{nodeClick:!1,name:"文章篇数",type:"sunburst",radius:["15%","90%"],center:["50%","55%"],sort:"desc",data:[{name:"个人小记",value:17,path:"categories/个人小记/",id:"cm1djkj8e0004mooz2rz1hckx",parentId:"0"},{name:"站点折腾",value:14,path:"categories/站点折腾/",id:"cm1djkj8w001mmooz9fo2hy5u",parentId:"0"},{name:"游戏相关",value:4,path:"categories/游戏相关/",id:"cm1djkj8q000zmooz6jcv4dgn",parentId:"0"},{name:"项目折腾",value:3,path:"categories/项目折腾/",id:"cm1djkj8t001cmooz9ci5enne",parentId:"0"},{name:"歌曲收集",value:1,path:"categories/歌曲收集/",id:"cm1djkj9b003amooz7kzt29gm",parentId:"0"}],itemStyle:{borderColor:"#fff",borderWidth:2,emphasis:{focus:"ancestor",shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(255, 255, 255, 0.5)"}}}:{name:"文章篇数",type:"pie",radius:[30,80],roseType:"area",label:{color:color,formatter:"{b} : {c} ({d}%)"},data:[{name:"个人小记",value:17,path:"categories/个人小记/",id:"cm1djkj8e0004mooz2rz1hckx",parentId:"0"},{name:"站点折腾",value:14,path:"categories/站点折腾/",id:"cm1djkj8w001mmooz9fo2hy5u",parentId:"0"},{name:"游戏相关",value:4,path:"categories/游戏相关/",id:"cm1djkj8q000zmooz6jcv4dgn",parentId:"0"},{name:"项目折腾",value:3,path:"categories/项目折腾/",id:"cm1djkj8t001cmooz9ci5enne",parentId:"0"},{name:"歌曲收集",value:1,path:"categories/歌曲收集/",id:"cm1djkj9b003amooz7kzt29gm",parentId:"0"}],itemStyle:{emphasis:{shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(255, 255, 255, 0.5)"}}}),categoriesChart.setOption(categoriesOption),window.addEventListener("resize",(()=>{categoriesChart.resize()})),categoriesChart.on("click","series",(e=>{e.data.path&&(window.location.href="/"+e.data.path)}))</script><h2>访问统计 显示不出来请刷新页面</h2><p>站点访问量:<span id="qexo-site-pv"></span></p><p>站点访客数:<span id="qexo-site-uv"></span></p><script>loadStatistic("https://houtai.hexo.sinzmise.top")</script></div><div class="asetting" id="con-abouts"><h1>关于</h1>基于 Ariasaka Console v1.0 魔改，目前功能尚未完善<br>欢迎<a href="/comments">反馈！</a></div></div></div><div class="app-refresh" id="app-refresh-setting" style="display:none"><div class="app-refresh-wrap"><label>检测到魔法屋已装修</label><a href="javascript:void(0)" onclick="location.reload(!0)"><span style="text-decoration:underline;cursor:pointer;float:right">点我查看</span></a></div></div><div id="setting-sidesl"><button class="reSettings con-rightside" title="恢复默认设置"><i class="fa fa-repeat"></i></button><div id="setting-sides"><button class="con-rightside" title="繁简转换" id="con-translate" onclick="rmf.translate()"><i class="iconfont icon-fanti"></i></button><button class="con-rightside" title="昼夜切换" id="con-mode" onclick="switchDarkMode()"><i class="fa fa-adjust"></i></button><button class="con-rightside" title="阅读模式" id="con-reading" onclick="rmf.switchReadMode()"><i class="fa fa-book-open"></i></button><button class="con-rightside" title="单双栏切换" id="con-toggleaside" onclick="toggleAside()"><i class="fas fa-arrows-alt-h"></i></button><button class="con-rightside" title="左右栏切换" id="con-toggleleftaside" onclick="switchAside()"><i class="fas fa-binoculars"></i></button><button class="con-rightside" title="全屏" id="con-fullscreen" onclick="fullScreen()"><i class="fas fa-expand"></i></button></div></div></div><div class="js-pjax" id="rightMenu"><div class="rightMenu-group rightMenu-small"><a class="rightMenu-item" href="javascript:window.history.back();"><i class="fa fa-arrow-left"></i></a><a class="rightMenu-item" href="javascript:window.history.forward();"><i class="fa fa-arrow-right"></i></a><a class="rightMenu-item" href="javascript:window.location.reload();"><i class="fa fa-refresh"></i></a><a class="rightMenu-item" href="javascript:rmf.scrollToTop();"><i class="fa fa-arrow-up"></i></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-text"><a class="rightMenu-item" href="javascript:rmf.copySelect();"><i class="fa fa-copy"></i><span>复制</span></a><a class="rightMenu-item" href="javascript:window.open(&quot;https://www.bing.com/?q=&quot;+window.getSelection().toString());window.location.reload();"><i class="iconfont pj-historical icon-pjh-bing"></i><span>必应搜索</span></a><a class="rightMenu-item" href="javascript:rmf.searchinThisPage();"><i class="fas fa-search"></i><span>站内搜索</span></a><a class="rightMenu-item" href="#post-comment" onclick="rmf.yinyong()"><i class="fa-solid fa-message"></i><span>引用文本评论</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-too"><a class="rightMenu-item" href="javascript:window.open(window.getSelection().toString());window.location.reload();"><i class="fa fa-link"></i><span>转到链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-paste"><a class="rightMenu-item" href="javascript:rmf.paste()"><i class="fa fa-copy"></i><span>粘贴</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-post"><a class="rightMenu-item" href="#post-comment"><i class="fas fa-comment"></i><span>转到评论</span></a><a class="rightMenu-item" href="javascript:rmf.copyWordsLink()"><i class="fa fa-link"></i><span>复制本文地址</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-to"><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>新窗口打开</span></a><a class="rightMenu-item" id="menu-too" href="javascript:rmf.open()"><i class="fa fa-link"></i><span>转到链接</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-img"><a class="rightMenu-item" href="javascript:rmf.saveAs()"><i class="fa fa-download"></i><span>保存图片</span></a><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>新窗口打开</span></a><a class="rightMenu-item" href="javascript:rmf.click()"><i class="fa fa-arrows-alt"></i><span>全屏显示</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制图片链接</span></a></div><div class="rightMenu-group rightMenu-line"><a class="rightMenu-item" href="javascript:toRandomPost()"><i class="fa fa-paper-plane"></i><span>随便逛逛</span></a><a class="rightMenu-item" href="javascript:rmf.switchDarkMode();"><i class="fa fa-moon"></i><span>浅深转换</span></a><a class="rightMenu-item" href="javascript:rmf.translate();"><i class="iconfont icon-fanti"></i><span>简繁转换</span></a><a class="rightMenu-item" href="javascript:toggleWinbox();"><i class="fas fa-cog"></i><span>设置</span></a><a class="rightMenu-item" href="javascript:fullScreen();"><i class="fas fa-expand"></i><span>全屏显示</span></a></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script async src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus/lib/assets/carousel-touch.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/echarts/dist/echarts.min.js"></script><script src="/js/tw_cn.js"></script><script src="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script async src="//at.alicdn.com/t/c/font_4199232_yyljyxsak2m.js"></script><script async src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus/lib/assets/issues.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"><script>(()=>{const t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://tk.pl.blog.sinzmise.top/",region:"",onCommentLoaded:()=>{btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null)),GLOBAL_CONFIG_SITE.isPost&&(()=>{const t=document.getElementById("twikoo-count");t&&twikoo.getCommentsCount({envId:"https://tk.pl.blog.sinzmise.top/",region:"",urls:[window.location.pathname],includeReply:!1}).then((o=>{t.textContent=o[0].count})).catch((t=>{console.error(t)}))})()},o=()=>{"object"==typeof twikoo?setTimeout(t,0):getScript("https://jsd.cdn.storisinz.site/npm/twikoo/dist/twikoo.all.min.js").then(t)};btf.loadComment(document.getElementById("twikoo-wrap"),o)})()</script><script>function loadArtalk(){function t(){window.artalkItem=Artalk.init(Object.assign({el:"#artalk-wrap",server:"https://atk.pl.blog.sinzmise.top/",site:"星空故事·魔法小屋",pageKey:location.pathname,darkMode:"auto",countEl:".artalk-count"},null))}"object"==typeof window.artalkItem?setTimeout((()=>{t()}),200):(getCSS("https://jsd.cdn.storisinz.site/npm/artalk/dist/Artalk.min.css"),"function"!=typeof Artalk?getScript("https://jsd.cdn.storisinz.site/npm/artalk/dist/Artalk.min.js").then(t):setTimeout((()=>{t()}),200))}document.getElementById("darkmode").addEventListener("click",(()=>{if("object"!=typeof window.artalkItem)return;let t="dark"===document.documentElement.getAttribute("data-theme");window.artalkItem.setDarkMode(!t)}));{function loadOtherComment(){loadArtalk()}}</script></div><script src="https://jsd.cdn.storisinz.site/npm/@ruffle-rs/ruffle"></script><script src="https://jsd.cdn.storisinz.site/gh/swfobject/swfobject@master/swfobject/swfobject.js"></script><script src="/js/welcome.js"></script><script data-pjax="" defer src="/js/custom/fixed_card_widget.js"></script><script src="/js/lunar.js"></script><script src="/js/day.js"></script><script src="https://jsd.cdn.storisinz.site/npm/sweetalert2@8.19.0/dist/sweetalert2.all.js"></script><script src="/js/autoload.js"></script><script src="/js/fps.js"></script><script src="/js/randompost.js"></script><script data-pjax="" defer src="/js/custom.js"></script><script data-pjax="" async src="/js/waterfall/waterfall.js"></script><script src="/js/about.js"></script><script src="/js/owobig.js"></script><div id="fps"></div><script defer src="/js/orlike.js"></script><script src="/js/nav.js"></script><script src="/js/console.js"></script><script src="https://jsd.cdn.storisinz.site/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script><script src="/js/rightmenu.js"></script><script async src="https://umami.status.sinzmise.top/a8f9c04189c7d6a2b6b03f4f3948ef41" data-website-id="f18a2137-2dfe-45b9-a524-21413e09bd68"></script><script async src="/js/comments.js"></script><script src="/bbs/bbs.js"></script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/aplayer/dist/APlayer.min.css" media="print" onload='this.media="all"'><script src="https://jsd.cdn.storisinz.site/npm/aplayer/dist/APlayer.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show","#fixedcard-dashboard",".js-pjax"];var pjax=new Pjax({elements:'a:not([target="_blank"]):not([href="/bbs/"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!0,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(window.tocScrollFn&&window.removeEventListener("scroll",window.tocScrollFn),window.scrollCollect&&window.removeEventListener("scroll",scrollCollect),document.getElementById("rightside").style.cssText="opacity: ''; transform: ''",window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),"object"==typeof disqusjs&&disqusjs.destroy()})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax], .pjax-reload script").forEach((e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof chatBtnFn&&chatBtnFn(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","G-7MR59SK1DP",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><div class="pjax-reload"></div><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><div class="app-refresh" id="app-refresh" style="position:fixed;top:-2.2rem;left:0;right:0;z-index:99999;padding:0 1rem;font-size:15px;height:2.2rem;transition:all .3s ease"><div class="app-refresh-wrap" style="display:flex;color:#fff;height:100%;align-items:center;justify-content:center"><label>✨ 星空魔法屋站点已更新！ 👉</label><a href="javascript:void(0)" onclick="location.reload(!0)"><span style="color:#fff;text-decoration:underline;cursor:pointer">⭐点我刷新⭐</span></a></div></div><script>function showNotification(){if(GLOBAL_CONFIG.Snackbar){var e="light"===document.documentElement.getAttribute("data-theme")?GLOBAL_CONFIG.Snackbar.bgLight:GLOBAL_CONFIG.Snackbar.bgDark,t=GLOBAL_CONFIG.Snackbar.position;Snackbar.show({text:"✨ 星空魔法屋又装修了 👉",backgroundColor:e,duration:5e5,pos:t,actionText:"⭐点我查看⭐",actionTextColor:"#fff",onActionClick:function(e){location.reload(!0)}}),document.getElementById("app-refresh-setting").style.display="block"}else{var o=`top: 0; background: ${"light"===document.documentElement.getAttribute("data-theme")?"#49b1f5":"#1f1f1f"};`;document.getElementById("app-refresh").style.cssText=o}}"serviceWorker"in navigator&&(navigator.serviceWorker.controller&&navigator.serviceWorker.addEventListener("controllerchange",(function(){showNotification()})),window.addEventListener("load",(function(){navigator.serviceWorker.register("/sw.js")})))</script><script async data-pjax="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="fixedcard-dashboard"><button class="fixedcard-activebtn" type="button" title="用户信息" onclick="FixedCardWidget(&quot;class&quot;,&quot;card-info&quot;,&quot;0&quot;)"><i class="fas fa-address-book"></i></button><button class="fixedcard-activebtn" type="button" title="电子钟" onclick="FixedCardWidget(&quot;class&quot;,&quot;card-clock-weather&quot;,&quot;0&quot;)"><i class="fas fa-cloud-sun"></i></button><button class="fixedcard-activebtn" type="button" title="最新文章" onclick="FixedCardWidget(&quot;class&quot;,&quot;card-recent-post&quot;,&quot;0&quot;)"><i class="fas fa-history"></i></button><div class="fixedcard-user-avatar fixedcard-activebtn" onclick="RemoveFixedCardWidget()"><img class="fixedcard-user-avatar-img" src="/img/avatar.png" title="王九弦SZ·Ninty"></div></div></div></body></html>
1
+ <!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><script>(()=>{let r=navigator.serviceWorker,e=()=>console.error("Service Worker 注册失败！可能是由于您的浏览器不支持该功能！");r?.register("/sw.js")?.catch(e)||e()})()</script><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>butterfly主题添加音乐页面（适配手机） | 星空故事·魔法小屋</title><meta name="author" content="王九弦SZ·Ninty"><meta name="copyright" content="王九弦SZ·Ninty"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><script src="/js/statistic.js"></script><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="webmention" href="https://webmention.io/blog.sinzmise.top/webmention"><meta name="description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:type" content="article"><meta property="og:title" content="butterfly主题添加音乐页面（适配手机）"><meta property="og:url" content="https://blog.sinzmise.top/posts/22945/"><meta property="og:site_name" content="星空故事·魔法小屋"><meta property="og:description" content="原先的音乐页面存在BUG：手机访问会错乱，所以我重新找了个音乐播放器源码"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><meta property="article:published_time" content="2023-01-08T22:31:46.000Z"><meta property="article:modified_time" content="2024-10-03T02:22:00.463Z"><meta property="article:author" content="王九弦SZ·Ninty"><meta property="article:tag" content="站点折腾"><meta property="article:tag" content="页面魔改"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"><link rel="shortcut icon" href="/img/icon-dark.png"><link rel="canonical" href="https://blog.sinzmise.top/posts/22945/"><link rel="preconnect"><link rel="preconnect" href="//www.google-analytics.com" crossorigin=""><link rel="preconnect" href="//hm.baidu.com"><link rel="preconnect" href="//static.cloudflareinsights.com"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="preconnect" href="//sdk.51.la"><meta name="baidu-site-verification" content="codeva-NA6uDlCuZg"><meta name="msvalidate.01" content="18428535B4425286753107589FC35E79"><meta name="google-site-verification" content="H2O2-443XGKJh5l1ik9o6ZgFmcBEf9AKSoMRRlNIltQ"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload='this.media="all"'><link rel="manifest" href="/manifest.json"><meta name="msapplication-TileColor" content="var(--anzhiyu-main)"><link rel="mask-icon" href="/img/siteicon/safari-pinned-tab.svg" color="#5bbad5"><link rel="apple-touch-icon" sizes="180x180" href="/img/siteicon/apple-touch-icon.png"><link rel="apple-touch-icon-precomposed" sizes="180x180" href="/img/siteicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/siteicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/siteicon/favicon-16x16.png"><link rel="bookmark" href="/img/siteicon/apple-touch-icon.png"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1290-2796.jpg" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2796-1290.jpg" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1179-2556.jpg" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2556-1179.jpg" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link rel="apple-touch-startup-image" href="/img/siteicon/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/anzhiyu-theme-static/icon/ali_iconfont_css.min.css"><link rel="stylesheet" href="//at.alicdn.com/t/c/font_4199232_yyljyxsak2m.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.min.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus/lib/assets/font-awesome-animation.min.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload='this.media="all"'><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?59986c9d6715c06178a2b6e2f118f837";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-7MR59SK1DP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-7MR59SK1DP")</script><script defer data-pjax="data-pjax" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;9156db3f439e470d9c3e7bf91a7aa995&quot;}"></script><script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script><script>LA.init({id:"K9WDMA2h2AfDg5GG",ck:"K9WDMA2h2AfDg5GG",autoTrack:!0,hashMode:!0})</script><script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script><script>(new LingQue.Monitor).init({id:"K94JRCDsbHJJSjNs"})</script><script>const GLOBAL_CONFIG={root:"/",algolia:void 0,localSearch:void 0,translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"繁",msgToSimplifiedChinese:"簡"},noticeOutdate:void 0,highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:270},postHeadAiDescription:{enable:!0,gptName:"MagicRing",mode:"tianli",switchBtn:!1,btnLink:"https://afdian.net/item/886a79d4db6711eda42a52540025c377",randomNum:1,basicWordCount:1e3,key:"3782872dfbfe495c1c52",Referer:"https://blog.sinzmise.top/"},date:"2021/12/17 14:53:11",copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:50,languages:{author:"作者: 王九弦SZ·Ninty",link:"链接: ",source:"来源: 星空故事·魔法小屋",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体",cht_to_chs:"你已切换为简体",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#49b1f5",bgDark:"#1f1f1f",position:"top-left"},source:{justifiedGallery:{js:"https://jsd.cdn.storisinz.site/npm/flickr-justified-gallery/dist/fjGallery.min.js",css:"https://jsd.cdn.storisinz.site/npm/flickr-justified-gallery/dist/fjGallery.min.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1,percent:{toc:!0,rightside:!1},player:{key:"661a038c31f2b",mobile:"1"},uiversion:"v1.9.0"},GLOBAL_LANG={fps:{normal1:"非常好",normal2:"很好",laggy1:"卡",laggy2:"难受",laggy3:"电竞级帧率",laggy4:"卡成ppt"},about:{comments:"个评论",introduction:["测试一下","测试",233],comment_error:"错误：评论总数功能无法获取到正确的元素，请检查页面是否正常！",stats:{today_users:"今日人数",today_uv:"今日访问",yesterday_users:"昨日人数",yesterday_uv:"昨日访问",month_uv:"本月访问",recent:"最近访问",years:"已稳定运行 ${q} 年"}}}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"butterfly主题添加音乐页面（适配手机）",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2024-10-03 02:22:00"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script src="https://jsd.cdn.storisinz.site/npm/jquery/dist/jquery.min.js"></script><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const a=864e5*o,n={value:t,expiry:(new Date).getTime()+a};localStorage.setItem(e,JSON.stringify(n))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise(((t,o)=>{const a=document.createElement("script");a.src=e,a.async=!0,a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)})),e.getCSS=e=>new Promise(((t,o)=>{const a=document.createElement("link");a.rel="stylesheet",a.href=e,a.onload=()=>t(),a.onerror=()=>o(),document.head.appendChild(a)})),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme"),o=window.matchMedia("(prefers-color-scheme: dark)").matches,a=window.matchMedia("(prefers-color-scheme: light)").matches,n=window.matchMedia("(prefers-color-scheme: no-preference)").matches,c=!o&&!a&&!n;if(void 0===t){if(a)activateLightMode();else if(o)activateDarkMode();else if(n||c){const e=(new Date).getHours();e<=6||e>=18?activateDarkMode():activateLightMode()}window.matchMedia("(prefers-color-scheme: dark)").addListener((function(e){void 0===saveToLocal.get("theme")&&(e.matches?activateDarkMode():activateLightMode())}))}else"light"===t?activateLightMode():activateDarkMode();const d=saveToLocal.get("aside-status");void 0!==d&&("hide"===d?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/custom2.css"><link rel="stylesheet" href="/css/anzhiyu-var.css"><link rel="stylesheet" href="/css/heo-var.css"><link rel="stylesheet" href="/css/bywind-var.css"><link rel="stylesheet" href="/css/icat-var.css"><link rel="stylesheet" href="https://cdn2.codesign.qq.com/icons/XMx86jzlQw0brz3/latest/iconfont.css"><link rel="stylesheet" href="/css/rightmenu.css"><link rel="stylesheet" href="/css/iconfont.css"><link rel="stylesheet" href="/css/categoryBar.css"><script async src="/js/categoryBar.js"></script><link rel="stylesheet" href="/css/orlike.css"><link rel="stylesheet" href="/css/footer.css"><link rel="stylesheet" href="/css/404.css"><link rel="stylesheet" href="/css/plane.css"><link rel="stylesheet" href="/css/console.css"><style id="settingStyle"></style><style id="css"></style><style id="yjjs"></style><style id="themeColor"></style><script defer src="/sw-dom.js"></script><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="星空故事·魔法小屋" type="application/atom+xml"></head><body><div class="float-box left top"></div><div class="float-box left bottom"></div><div class="float-box right top"></div><div class="float-box right bottom"></div><div id="loading-box" onclick="document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)"><div class="sparks-combo"><div class="spark"></div><div class="spark"></div><div class="spark"></div><div class="spark"></div></div><div class="rainbow"><span></span></div><div class="nyan-cat"><div class="feet"></div><div class="tail"><span></span></div><div class="body"></div><div class="head"></div></div><script src="/js/nyan.js"></script></div><script>const preloader={endLoading:()=>{document.body.style.overflow="auto",document.getElementById("loading-box").classList.add("loaded")},initLoading:()=>{document.body.style.overflow="",document.getElementById("loading-box").classList.remove("loaded")}};window.addEventListener("load",(()=>{preloader.endLoading()})),document.addEventListener("pjax:send",(()=>{preloader.initLoading()})),document.addEventListener("pjax:complete",(()=>{preloader.endLoading()}))</script><link rel="stylesheet" href="/css/pace/big-counter.css"><script src="https://jsd.cdn.storisinz.site/npm/pace-js/pace.min.js"></script><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/avatar.png" onerror='onerror=null,src="/img/friend_404.gif"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">40</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a><a href="/comments/"><div class="headline">评论</div><div class="length-num icat-pe-comment">0</div></a></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-wenzhang"></use></svg> <span>站点</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-a-xiangzishouna"></use></svg> <span>隧道</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-fenlei"></use></svg> <span>分类</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-fenlei-copy"></use></svg> <span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/update/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-gengxin"></use></svg> <span>更新日志</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-youlian"></use></svg> <span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-lianjie"></use></svg> <span>友人帐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-icon_pengyouquan"></use></svg> <span>朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-liuyanban"></use></svg> <span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bbs/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-laba"></use></svg> <span>哔哔广场</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-guanyuwomenicon"></use></svg> <span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-zhifeiji"></use></svg> <span>关于屋主</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-bilibili"></use></svg> <span>屋主追番</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/essay/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-icon-test"></use></svg> <span>闲言碎语</span></a></li><li><a class="site-page child faa-parent animated-hover" href="javascript:toRandomPost()"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-zuji"></use></svg> <span>随便逛逛</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg nav-fixed nav-visible" id="page-header" style="background-image:url('https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp')"><nav id="nav"><span id="blog-info"><a href="/" title="星空故事·魔法小屋"><img class="site-logo" src="/img/icon-dark.png"></a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-wenzhang"></use></svg> <span>站点</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-a-xiangzishouna"></use></svg> <span>隧道</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-fenlei"></use></svg> <span>分类</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-fenlei-copy"></use></svg> <span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/update/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-gengxin"></use></svg> <span>更新日志</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-youlian"></use></svg> <span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-lianjie"></use></svg> <span>友人帐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-icon_pengyouquan"></use></svg> <span>朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-liuyanban"></use></svg> <span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bbs/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-laba"></use></svg> <span>哔哔广场</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-guanyuwomenicon"></use></svg> <span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-zhifeiji"></use></svg> <span>关于屋主</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-bilibili"></use></svg> <span>屋主追番</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/essay/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-icon-test"></use></svg> <span>闲言碎语</span></a></li><li><a class="site-page child faa-parent animated-hover" href="javascript:toRandomPost()"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pjh-zuji"></use></svg> <span>随便逛逛</span></a></li></ul></div></div><center id="name-container"><a id="page-name" href="javascript:rmf.scrollToTop()">PAGE_NAME</a></center></div><div id="nav-right"><div id="travellings"><a class="site-page" target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" title="随机前往一个开往项目网站"><i class="fas fa-train fa-fw"></i></a></div><div id="random"><a class="site-page" href="javascript:toRandomPost()" title="随机前往一个文章"><i class="fas fa-paper-plane fa-fw"></i></a></div><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i></a></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">butterfly主题添加音乐页面（适配手机）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-orlike"><i class="iconfont icon-aixin fa-fw post-meta-icon"></i><span class="post-meta-label">点赞数:</span><a href="/posts/22945/#orlike-box"><span class="orlike-count"></span></a></span><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-01-08T22:31:46.000Z" title="发表于 2023-01-08 22:31:46">2023-01-08</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-10-03T02:22:00.463Z" title="更新于 2024-10-03 02:22:00">2024-10-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" data-flag-title="butterfly主题添加音乐页面（适配手机）"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section></header><main class="layout" id="content-inner"><div class="h-entry" id="post"><article class="post-content e-content" id="article-container"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><div class="note info modern"><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="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/msedge_x1MaJIbBQg.2ka3d6xxnu80.webp" alt="msedge_x1MaJIbBQg"><br>别问为啥是之前，这个音乐页面手机访问是这样的：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-09-59-57-499_com.2sej4yl2vuw0.webp" alt="Screenshot_2023-01-09-09-59-57-499_com"><br>当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230109/Screenshot_2023-01-09-10-02-41-554_com.6tcc3lty2uo0.webp" alt="Screenshot_2023-01-09-10-02-41-554_com"><br>（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，<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="#教程开始-1">1.0</button></li><li class="tab active"><button type="button" data-href="#教程开始-2">2.0</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="教程开始-1"><p></p><div class="note info modern"><p>这个教程是我基于<a target="_blank" rel="noopener" href="https://www.php.cn/xiazai/js/6169">https://www.php.cn/xiazai/js/6169</a> 做的适配butterfly主题的版本，但后面我发现这跟csdn里的<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_43151418/article/details/125351391">html好看的音乐播放器</a><psw>（希望csdn那篇文章的作者看完不会在意）</psw></p></div><p></p><p></p><div class="note warning modern"><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="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="教程开始-2"><p><a href="/music/old/">2.0效果预览</a></p><ol><li>新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug（有搞1.0的话直接把music.pug里面的内容全都替换成下面的内容），内容如下：<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="note info modern"><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="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="orlike-box" id="orlike-box"><script>(()=>{function e(){new OrLike({serverUrl:"https://orlike.blog.sinzmise.top/",el:".orlike-box",days:30})}window.pjax?e():window.addEventListener("load",e)})()</script></div><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h class="p-name">butterfly主题添加音乐页面（适配手机）</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a class="u-url" href="https://blog.sinzmise.top/posts/22945/">https://blog.sinzmise.top/posts/22945/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h class="p-author">王九弦SZ·Ninty</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h class="dt-published">2023-01-08</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h class="dt-updated">2024-10-03</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags p-category" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a><a class="post-meta__tags p-category" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/">页面魔改</a></div><div class="post_share"><div class="social-share" data-image="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://jsd.cdn.storisinz.site/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/38964/"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" onerror='onerror=null,src="/img/404.jpg"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div class="next-post pull-right"><a href="/posts/23021/"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230104/Goodbye2022.21ppwx94kqf4.webp" onerror='onerror=null,src="/img/404.jpg"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">再见2022，你好2023</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/10045/" title="为博客添加一个游戏收藏页（npm插件版）"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240525/fe131d7f5a6b38b23cc967316c13dae2.8dwp7xp4q5.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">为博客添加一个游戏收藏页（npm插件版）</div></div></a></div><div><a href="/posts/38964/" title="小康大佬的说说方案 ———— ispeak搭建教程"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-01-13</div><div class="title">小康大佬的说说方案 ———— ispeak搭建教程</div></div></a></div><div><a href="/posts/53662/" title="博客大更新"><img class="cover" src="https://files.blog.sinzmise.top/images/645fa3cf90d70.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-07-05</div><div class="title">博客大更新</div></div></a></div><div><a href="/posts/16107/" title="新起点，新出发"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20221230/46348.3e004dfapae0.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-12-17</div><div class="title">新起点，新出发</div></div></a></div><div><a href="/posts/57692/" title="Ruffle测试"><img class="cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240525/logo.4913vyk2ki.svg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-05-25</div><div class="title">Ruffle测试</div></div></a></div><div><a href="/posts/28536/" title="自建不蒜子API"><img class="cover" src="https://vip1.loli.io/2022/05/11/eKfrdV9p48IcCj5.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-11</div><div class="title">自建不蒜子API</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div><div id="comment-switch"><span class="first-comment">Twikoo</span><span class="switch-btn"></span><span class="second-comment">Artalk</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div><div><div id="artalk-wrap"></div></div></div><div class="comment-barrage"></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info h-card"><div class="is-center"><div class="avatar-img"><img class="u-photo" src="/img/avatar.png" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="avatar"></div><div class="author-info__name p-name">王九弦SZ·Ninty</div><div class="author-info__description p-note">The Story,The Dream.</div><div class="card-info-data site-data is-center"><div class="card-info-data-item"><a href="/archives/"><i class="headline fas fa-cash-register"></i><div class="length-num">40</div></a></div><div class="card-info-data-item"><a href="/tags/"><i class="headline fas fa-tags"></i><div class="length-num">14</div></a></div><div class="card-info-data-item"><a href="/categories/"><i class="headline fas fa-folder-open"></i><div class="length-num">5</div></a></div><div class="card-info-data-item"><a href="/comments/"><i class="headline fas fa-comment"></i><div class="length-num icat-pc-comment">0</div></a></div></div></div><div class="social-list"><a class="social-icon u-url" href="https://www.sinzmise.top/" target="_blank" title="Home" rel="me"><i class="fas fa-house"></i></a><a class="social-icon u-url" href="https://github.com/SinzMise" target="_blank" title="Github" rel="me"><i class="fab fa-github"></i></a><a class="social-icon u-email" href="mailto:email@sinzmise.top" target="_blank" title="Email" rel="me"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-clock-weather"><div class="item-headline"><i class="pj-historical icon-pjh-shijian"></i><span>时间</span></div><div class="item-content"><canvas id="canvas" style="width:100%" width="100%" height="150"></canvas><script src="/js/clock.js"></script><div id="weather"></div></div></div><div class="card-widget card-clock-kickass"><div class="item-headline"><i class="pj-historical icon-pjh-fasong"></i><span>Kick Ass</span></div><div class="item-content"><img src="https://cdn.jsdmirror.com/npm/pzai-staticr@1.0.2/blog/img/planeBg.png" style="width:100%"><div class="planeOpt"><p>退出：<kbd>esc</kbd></p><p>方向控制： <kbd>←</kbd><kbd>↑</kbd><kbd>→</kbd></p><p>射击：<kbd>Space</kbd></p><p>轰炸：<kbd>B</kbd></p><div style="display:flex;justify-content:center"><button onclick='const s=document.createElement("script");s.type="text/javascript",document.body.appendChild(s),s.src="/js/plane.js"'><div class="svg-wrapper-1"><div class="svg-wrapper"><svg height="20" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z" fill="currentColor"></path></svg></div></div><span>开始游戏</span></button></div></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <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-number">2.</span> <span class="toc-text">教程</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#TO-DO"><span class="toc-number">3.</span> <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="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/64856/" title="2024-09小记"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240930/2024-09.45nmpngts.jpg" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="2024-09小记"></a><div class="content"><a class="title" href="/posts/64856/" title="2024-09小记">2024-09小记</a><time datetime="2024-09-30T20:29:48.000Z" title="发表于 2024-09-30 20:29:48">2024-09-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/15688/" title="2024-08小记"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240901/2024-08.1023w7rffi.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="2024-08小记"></a><div class="content"><a class="title" href="/posts/15688/" title="2024-08小记">2024-08小记</a><time datetime="2024-08-31T11:33:48.000Z" title="发表于 2024-08-31 11:33:48">2024-08-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/46640/" title="真·彩虹猫加载动画"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240802/msedge_CbWmjbcmrr.175al3jem3.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="真·彩虹猫加载动画"></a><div class="content"><a class="title" href="/posts/46640/" title="真·彩虹猫加载动画">真·彩虹猫加载动画</a><time datetime="2024-08-02T17:12:28.000Z" title="发表于 2024-08-02 17:12:28">2024-08-02</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/15799/" title="2024-07小记"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240731/2024-07.8dwrv8pdqe.jpg" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="2024-07小记"></a><div class="content"><a class="title" href="/posts/15799/" title="2024-07小记">2024-07小记</a><time datetime="2024-07-30T22:42:19.000Z" title="发表于 2024-07-30 22:42:19">2024-07-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/64935/" title="2024-06小记"><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20240705/2024-06.3nrhwc67r0.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="2024-06小记"></a><div class="content"><a class="title" href="/posts/64935/" title="2024-06小记">2024-06小记</a><time datetime="2024-06-28T22:31:59.000Z" title="发表于 2024-06-28 22:31:59">2024-06-28</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="footer_custom_text"><section class="footer-wave-svg main-hero-waves-area-footer waves-area" id="jsi-flying-fish-container"><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><div class="footer-content"><div class="footer-content-column"><div class="footer-logo"><a class="footer-logo-link" href="#"><span class="hidden-link-text">LOGO</span><img src="/img/icon-light.png" style="height:40%;width:40%"></a></div><div class="footer-menu"><h2 class="footer-menu-name">开始</h2><ul class="footer-menu-list" id="menu-get-started"><li class="menu-item menu-item-object-product menu-item-type-post_type"><a target="_blank" rel="noopener" href="https://www.sinzmise.top/">个人主页</a></li><li class="menu-item menu-item-object-product menu-item-type-post_type"><a href="/sitemap.xml">站点地图</a></li></ul></div></div><div class="footer-content-column"><div class="footer-menu"><h2 class="footer-menu-name">我加入的</h2><ul class="footer-menu-list" id="menu-company"><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://www.travellings.cn/go.html">开往·友链接力</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://storeweb.cn/s/1707">虫洞·个站商店</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://zhblogs.ohyee.cc/go">中文博客随机跳转</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://travel.moe/go.html">异次元之旅</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://bokelu.suijiboke.gs">博客录-随机博客</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://forever.dreamerhe.cn/planet-shuttle">梦境列车 · 时空穿梭</a></li><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="https://blogscn.fun/random.html">笔墨迹·随机访问</a></li></ul></div></div><div class="footer-content-column"><div class="footer-menu"><h2 class="footer-menu-name">联系我</h2><ul class="footer-menu-list" id="menu-company"><li class="menu-item menu-item-object-category menu-item-type-taxonomy"><a target="_blank" rel="noopener" href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&amp;k=TK1cLmWzuZ-LhACNH8GCntLD6zbo-nUW&amp;authKey=Lym2j6%2BggcPrl77XV1vwVTSM12%2B7O7yMMf02Xi6meCVPEFASHTFX01k%2F1KbFrv1%2B&amp;noverify=0&amp;group_code=623816093">官方Q群</a></li></ul></div></div><div class="footer-content-column"><ul class="footer-menu-list" id="menu-get-started"><li class="menu-item menu-item-object-product menu-item-type-post_type"><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img class="img-not-ai" width="120" height="42" alt="署名-非商业性使用-相同方式共享 4.0 国际" src="https://cdn.gallery.uuanqin.top/img/by-nc-sa.svg"></a></li><li class="menu-item menu-item-object-product menu-item-type-post_type"><a target="_blank" rel="noopener" href="https://blogscn.fun/"><img class="img-not-ai" width="120" height="42" alt="本站已加入BLOGS·CN" src="https://photo.xiangming.site/img/blogscnlogo.png"></a></li><li class="menu-item menu-item-object-product menu-item-type-post_type"><a target="_blank" rel="noopener" href="https://boringbay.com"><img class="img-not-ai" width="120" height="42" alt="无聊湾 🥱 The Boring Bay" src="https://boringbay.com/api/badge/blog.sinzmise.top"></a></li><li class="menu-item menu-item-object-product menu-item-type-post_type">©2024 By 王九弦SZ·Ninty</li></ul></div><div class="footer-social-links"><a class="footer-social-link link1" href="mailto:email@sinzmise.top" target="_self"><span class="hidden-link-text">Email</span><i class="footer-social-icon-svg fa fa-envelope"></i></a><a class="footer-social-link link2" href="https://github.com/SinzMise" target="_blank"><span class="hidden-link-text">Github</span><i class="footer-social-icon-svg fab fa-github"></i></a><a class="footer-social-link link3" href="/atom.xml" target="_self"><span class="hidden-link-text">RSS</span><i class="footer-social-icon-svg fas fa-square-rss"></i></a><a class="footer-social-link link4" href="https://xlog.sinzmise.top/" target="_blank"><span class="hidden-link-text">星空魔法书·Delta</span><i class="footer-social-icon-svg iconfont icon-pjh-icon_riji"></i></a></div></div><div class="footer-copyright"><div class="footer-copyright-wrapper"><p class="footer-copyright-text"><a href="https://hexo.io" rel="noopener external nofollow noreferrer" target="_blank">Hexo v4.9.0</a>&nbsp;|&nbsp;<a href="https://github.com/jerryc127/hexo-theme-butterfly" rel="noopener external nofollow noreferrer" target="_blank">Butterfly v6.3.0</a>&nbsp;|&nbsp;<a href="https://blog.sinzmise.top/update/" rel="noopener external nofollow noreferrer" target="_blank">CetaStories v1.9.0</a></p><p class="footer-copyright-text"><a href="https://icp.gov.moe/?keyword=20231033" target="_blank">萌ICP备20231033号</a>&nbsp;|<a target="_blank" href="https://beian.miit.cn.com/gov/search.php?query=blog.sinzmise.top" title="MIIT备20240818号">MIIT备20240818号</a>&nbsp;|<a target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/" title="官码2024000155号"><img src="https://style.wmou.com/images/guanma.png" alt="官码" width="9">官码2024000155号</a><br><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a>An <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a><br><span>我加入的：</span><a href="https://zhblogs.ohyee.cc/" target="_blank">中文博客列表</a>&nbsp;|<a href="https://storeweb.cn/member/o/1585" target="_blank">个站商店</a>&nbsp;|<a href="https://bf.zzxworld.com/s/995" target="_blank">BlogFinder</a>&nbsp;|<a href="https://sites.link/site-info?siteType=life&amp;siteId=64cb373190e35300a8eec654" target="_blank">站点聚合平台</a>&nbsp;|<a href="https://boke.lu" target="_blank">博客录</a>&nbsp;|<a href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/" target="_blank">RssBlog</a>&nbsp;|<a href="https://blogscn.fun" target="_blank">笔墨迹</a>&nbsp;|<a href="https://forever.dreamerhe.cn/" target="_blank">梦境列车</a>&nbsp;|<a href="https://firewood.news/" target="_blank">积薪</a>&nbsp;|<a href="https://daohang.lusongsong.com/" target="_blank">博客大全</a>&nbsp;|</p></div></div></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅深转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><a href="javascript:toggleWinbox();"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button></a><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@docsearch/css/dist/style.min.css"><script src="https://jsd.cdn.storisinz.site/npm/@docsearch/js/dist/umd/index.min.js"></script><script>(()=>{docsearch(Object.assign({appId:"QAS05YI2PH",apiKey:"67ffd4c9fa1234148ec4f8b27dfdb2a7",indexName:"sinzmise",container:"#docsearch"},null));const e=()=>{document.querySelector(".DocSearch-Button").click()},c=()=>{document.querySelector("#search-button > .search").addEventListener("click",e)};c(),window.addEventListener("pjax:complete",c)})()</script></div><div class="js-pjax" id="settingWindow"><span class="setting-title"><button id="backer" onclick='$(".asetting").hide(),$(".settingx").show(),$("#backer").hide(),$("#stt-style").hide(),$("#stt-font").hide(),$("#stt-background").hide(),$("#stt-count").hide(),$("#stt-about").hide()'><i class="fa fa-chevron-left"></i></button><span id="stt">设置</span> <span id="stt-style">-&gt; 站点</span> <span id="stt-font">-&gt; 字体</span> <span id="stt-background">-&gt; 背景</span> <span id="stt-count">-&gt; 统计</span> <span id="stt-about">-&gt; 关于</span><a id="close-console" onclick="toggleWinbox()">×</a></span><div class="settings"><div id="setting-buttons"><button class="settingx" onclick='$("#theme-settings").show(),$(".settingx").hide(),$("#backer").show(),$("#stt-style").show()'><i class="fas fa-layer-group"></i><span>站点</span></button><button class="settingx" onclick='$("#font-settings").show(),$(".settingx").hide(),$("#backer").show(),$("#stt-font").show()'><i class="fa fa-font"></i><span>字体</span></button><button class="settingx" onclick='$("#background-settings").show(),$(".settingx").hide(),$("#backer").show(),$("#stt-background").show()'><i class="far fa-image"></i><span>背景</span></button><button class="settingx" onclick="$('#con-echarts').show();$('.settingx').hide();$('#backer').show();$('#stt-count').show();var evt = document.createEvent(&quot;HTMLEvents&quot;);evt.initEvent(&quot;resize&quot;, false, false);window.dispatchEvent(evt);"><i class="fas fa-chart-pie"></i><span>统计</span></button><button class="settingx" onclick='$("#con-abouts").show(),$(".settingx").hide(),$("#backer").show(),$("#stt-about").show()'><i class="fa fa-cloud-download"></i><span>关于</span></button></div><div id="setting-hides"><div class="asetting" id="theme-settings"><h2 class="content-head">站点</h2><p></p><div class="content" style="display:flex"><input id="blur" type="checkbox" onclick="setBlur()"><div class="content-text">启用模糊效果</div></div><div class="content" style="display:flex"><input id="fpson" type="checkbox" onclick="fpssw()" style="flex-shrink:0"><div class="content-text"><span>开启帧率检测 （<a href="javascript:window.location.reload()">刷新</a>后生效）</span></div></div><p></p><p></p><h2 class="content-head">主题</h2><div class="content" style="display:flex"><input id="hideAplayer" type="checkbox" onclick="toggleAplayer()"><div class="content-text"><span>音乐播放器</span></div></div><div class="content" style="display:flex"><input id="hideSakura" type="checkbox" onclick="toggleSakuras()"><div class="content-text">落樱特效</div></div><div class="content" style="display:flex"><input id="autoTheme" type="checkbox" onclick="toggleAutoTheme()"><div class="content-text">明暗模式自动切换</div></div><p></p><p></p><h3 class="content-head">主题色</h3><div class="content" id="themeColorSettings" style="display:flex"><input id="default" type="radio" name="colors" onclick='setColor("default")' checked><span id="deftext">默认</span><input id="red" type="radio" name="colors" onclick='setColor("red")'><input id="orange" type="radio" name="colors" onclick='setColor("orange")'><input id="yellow" type="radio" name="colors" onclick='setColor("yellow")'><input id="green" type="radio" name="colors" onclick='setColor("green")'><input id="blue" type="radio" name="colors" onclick='setColor("blue")'><input id="heoblue" type="radio" name="colors" onclick='setColor("heoblue")'><input id="darkblue" type="radio" name="colors" onclick='setColor("darkblue")'><input id="purple" type="radio" name="colors" onclick='setColor("purple")'><input id="pink" type="radio" name="colors" onclick='setColor("pink")'><input id="black" type="radio" name="colors" onclick='setColor("black")'><input id="blackgray" type="radio" name="colors" onclick='setColor("blackgray")'></div><p></p></div><div class="asetting" id="font-settings"><h2 class="content-head">字体</h2><p id="swfs"><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:HYTMR!important;color:#000" onclick='setFont("HYTMR")'>汉仪唐美人</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:HYPailou!important;color:#000" onclick='setFont("HYPailou")'>汉仪新蒂牌楼</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:FZXJLJ!important;color:#000" onclick='setFont("FZXJLJ")'>方正金陵体</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:FZXS!important;color:#000" onclick='setFont("FZXS")'>方正像素体</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:ZhuZiAWan!important;color:#000" onclick='setFont("ZhuZiAWan")'>筑紫A丸ゴシック</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:FZODZK!important;color:#000" onclick='setFont("FZODZK")'>方正欧蝶正楷</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:'Source Serif'!important;color:#000" onclick='setFont("Source Serif")'>思源宋体</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:'Source Sans'!important;color:#000" onclick='setFont("Source Sans")'>思源黑体</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:HMOSANS!important;color:#000" onclick='setFont("HMOSANS")'>HarmonyOS Sans</a><br><a class="swf" href="javascript:;" rel="noopener external nofollow" style="font-family:-apple-system,IBM Plex Mono,monosapce,'微软雅黑',sans-serif" onclick='setFont("main")'>系统默认</a><br></p></div><div class="asetting" id="background-settings"><h2 style="margin-left:10px">背景</h2><div></div><button class="content-button" onclick='localStorage.removeItem("blogbg"),location.reload()'><i class="fa-solid fa-arrows-rotate"></i><span>恢复默认背景</span></button><div class="bg-mobi"><h3>BA图片</h3><div class="bgbox"><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/01.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/01.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/02.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/02.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/03.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/03.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/04.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/04.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/05.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/05.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/06.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/06.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/07.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/07.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/08.webp)" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pe/08.webp)")'></a></div></div><div class="bg-pc"><h3>BA图片</h3><div class="bgbox"><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/20.ibw8bgqp8.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/20.ibw8bgqp8.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/19.7p2f61ijp.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/19.7p2f61ijp.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/18.839tcinjtm.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/18.839tcinjtm.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/17.5q76vb9qmr.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/17.5q76vb9qmr.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/16.2doh0xt6a1.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/16.2doh0xt6a1.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/15.pf43r2w3d.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/15.pf43r2w3d.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/14.7i05q7t3hn.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/14.7i05q7t3hn.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/13.3uum2oxazj.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/13.3uum2oxazj.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/12.7p3dlnf8wi.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/12.7p3dlnf8wi.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/11.4g49ozrrhv.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/11.4g49ozrrhv.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/10.54xj90fai0.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/10.54xj90fai0.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/09.2veipiuk0n.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/09.2veipiuk0n.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/08.9rj69pdu4s.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/08.9rj69pdu4s.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/07.4qr3i56zll.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/07.4qr3i56zll.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/06.86tfa8gmnm.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/06.86tfa8gmnm.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/05.esaalno2u.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/05.esaalno2u.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/04.8ojgyti07r.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/04.8ojgyti07r.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/03.5tqst12tfi.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/03.5tqst12tfi.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/02.pf43r2w6h.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/02.pf43r2w6h.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/01.73tpzcksoy.webp)")'><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/ba/pc/01.73tpzcksoy.webp"></a></div></div><div class="bg-mobi"><h3>其它图片</h3><div class="bgbox"><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d4d539a5.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d4d539a5.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d4e15c9d.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d4e15c9d.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6f22c03c6.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6f22c03c6.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d56c83eb.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d56c83eb.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d50b439b.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d50b439b.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d5574d0e.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d5574d0e.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d529adf9.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d529adf9.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d6d5159b31.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d5159b31.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d718bbeef6.webp)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d718bbeef6.webp)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d72f237d19.jpg)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72f237d19.jpg)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d72f2032c8.jpg)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72f2032c8.jpg)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2021/12/01/7792ff0082ec4.jpg)" onclick='changeBg("url(https://bu.dusays.com/2021/12/01/7792ff0082ec4.jpg)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d72ee6d4f3.png)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72ee6d4f3.png)")'></a><a class="pimgbox" href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://bu.dusays.com/2022/08/30/630d72ed76532.jpg)" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72ed76532.jpg)")'></a></div></div><div class="bg-pc"><h3>其它图片</h3><div class="bgbox"><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d5574d0e.webp)")'><img src="https://bu.dusays.com/2022/08/30/630d6d5574d0e.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d529adf9.webp)")'><img src="https://bu.dusays.com/2022/08/30/630d6d529adf9.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d6d5159b31.webp)")'><img src="https://bu.dusays.com/2022/08/30/630d6d5159b31.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d718bbeef6.webp)")'><img src="https://bu.dusays.com/2022/08/30/630d718bbeef6.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72f237d19.jpg)")'><img src="https://bu.dusays.com/2022/08/30/630d72f237d19.jpg"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72f2032c8.jpg)")'><img src="https://bu.dusays.com/2022/08/30/630d72f2032c8.jpg"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2021/12/01/7792ff0082ec4.jpg)")'><img src="https://bu.dusays.com/2021/12/01/7792ff0082ec4.jpg"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72ee6d4f3.png)")'><img src="https://bu.dusays.com/2022/08/30/630d72ee6d4f3.png"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://bu.dusays.com/2022/08/30/630d72ed76532.jpg)")'><img src="https://bu.dusays.com/2022/08/30/630d72ed76532.jpg"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/1.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/1.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/2.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/2.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/3.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/3.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/4.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/4.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/5.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/5.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/6.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/6.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/7.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/7.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/8.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/8.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/9.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/9.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/10.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/10.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/11.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/11.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/12.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/12.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/13.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/13.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/14.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/14.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/15.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/15.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/16.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/16.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/17.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/17.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/18.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/18.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/19.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/19.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/20.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/20.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/21.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/21.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/22.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/22.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/23.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/23.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/24.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/24.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/25.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/25.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/26.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/26.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/27.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/27.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/28.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/28.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/29.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/29.webp"></a><a class="imgbox" href="javascript:;" onclick='changeBg("url(https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/30.webp)")'><img src="https://jsd.cdn.storisinz.site/npm/saiodgm-api@1.0.1/randomimg-my/30.webp"></a></div></div><div class="bg"><h3>渐变色</h3><div class="bgbox"><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#eecda3,#ef629f)" onclick="changeBg(linear-gradient(to right, #eecda3, #ef629f))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#b7d31e,#42ce1e)" onclick="changeBg(linear-gradient(to right, #B7D31E, #42CE1E))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#06de86,#06a5de)" onclick="changeBg(linear-gradient(to right, #06DE86, #06A5DE))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#189bc4,#183dc4)" onclick="changeBg(linear-gradient(to right, #189BC4, #183DC4))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#c018c4,#c41818)" onclick="changeBg(linear-gradient(to right, #C018C4, #C41818))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#8b00bb,#030094)" onclick="changeBg(linear-gradient(to right, #8B00BB, #030094))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(to right,#eecda3,#ef629f)" onclick="changeBg(linear-gradient(to right, #eecda3, #ef629f))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(90deg,#ffd7e4 0,#c8f1ff 100%)" onclick="changeBg(linear-gradient(90deg, #ffd7e4 0%, #c8f1ff 100%))"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:linear-gradient(45deg,#e5737b,#c6999e,#96b9c2,#00d6e8)" onclick="changeBg(linear-gradient(45deg, #e5737b, #c6999e, #96b9c2, #00d6e8))"></a></div></div><div class="bg"><h3>纯色</h3><div class="bgbox"><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#7d9d9c" onclick="changeBg(#7D9D9C)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#fff" onclick="changeBg(#fff)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#49a6e9" onclick="changeBg(#49A6E9)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#f7ceff" onclick="changeBg(#F7CEFF)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#ffffce" onclick="changeBg(#FFFFCE)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#cfffce" onclick="changeBg(#CFFFCE)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#17efe9" onclick="changeBg(#17EFE9)"></a><a class="box" href="javascript:;" rel="noopener external nofollow" style="background:#9f17ef" onclick="changeBg(#9F17EF)"></a></div></div></div><div class="asetting" id="con-echarts"><h1>统计</h1><img src="https://moe.counter.blog.sinzmise.top/sznhouse?theme=asoul"><h2>文章统计</h2><div id="posts-chart" data-start="2021-01" style="border-radius:8px;height:300px;padding:10px"></div><script id="postsChart">var color="light"===document.documentElement.getAttribute("data-theme")?"#4c4948":"rgba(255,255,255,0.7)",postsChart=echarts.init(document.getElementById("posts-chart"),"light"),postsOption={title:{text:"文章发布统计图",x:"center",textStyle:{color:color}},tooltip:{trigger:"axis"},xAxis:{name:"日期",type:"category",boundaryGap:!1,nameTextStyle:{color:color},axisTick:{show:!1},axisLabel:{show:!0,color:color},axisLine:{show:!0,lineStyle:{color:color}},data:["2021-01","2021-02","2021-03","2021-04","2021-05","2021-06","2021-07","2021-08","2021-09","2021-10","2021-11","2021-12","2022-01","2022-02","2022-03","2022-04","2022-05","2022-06","2022-07","2022-08","2022-09","2022-10","2022-11","2022-12","2023-01","2023-02","2023-03","2023-04","2023-05","2023-06","2023-07","2023-08","2023-09","2023-10","2023-11","2023-12","2024-01","2024-02","2024-03","2024-04","2024-05","2024-06","2024-07","2024-08","2024-09","2024-10"]},yAxis:{name:"文章篇数",type:"value",nameTextStyle:{color:color},splitLine:{show:!1},axisTick:{show:!1},axisLabel:{show:!0,color:color},axisLine:{show:!0,lineStyle:{color:color}}},series:[{name:"文章篇数",type:"line",smooth:!0,lineStyle:{width:0},showSymbol:!1,itemStyle:{opacity:1,color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(128, 255, 165)"},{offset:1,color:"rgba(1, 191, 236)"}])},areaStyle:{opacity:1,color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(128, 255, 165)"},{offset:1,color:"rgba(1, 191, 236)"}])},data:[0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,3,1,3,2,0,0,5,3,1,1,1,1,4,1,1,3,3,1,1,2,1,0],markLine:{data:[{name:"平均值",type:"average",label:{color:color}}]}}]};postsChart.setOption(postsOption),window.addEventListener("resize",(()=>{postsChart.resize()})),postsChart.on("click","series",(e=>{"series"===e.componentType&&(window.location.href="/archives/"+e.name.replace("-","/"))}))</script><div id="tags-chart" data-length="10" style="border-radius:8px;height:300px;padding:10px"></div><script id="tagsChart">var color="light"===document.documentElement.getAttribute("data-theme")?"#4c4948":"rgba(255,255,255,0.7)",tagsChart=echarts.init(document.getElementById("tags-chart"),"light"),tagsOption={title:{text:"Top 10 标签统计图",x:"center",textStyle:{color:color}},tooltip:{},xAxis:{name:"标签",type:"category",nameTextStyle:{color:color},axisTick:{show:!1},axisLabel:{show:!0,color:color,interval:0},axisLine:{show:!0,lineStyle:{color:color}},data:["个人小记","站点折腾","自建部署","游戏相关","其它游戏","页面魔改","项目折腾","Windows软件","加载动画","歌曲收集"]},yAxis:{name:"文章篇数",type:"value",splitLine:{show:!1},nameTextStyle:{color:color},axisTick:{show:!1},axisLabel:{show:!0,color:color},axisLine:{show:!0,lineStyle:{color:color}}},series:[{name:"文章篇数",type:"bar",data:[{name:"个人小记",value:18,path:"tags/个人小记/"},{name:"站点折腾",value:14,path:"tags/站点折腾/"},{name:"自建部署",value:5,path:"tags/自建部署/"},{name:"游戏相关",value:4,path:"tags/游戏相关/"},{name:"其它游戏",value:3,path:"tags/其它游戏/"},{name:"页面魔改",value:3,path:"tags/页面魔改/"},{name:"项目折腾",value:3,path:"tags/项目折腾/"},{name:"Windows软件",value:2,path:"tags/Windows软件/"},{name:"加载动画",value:1,path:"tags/加载动画/"},{name:"歌曲收集",value:1,path:"tags/歌曲收集/"},{name:"站点底部魔改",value:1,path:"tags/站点底部魔改/"},{name:"Flash相关",value:1,path:"tags/Flash相关/"},{name:"Steam游戏",value:1,path:"tags/Steam游戏/"},{name:"悬浮宠物/看板娘",value:1,path:"tags/悬浮宠物-看板娘/"}],itemStyle:{borderRadius:[5,5,0,0],color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(128, 255, 165)"},{offset:1,color:"rgba(1, 191, 236)"}])},emphasis:{itemStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(128, 255, 195)"},{offset:1,color:"rgba(1, 211, 255)"}])}},markLine:{data:[{name:"平均值",type:"average",label:{color:color}}]}}]};tagsChart.setOption(tagsOption),window.addEventListener("resize",(()=>{tagsChart.resize()})),tagsChart.on("click","series",(a=>{a.data.path&&(window.location.href="/"+a.data.path)}))</script><div id="categories-chart" data-parent="true" style="border-radius:8px;height:300px;padding:10px"></div><script id="categoriesChart">var color="light"===document.documentElement.getAttribute("data-theme")?"#4c4948":"rgba(255,255,255,0.7)",categoriesChart=echarts.init(document.getElementById("categories-chart"),"light"),categoryParentFlag=!1,categoriesOption={title:{text:"文章分类统计图",x:"center",textStyle:{color:color}},legend:{top:"bottom",data:["个人小记","站点折腾","游戏相关","项目折腾","歌曲收集"],textStyle:{color:color}},tooltip:{trigger:"item"},series:[]};categoriesOption.series.push(categoryParentFlag?{nodeClick:!1,name:"文章篇数",type:"sunburst",radius:["15%","90%"],center:["50%","55%"],sort:"desc",data:[{name:"个人小记",value:18,path:"categories/个人小记/",id:"cm1so8nhs0004kipw8y7qhz7x",parentId:"0"},{name:"站点折腾",value:14,path:"categories/站点折腾/",id:"cm1so8nia001qkipw5p7p9tjr",parentId:"0"},{name:"游戏相关",value:4,path:"categories/游戏相关/",id:"cm1so8ni50013kipwf06sbg64",parentId:"0"},{name:"项目折腾",value:3,path:"categories/项目折腾/",id:"cm1so8ni8001gkipwgw0g217j",parentId:"0"},{name:"歌曲收集",value:1,path:"categories/歌曲收集/",id:"cm1so8nip003ekipwh17u02a4",parentId:"0"}],itemStyle:{borderColor:"#fff",borderWidth:2,emphasis:{focus:"ancestor",shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(255, 255, 255, 0.5)"}}}:{name:"文章篇数",type:"pie",radius:[30,80],roseType:"area",label:{color:color,formatter:"{b} : {c} ({d}%)"},data:[{name:"个人小记",value:18,path:"categories/个人小记/",id:"cm1so8nhs0004kipw8y7qhz7x",parentId:"0"},{name:"站点折腾",value:14,path:"categories/站点折腾/",id:"cm1so8nia001qkipw5p7p9tjr",parentId:"0"},{name:"游戏相关",value:4,path:"categories/游戏相关/",id:"cm1so8ni50013kipwf06sbg64",parentId:"0"},{name:"项目折腾",value:3,path:"categories/项目折腾/",id:"cm1so8ni8001gkipwgw0g217j",parentId:"0"},{name:"歌曲收集",value:1,path:"categories/歌曲收集/",id:"cm1so8nip003ekipwh17u02a4",parentId:"0"}],itemStyle:{emphasis:{shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(255, 255, 255, 0.5)"}}}),categoriesChart.setOption(categoriesOption),window.addEventListener("resize",(()=>{categoriesChart.resize()})),categoriesChart.on("click","series",(e=>{e.data.path&&(window.location.href="/"+e.data.path)}))</script><h2>访问统计 显示不出来请刷新页面</h2><p>站点访问量:<span id="qexo-site-pv"></span></p><p>站点访客数:<span id="qexo-site-uv"></span></p><script>loadStatistic("https://houtai.hexo.sinzmise.top")</script></div><div class="asetting" id="con-abouts"><h1>关于</h1>基于 Ariasaka Console v1.0 魔改，目前功能尚未完善<br>欢迎<a href="/comments">反馈！</a></div></div></div><div class="app-refresh" id="app-refresh-setting" style="display:none"><div class="app-refresh-wrap"><label>检测到魔法屋已装修</label><a href="javascript:void(0)" onclick="location.reload(!0)"><span style="text-decoration:underline;cursor:pointer;float:right">点我查看</span></a></div></div><div id="setting-sidesl"><button class="reSettings con-rightside" title="恢复默认设置"><i class="fa fa-repeat"></i></button><div id="setting-sides"><button class="con-rightside" title="繁简转换" id="con-translate" onclick="rmf.translate()"><i class="iconfont icon-fanti"></i></button><button class="con-rightside" title="昼夜切换" id="con-mode" onclick="switchDarkMode()"><i class="fa fa-adjust"></i></button><button class="con-rightside" title="阅读模式" id="con-reading" onclick="rmf.switchReadMode()"><i class="fa fa-book-open"></i></button><button class="con-rightside" title="单双栏切换" id="con-toggleaside" onclick="toggleAside()"><i class="fas fa-arrows-alt-h"></i></button><button class="con-rightside" title="左右栏切换" id="con-toggleleftaside" onclick="switchAside()"><i class="fas fa-binoculars"></i></button><button class="con-rightside" title="全屏" id="con-fullscreen" onclick="fullScreen()"><i class="fas fa-expand"></i></button></div></div></div><div class="js-pjax" id="rightMenu"><div class="rightMenu-group rightMenu-small"><a class="rightMenu-item" href="javascript:window.history.back();"><i class="fa fa-arrow-left"></i></a><a class="rightMenu-item" href="javascript:window.history.forward();"><i class="fa fa-arrow-right"></i></a><a class="rightMenu-item" href="javascript:window.location.reload();"><i class="fa fa-refresh"></i></a><a class="rightMenu-item" href="javascript:rmf.scrollToTop();"><i class="fa fa-arrow-up"></i></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-text"><a class="rightMenu-item" href="javascript:rmf.copySelect();"><i class="fa fa-copy"></i><span>复制</span></a><a class="rightMenu-item" href="javascript:window.open(&quot;https://www.bing.com/?q=&quot;+window.getSelection().toString());window.location.reload();"><i class="iconfont pj-historical icon-pjh-bing"></i><span>必应搜索</span></a><a class="rightMenu-item" href="javascript:rmf.searchinThisPage();"><i class="fas fa-search"></i><span>站内搜索</span></a><a class="rightMenu-item" href="#post-comment" onclick="rmf.yinyong()"><i class="fa-solid fa-message"></i><span>引用文本评论</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-too"><a class="rightMenu-item" href="javascript:window.open(window.getSelection().toString());window.location.reload();"><i class="fa fa-link"></i><span>转到链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-paste"><a class="rightMenu-item" href="javascript:rmf.paste()"><i class="fa fa-copy"></i><span>粘贴</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-post"><a class="rightMenu-item" href="#post-comment"><i class="fas fa-comment"></i><span>转到评论</span></a><a class="rightMenu-item" href="javascript:rmf.copyWordsLink()"><i class="fa fa-link"></i><span>复制本文地址</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-to"><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>新窗口打开</span></a><a class="rightMenu-item" id="menu-too" href="javascript:rmf.open()"><i class="fa fa-link"></i><span>转到链接</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-img"><a class="rightMenu-item" href="javascript:rmf.saveAs()"><i class="fa fa-download"></i><span>保存图片</span></a><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>新窗口打开</span></a><a class="rightMenu-item" href="javascript:rmf.click()"><i class="fa fa-arrows-alt"></i><span>全屏显示</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制图片链接</span></a></div><div class="rightMenu-group rightMenu-line"><a class="rightMenu-item" href="javascript:toRandomPost()"><i class="fa fa-paper-plane"></i><span>随便逛逛</span></a><a class="rightMenu-item" href="javascript:rmf.switchDarkMode();"><i class="fa fa-moon"></i><span>浅深转换</span></a><a class="rightMenu-item" href="javascript:rmf.translate();"><i class="iconfont icon-fanti"></i><span>简繁转换</span></a><a class="rightMenu-item" href="javascript:toggleWinbox();"><i class="fas fa-cog"></i><span>设置</span></a><a class="rightMenu-item" href="javascript:fullScreen();"><i class="fas fa-expand"></i><span>全屏显示</span></a></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script async src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus/lib/assets/carousel-touch.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/echarts/dist/echarts.min.js"></script><script src="/js/tw_cn.js"></script><script src="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script async src="//at.alicdn.com/t/c/font_4199232_yyljyxsak2m.js"></script><script async src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-tag-plugins-plus/lib/assets/issues.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"><script>(()=>{const t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://tk.pl.blog.sinzmise.top/",region:"",onCommentLoaded:()=>{btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null)),GLOBAL_CONFIG_SITE.isPost&&(()=>{const t=document.getElementById("twikoo-count");t&&twikoo.getCommentsCount({envId:"https://tk.pl.blog.sinzmise.top/",region:"",urls:[window.location.pathname],includeReply:!1}).then((o=>{t.textContent=o[0].count})).catch((t=>{console.error(t)}))})()},o=()=>{"object"==typeof twikoo?setTimeout(t,0):getScript("https://jsd.cdn.storisinz.site/npm/twikoo/dist/twikoo.all.min.js").then(t)};btf.loadComment(document.getElementById("twikoo-wrap"),o)})()</script><script>function loadArtalk(){function t(){window.artalkItem=Artalk.init(Object.assign({el:"#artalk-wrap",server:"https://atk.pl.blog.sinzmise.top/",site:"星空故事·魔法小屋",pageKey:location.pathname,darkMode:"auto",countEl:".artalk-count"},null))}"object"==typeof window.artalkItem?setTimeout((()=>{t()}),200):(getCSS("https://jsd.cdn.storisinz.site/npm/artalk/dist/Artalk.min.css"),"function"!=typeof Artalk?getScript("https://jsd.cdn.storisinz.site/npm/artalk/dist/Artalk.min.js").then(t):setTimeout((()=>{t()}),200))}document.getElementById("darkmode").addEventListener("click",(()=>{if("object"!=typeof window.artalkItem)return;let t="dark"===document.documentElement.getAttribute("data-theme");window.artalkItem.setDarkMode(!t)}));{function loadOtherComment(){loadArtalk()}}</script></div><script src="https://jsd.cdn.storisinz.site/npm/@ruffle-rs/ruffle"></script><script src="https://jsd.cdn.storisinz.site/gh/swfobject/swfobject@master/swfobject/swfobject.js"></script><script src="/js/welcome.js"></script><script data-pjax="" defer src="/js/custom/fixed_card_widget.js"></script><script src="/js/lunar.js"></script><script src="/js/day.js"></script><script src="https://jsd.cdn.storisinz.site/npm/sweetalert2@8.19.0/dist/sweetalert2.all.js"></script><script src="/js/autoload.js"></script><script src="/js/fps.js"></script><script src="/js/randompost.js"></script><script data-pjax="" defer src="/js/custom.js"></script><script data-pjax="" async src="/js/waterfall/waterfall.js"></script><script src="/js/about.js"></script><script src="/js/owobig.js"></script><div id="fps"></div><script defer src="/js/orlike.js"></script><script src="/js/nav.js"></script><script src="/js/console.js"></script><script src="https://jsd.cdn.storisinz.site/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script><script src="/js/rightmenu.js"></script><script async src="https://umami.status.sinzmise.top/a8f9c04189c7d6a2b6b03f4f3948ef41" data-website-id="f18a2137-2dfe-45b9-a524-21413e09bd68"></script><script async src="/js/comments.js"></script><script src="/bbs/bbs.js"></script><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/aplayer/dist/APlayer.min.css" media="print" onload='this.media="all"'><script src="https://jsd.cdn.storisinz.site/npm/aplayer/dist/APlayer.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show","#fixedcard-dashboard",".js-pjax"];var pjax=new Pjax({elements:'a:not([target="_blank"]):not([href="/bbs/"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!0,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(window.tocScrollFn&&window.removeEventListener("scroll",window.tocScrollFn),window.scrollCollect&&window.removeEventListener("scroll",scrollCollect),document.getElementById("rightside").style.cssText="opacity: ''; transform: ''",window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),"object"==typeof disqusjs&&disqusjs.destroy()})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax], .pjax-reload script").forEach((e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof chatBtnFn&&chatBtnFn(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","G-7MR59SK1DP",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><div class="pjax-reload"></div><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://jsd.cdn.storisinz.site/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><div class="app-refresh" id="app-refresh" style="position:fixed;top:-2.2rem;left:0;right:0;z-index:99999;padding:0 1rem;font-size:15px;height:2.2rem;transition:all .3s ease"><div class="app-refresh-wrap" style="display:flex;color:#fff;height:100%;align-items:center;justify-content:center"><label>✨ 星空魔法屋站点已更新！ 👉</label><a href="javascript:void(0)" onclick="location.reload(!0)"><span style="color:#fff;text-decoration:underline;cursor:pointer">⭐点我刷新⭐</span></a></div></div><script>function showNotification(){if(GLOBAL_CONFIG.Snackbar){var e="light"===document.documentElement.getAttribute("data-theme")?GLOBAL_CONFIG.Snackbar.bgLight:GLOBAL_CONFIG.Snackbar.bgDark,t=GLOBAL_CONFIG.Snackbar.position;Snackbar.show({text:"✨ 星空魔法屋又装修了 👉",backgroundColor:e,duration:5e5,pos:t,actionText:"⭐点我查看⭐",actionTextColor:"#fff",onActionClick:function(e){location.reload(!0)}}),document.getElementById("app-refresh-setting").style.display="block"}else{var o=`top: 0; background: ${"light"===document.documentElement.getAttribute("data-theme")?"#49b1f5":"#1f1f1f"};`;document.getElementById("app-refresh").style.cssText=o}}"serviceWorker"in navigator&&(navigator.serviceWorker.controller&&navigator.serviceWorker.addEventListener("controllerchange",(function(){showNotification()})),window.addEventListener("load",(function(){navigator.serviceWorker.register("/sw.js")})))</script><script async data-pjax="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="fixedcard-dashboard"><button class="fixedcard-activebtn" type="button" title="用户信息" onclick="FixedCardWidget(&quot;class&quot;,&quot;card-info&quot;,&quot;0&quot;)"><i class="fas fa-address-book"></i></button><button class="fixedcard-activebtn" type="button" title="电子钟" onclick="FixedCardWidget(&quot;class&quot;,&quot;card-clock-weather&quot;,&quot;0&quot;)"><i class="fas fa-cloud-sun"></i></button><button class="fixedcard-activebtn" type="button" title="最新文章" onclick="FixedCardWidget(&quot;class&quot;,&quot;card-recent-post&quot;,&quot;0&quot;)"><i class="fas fa-history"></i></button><div class="fixedcard-user-avatar fixedcard-activebtn" onclick="RemoveFixedCardWidget()"><img class="fixedcard-user-avatar-img" src="/img/avatar.png" title="王九弦SZ·Ninty"></div></div></div></body></html>