hexo-theme-solitude 3.0.17 → 3.0.19

package/SECURITY.md

@@ -2,7 +2,7 @@
 
 ## Reporting a Vulnerability
 
-If you discover a vulnerability, please report it privately through the [GitHub Security tab](https://github.com/everfu/hexo-theme-solitude/security/advisories/new) on the appropriate repository. For detailed instructions, refer to this [documentation](https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing-information-about-vulnerabilities/privately-reporting-a-security-vulnerability#privately-reporting-a-security-vulnerability). If you're unable to report via GitHub, you can email us at [o@everfu.org](mailto:o@everfu.org).
+If you discover a vulnerability, please report it privately through the [GitHub Security tab](https://github.com/everfu/hexo-theme-solitude/security/advisories/new) on the appropriate repository. For detailed instructions, refer to this [documentation](https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing-information-about-vulnerabilities/privately-reporting-a-security-vulnerability#privately-reporting-a-security-vulnerability). If you're unable to report via GitHub, you can email us at [o@everfu.org](mailto:o@efu.me).
 
 We take security seriously and will verify and resolve any reported vulnerabilities promptly.
 

package/layout/includes/footer.pug

@@ -54,6 +54,18 @@ div#footer-bar
                     a.footer-bar-link(href=url_for("/"))
                         img.author-avatar(src=url_for(theme.site.icon))
                         = config.author
+                .beian-group
+                    if theme.footer.beian
+                        - var beian = theme.footer.beian || []
+                        each item in beian
+                            a.footer-bar-link(href=url_for(item.url), title=item.name)
+                                if item.icon 
+                                    img.beian-icon(src=url_for(item.icon), alt=item.name)
+                                span.beian-name= item.name
+                    a.footer-bar-link(href=_p('hexo'))
+                        = _p('framework_by') + 'Hexo'
+                    a.footer-bar-link(href=_p('repo'))
+                        = _p('theme_by') + 'Solitude'
             else
                 div.copyright © #{moment(theme.aside.siteinfo.runtime).year()} - #{new Date().getFullYear()} By 
                     a.footer-bar-link(href=url_for("/"))

package/layout/includes/widgets/page/about/hobbies.pug

@@ -22,17 +22,38 @@ if games
                             .tips= game.tips_right
 
 if site.data.about.likes
-    - const likes = site.data.about.likes
-    .author-content
-        each like in likes
-            .author-content-item(class=like.type, style=`background: url(${like.bg}) no-repeat center; background-size: cover;`)
-                .card-content
-                    .author-content-item-tips= like.tips
-                    span.author-content-item-title= like.title
-                    .content-bottom
-                        .tips= like.subtips
-                        if like.button
-                            .banner-button-group
-                                a.banner-button(href=url_for(like.button_link))
-                                    i.solitude.fas.fa-circle-chevron-right
-                                    span.banner-button-text= like.button_text
+  - const likes = site.data.about.likes
+  .author-content
+    each like in likes
+      if like.type === 'comic'
+        .author-content-item.comic
+            .card-content
+             .author-content-item-tips= like.tips
+             span.author-content-item-title= like.title
+             .content-bottom
+              if like.subtips
+                .tips= like.subtips
+              if like.button
+                .banner-button-group
+                  a.banner-button(href=url_for(like.button_link))
+                    i.solitude.fas.fa-circle-chevron-right
+                    span.banner-button-text= like.button_text
+             .comic-box
+              each item in like.list
+               a.comic-item(href=item.href target="_blank", rel="noopener noreferrer", title=item.name)
+                .comic-item-cover
+                 img.nolazyload(src=item.cover, alt=item.name)
+ 
+      else
+        .author-content-item(class=like.type style=`background: url(${like.bg}) no-repeat center/cover`)
+          .card-content
+            .author-content-item-tips= like.tips
+            span.author-content-item-title= like.title
+            .content-bottom
+              if like.subtips
+                .tips= like.subtips
+              if like.button
+                .banner-button-group
+                  a.banner-button(href=url_for(like.button_link))
+                    i.solitude.fas.fa-circle-chevron-right
+                    span.banner-button-text= like.button_text

package/layout/includes/widgets/page/recentcomment/artalk.pug

@@ -57,10 +57,10 @@ script(pjax).
                                             ${i.title}</div>
                                         </div>
                                     `).join('') : `#{__("console.newest_comment.empty")}`
-            if (typeof sco !== 'undefined') sco.changeTimeFormat(document.querySelectorAll('.comment-time'))
+            if (typeof utils !== 'undefined') utils.diffDateFormat(document.querySelectorAll('.comment-time'))
             else {
-                document.addEventListener('pjax:complete', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
-                document.addEventListener('DOMContentLoaded', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('pjax:complete', () => utils.diffDateFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('DOMContentLoaded', () => utils.diffDateFormat(document.querySelectorAll('.comment-time')))
             }
         }
 

package/layout/includes/widgets/page/recentcomment/twikoo.pug

@@ -64,10 +64,10 @@ script(pjax).
                     ${i.title}</div>
                 </div>
             `).join('') : `#{__("console.newest_comment.empty")}`
-            if (typeof sco !== 'undefined') sco.changeTimeFormat(document.querySelectorAll('.comment-time'))
+            if (typeof utils !== 'undefined') utils.diffDateFormat(document.querySelectorAll('.comment-time'))
             else {
-                document.addEventListener('pjax:complete', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
-                document.addEventListener('DOMContentLoaded', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('pjax:complete', () => utils.diffDateFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('DOMContentLoaded', () => utils.diffDateFormat(document.querySelectorAll('.comment-time')))
             }
         }
 

package/layout/includes/widgets/page/recentcomment/valine.pug

@@ -62,10 +62,10 @@ script(pjax).
                             ${i.title}</div>
                         </div>
                     `).join('') : `#{__("console.newest_comment.empty")}`
-            if (typeof sco !== 'undefined') sco.changeTimeFormat(document.querySelectorAll('.comment-time'))
+            if (typeof utils !== 'undefined') utils.diffDateFormat(document.querySelectorAll('.comment-time'))
             else {
-                document.addEventListener('pjax:complete', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
-                document.addEventListener('DOMContentLoaded', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('pjax:complete', () => utils.diffDateFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('DOMContentLoaded', () => utils.diffDateFormat(document.querySelectorAll('.comment-time')))
             }
         }
 

package/layout/includes/widgets/page/recentcomment/waline.pug

@@ -53,10 +53,10 @@ script(pjax).
                                     ${i.title}</div>
                                 </div>
                             `).join('') : `#{__("console.newest_comment.empty")}`
-            if (typeof sco !== 'undefined') sco.changeTimeFormat(document.querySelectorAll('.comment-time'))
+            if (typeof utils !== 'undefined') utils.diffDateFormat(document.querySelectorAll('.comment-time'))
             else {
-                document.addEventListener('pjax:complete', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
-                document.addEventListener('DOMContentLoaded', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('pjax:complete', () => utils.diffDateFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('DOMContentLoaded', () => utils.diffDateFormat(document.querySelectorAll('.comment-time')))
             }
         }
 

package/layout/includes/widgets/third-party/music.pug

@@ -1,3 +1,8 @@
 div.needEndHide#nav-music
-  #nav-music-hoverTips(onclick='sco.musicToggle()')= __('music.hit')
+  #nav-music-hoverTips
+    i#music-prev.music-control-btn.fas.fa-backward-step(onclick='sco.musicSkipBack()')
+    i#music-pause.music-control-btn.fas.fa-pause(onclick='sco.musicToggle()')
+    i#music-play.music-control-btn.fas.fa-play(onclick='sco.musicToggle()')
+    i#music-next.music-control-btn.fas.fa-forward-step(onclick='sco.musicSkipForward()')
+
   meting-js(id=theme.capsule.id server=theme.capsule.server type=theme.capsule.type mutex="true" preload="none" theme="var(--efu-main)" data-lrctype="0" order="random" volume=theme.capsule.volume)

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "hexo-theme-solitude",
-  "version": "3.0.17",
+  "version": "3.0.19",
   "description": "A beautiful, powerful, and efficient Hexo theme developed by everfu.",
   "main": "package.json",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "keywords": [
     "hexo",
     "theme",
@@ -26,8 +29,5 @@
   },
   "homepage": "https://solitude.js.org",
   "author": "Hexo-Theme-Solitude<o@efu.me>",
-  "license": "Apache-2.0",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  }
-}
+  "license": "Apache-2.0"
+}

package/scripts/helper/inject_head_js.js

@@ -3,10 +3,10 @@
  * inject is to head
  */
 
-'use strict';
+"use strict";
 
-hexo.extend.helper.register('inject_head_js', function () {
-    const createJS = () => `
+hexo.extend.helper.register("inject_head_js", function () {
+  const createJS = () => `
         const saveToLocal = {
             set: function setWithExpiry(key, value, ttl) {
                 if (ttl === 0)
@@ -85,13 +85,19 @@ hexo.extend.helper.register('inject_head_js', function () {
               utils.addGlobalFn('pjax', () => {
                   ele.removeEventListener(event, fn, option)
               })
-          },
+            },
+            diffDateFormat: (selector) => {
+                selector.forEach(item => {
+                    const date = new Date(item.getAttribute('datetime') || item.textContent);
+                    item.textContent = (date.getMonth() + 1).toString()+'/'+date.getDate().toString();
+                });
+            },
         }
-    `
-    return `<script>(()=>{${createJS()}})()</script>`
-})
+    `;
+  return `<script>(()=>{${createJS()}})()</script>`;
+});
 
-hexo.extend.helper.register('packageVersion', function () {
-    const {version} = require('../../package.json')
-    return version
-})
+hexo.extend.helper.register("packageVersion", function () {
+  const { version } = require("../../package.json");
+  return version;
+});

package/source/css/_components/capsule.styl

@@ -10,7 +10,7 @@
   0%, 100%
     box-shadow: 0 0px 12px -3px var(--efu-none)
   50%
-    box-shadow: 0 0px 12px 0px var(--efu-main)
+    box-shadow: 0 0px 12px 0px var(--efu-music)
 
 @keyframes lightBar
   0%, 100%
@@ -34,15 +34,12 @@
   cursor: pointer
   transition: all 0.5s, left 0s
   transform-origin: left bottom
-  box-shadow: var(--efu-shadow-border)
   border-radius: 40px
   overflow: hidden
-
-  &:active
-    transform: scale(0.97)
+  .aplayer-button
+    display none
 
   &.playing
-    border: var(--style-border)
     box-shadow: 0 0px 12px -3px var(--efu-none)
     animation: playingShadow 5s linear infinite
 
@@ -56,20 +53,38 @@
       .aplayer-info
         color: var(--efu-white)
 
-    #nav-music-hoverTips
-      width: 0
-
     .aplayer
-      background: var(--efu-main)
-      border: var(--style-border-hover)
+      background: var(--efu-music)
       backdrop-filter: saturate(180%) blur(20px)
       transform: translateZ(0)
 
     .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played
       animation-play-state: running
 
-  &:hover:not(.playing) #nav-music-hoverTips
+  &:hover #nav-music-hoverTips
     opacity: 1
+  
+  &:hover:not(.playing)
+    #nav-music-hoverTips
+      justify-content: center
+      padding-right: 0
+    #music-play
+      display: flex
+      padding 5px 10px
+      width 100%
+      height 100%
+      justify-content center
+      align-items center
+
+  &.playing
+    #nav-music-hoverTips
+      width 180px
+      right 0
+      left auto
+      background linear-gradient(to left,var(--efu-music) 60%,transparent)
+    &:hover
+      #nav-music-hoverTips > i:not(#music-play)
+        display: block
 
   .aplayer.aplayer-withlrc
     .aplayer-pic
@@ -86,14 +101,15 @@
     .aplayer-info
       height: 100%
       color: var(--efu-fontcolor)
-      margin: 0
+      margin 0
+      margin-right 8px
       padding: 0
       display: flex
       align-items: center
 
   #nav-music-hoverTips
     color: var(--efu-white)
-    background: var(--efu-main)
+    background: var(--efu-music)
     width: 100%
     height: 100%
     position: absolute
@@ -107,15 +123,22 @@
     font-size: 12px
     z-index: 2
     transition: 0.3s
+    justify-content flex-end 
+    gap 1rem
+    padding-right 1rem
+
+    i
+      font-size: 16px
+      display none
+      cursor pointer
 
   .aplayer
-    background: var(--efu-card-bg)
+    background: var(--efu-music)
     border-radius: 60px
     height: 41px
     display: flex
     margin: 0
     transition: 0.3s
-    border: var(--style-border)
     box-shadow: none
 
     .aplayer-notice,
@@ -133,7 +156,8 @@
         margin: 0
         display: flex
         align-items: center
-        padding: 0 12px 0 8px
+        padding-bottom 0
+        padding-left 8px
         cursor: pointer
         z-index: 1
         height: 100%
@@ -148,13 +172,14 @@
           text-overflow: ellipsis
           transition: 0.3s
           user-select: none
+          color var(--efu-white)
 
       .aplayer-controller
-        position: absolute
-        width: 100%
-        height: 100%
-        top: 0
-        left: 0
+        // position: absolute
+        // width: 100%
+        // height: 100%
+        // top: 0
+        // left: 0
 
         .aplayer-bar-wrap
           margin: 0
@@ -220,7 +245,6 @@
 
   &.stretch .aplayer.aplayer-withlrc .aplayer-lrc
     width: 200px
-    margin-left: 8px
     opacity: 1
 
 .aplayer-thumb

package/source/css/_global/index.styl

@@ -57,6 +57,7 @@
   --hlscrollbar-bg #121212
   --gap .5rem
   --radius 12px
+  --efu-music var(--efu-main)
 
 body
   position relative

package/source/css/_layout/article-container.styl

@@ -1,10 +1,5 @@
 .article-container
   overflow-wrap break-word
-  #post &
-    border var(--style-border)
-    border-radius var(--radius)
-    box-shadow var(--efu-shadow-border)
-    background var(--efu-card-bg)
   +maxWidth768()
     overflow hidden
 

package/source/css/_layout/console.styl

@@ -30,10 +30,11 @@
     display flex
     justify-content center
     align-items center
-    margin 0 30px
     transform translateY(20px)
     transition .3s
-    max-width 1400px
+    gap .5rem
+    max-height calc(100dvh - 180px)
+    max-width calc(100% - 64px)
 
     +maxWidth1300()
       justify-content center
@@ -50,10 +51,8 @@
       transform translateY(0)
       opacity 1
       transition-delay .1s
-      max-height 80%
 
   .console-card-group-left
-    margin-right .5rem
     width 40%
     height 100%
 
@@ -77,7 +76,7 @@
     overflow hidden
     border var(--style-border)
     box-shadow var(--efu-shadow-border)
-    padding 40px
+    padding 32px 36px 36px 36px
     gap 24px
     display: flex
     flex-direction: column

package/source/css/_layout/recent-post.styl

@@ -8,10 +8,8 @@
       padding 0
 
 #tag-page-tags+#recent-posts
-  margin-top: calc(64px - 0.5rem)
-
-  +maxWidth768()
-    margin-top: calc(74px - 0.5rem)
+  +minWidth768()
+    margin-top calc(64px - 0.5rem)
 
 if hexo-config('index_post_list.direction') == "column"
   .recent-post-item
@@ -29,8 +27,6 @@ if hexo-config('index_post_list.direction') == "column"
 
       +maxWidth1300()
         margin-bottom .5rem
-        #tag &:first-child
-          margin-top: 2.5rem
 
       +maxWidth768()
         border-radius 12px

package/source/css/_page/_about/like.styl

@@ -3,7 +3,6 @@
     background-size cover
     min-height 230px
     color var(--efu-white)
-
     &::after
       box-shadow 0 -69px 203px 11px #050b20 inset
       position absolute
@@ -18,7 +17,6 @@
     min-height 400px
     color var(--efu-white)
     overflow hidden
-
     &::after
       box-shadow 0 -69px 203px 11px #0e0e0e inset
       position absolute
@@ -26,4 +24,69 @@
       width 100%
       height 100%
       top 0
-      left 0
+      left 0
+
+  .author-content-item.comic
+    min-height 400px
+    color var(--efu-white)
+    position relative
+    
+    .comic-box
+      width 110%
+      height 100%
+      display flex
+      position absolute
+      left 50%
+      top 0
+      transform translateX(-50%)
+      &::after
+        box-shadow 0 -69px 203px 11px #04120f inset
+        position absolute
+        content ''
+        width 100%
+        height 100%
+        top 0
+        left 0
+        pointer-events: none;
+    
+    .author-content-item-tips,
+    .author-content-item-title,
+    .content-bottom
+      z-index 3
+      color var(--efu-white)
+    
+    .comic-item
+      height 100%
+      color var(--efu-white)
+      width 20%
+      transform skew(-10deg, 0deg)
+      transition 0.8s
+      position relative
+      overflow hidden
+      &:hover
+        width 46%
+        .comic-item-cover
+          left 16%
+          transform skew(10deg, 0deg) scale(1.6)
+
+      .comic-item-cover
+        position absolute
+        top 0
+        left -50%
+        height 100%
+        transform skew(10deg, 0deg)
+        object-fit cover
+        transition scale 0.2s, all 0.8s
+        img
+          height 100%
+          max-width none
+          transition 0.8s
+
+  .author-content-item.comic
+    .comic-box
+      +maxWidth1400()
+          width 120%
+          height 100%      
+      +maxWidth768()
+          width 109%
+          height 100%

package/source/css/_page/recentcomment.styl

@@ -1,13 +1,11 @@
 div.console_recentcomments
   display flex
   flex-wrap wrap
-  gap 12px
+  gap 8px
   min-height 100px
   width 100%
-
-  +maxWidth1300()
-    overflow-y scroll
-    scrollbar-width none
+  overflow-y scroll
+  scrollbar-width none
 
 .comment-card
   position relative
@@ -24,7 +22,12 @@ div.console_recentcomments
   flex-direction column
 
   .console-card &
-    width calc(100% / 2 - 8px)
+    width calc(100% / 2 - 4px)
+    min-width 140px
+    min-height calc(100% / 3 - 6px)
+
+    +maxWidth1200()
+      width 100%
 
   +maxWidth1300()
     min-width 100%

package/source/css/_page/tag.styl

@@ -18,6 +18,8 @@
     transition .1s ease-out
     border-radius 12px
     border var(--style-border-always)
+    +maxWidth768()
+      display none
 
     &:hover
       max-height 1000px

package/source/css/_post/index.styl

@@ -114,4 +114,9 @@ if hexo-config('post.ai.enable')
     100% 
         opacity 1
         transform translateY(0)
-    
+    
+#post
+  border var(--style-border)
+  border-radius var(--radius)
+  box-shadow var(--efu-shadow-border)
+  background var(--efu-card-bg)

package/source/js/covercolor/api.js

@@ -1,36 +1,60 @@
-const coverColor = () => {
-    const pageColor = PAGE_CONFIG.color;
-    if (pageColor) {
-        setThemeColors(pageColor);
-        return;
+const coverColor = (music = false) => {
+    if (music) {
+        var coverPath = document.querySelector("#nav-music .aplayer-pic").style.backgroundImage;
+        const coverPathMatch = /url\("([^"]+)"\)/.exec(coverPath);
+        coverPath = coverPathMatch ? coverPathMatch[1] : '';
+        if (coverPath) {
+            handleApiColor(coverPath,music);
+        }
     }
-    
-    const path = document.getElementById("post-cover")?.src;
-    if (path) {
-        handleApiColor(path);
-    } else {
-        setDefaultThemeColors();
+    else {
+        const pageColor = PAGE_CONFIG.color;
+        if (pageColor) {
+            setThemeColors(pageColor);
+            return;
+        }
+        
+        const path = document.getElementById("post-cover")?.src;
+        if (path) {
+            handleApiColor(path);
+        } else {
+            setDefaultThemeColors();
+        }
     }
 }
 
-function handleApiColor(path) {
+function handleApiColor(path, music = false) {
     const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
     if (cacheGroup.postcolor?.[path]) {
         setThemeColors(cacheGroup.postcolor[path].value);
     } else {
         img2color(path);
     }
+    if (music) {
+        img2color(path, music);
+    }
+}
+
+function setMusicColor(value) {
+    if (!value) return setDefaultThemeColors();
+    const item = document.querySelector("#nav-music")
+    item.style.setProperty('--efu-music', value);
 }
 
-function img2color(src) {
+function img2color(src, music = false) {
     fetch(`${coverColorConfig.api}${encodeURIComponent(src)}`)
         .then(response => {
             if (!response.ok) throw new Error('Network response was not ok');
             return response.json();
         })
         .then(data => {
-            setThemeColors(data.RGB);
-            cacheColor(src, data.RGB);
+            if(music) {
+                setMusicColor(data.RGB);
+            }
+            else {
+                setThemeColors(data.RGB);
+                cacheColor(src, data.RGB);
+            }
         })
         .catch(error => console.error('Error fetching color:', error));
 }

package/source/js/covercolor/local.js

@@ -1,9 +1,19 @@
-const coverColor = () => {
-    const pageColor = PAGE_CONFIG.color || document.getElementById("post-cover")?.src;
-    if (pageColor) {
-        localColor(pageColor);
-    } else {
-        setDefaultThemeColors();
+const coverColor = (music = false) => {
+    if (music) {
+        var coverPath = document.querySelector("#nav-music .aplayer-pic").style.backgroundImage;
+        const coverPathMatch = /url\("([^"]+)"\)/.exec(coverPath);
+        coverPath = coverPathMatch ? coverPathMatch[1] : '';
+        if (coverPath) {
+            localColor(coverPath,music);
+        }
+    }
+    else {
+        const pageColor = PAGE_CONFIG.color || document.getElementById("post-cover")?.src;
+        if (pageColor) {
+            localColor(pageColor);
+        } else {
+            setDefaultThemeColors();
+        }
     }
 }
 
@@ -20,13 +30,18 @@ const setDefaultThemeColors = () => {
     initThemeColor();
 }
 
-const localColor = (path) => {
+const localColor = (path, music = false) => {
     const colorThief = new ColorThief();
     const img = new Image();
     img.crossOrigin = "Anonymous";
     img.onload = () => {
         const color = colorThief.getColor(img);
-        setThemeColors(rgbToHex(color), ...color);
+        if(music) {
+            setMusicColor(rgbToHex(color));
+        }
+        else{
+            setThemeColors(rgbToHex(color), ...color);
+        }
     };
     img.onerror = () => console.error('Image Error');
     img.src = path;
@@ -36,6 +51,13 @@ const rgbToHex = ([r, g, b]) => {
     return '#' + [r, g, b].map(x => Math.floor(x * 0.8).toString(16).padStart(2, '0')).join('');
 }
 
+const setMusicColor = (value) => {
+    if (!value) return setDefaultThemeColors();
+    const item = document.querySelector("#nav-music")
+    item.style.setProperty('--efu-music', value);
+}
+
+
 const setThemeColors = (value, r = null, g = null, b = null) => {
     if (!value) return setDefaultThemeColors();
 

package/source/js/main.js

@@ -199,48 +199,47 @@ const sco = {
       window.scroll({ top: targetPosition, behavior: "smooth" });
     }
   },
-  musicToggle(isMeting = true) {
-    if (!this.isMusicBind) {
-      this.musicBind();
+  musicBind() {
+    const $music = document.querySelector("#nav-music meting-js");
+    if ($music && $music.aplayer) { 
+      this.isMusicBind = true;
+      $music.onclick = () => this.musicPlaying && this.musicToggle(false);
+      $music.aplayer.on('loadeddata', () =>{
+        coverColor(true);
+      })
     }
+  },
+  musicToggle(isMeting = true) {
+    if (!this.isMusicBind) this.musicBind();
+    
     const $music = document.querySelector("#nav-music");
     const $meting = document.querySelector("meting-js");
     const $console = document.getElementById("consoleMusic");
-    const $rmText = document.querySelector("#menu-music-toggle span");
-    const $rmIcon = document.querySelector("#menu-music-toggle i");
-
+    
     this.musicPlaying = !this.musicPlaying;
+    
     $music.classList.toggle("playing", this.musicPlaying);
     $music.classList.toggle("stretch", this.musicPlaying);
     $console?.classList.toggle("on", this.musicPlaying);
-
+    
     if (typeof rm !== "undefined" && rm?.menuItems.music[0]) {
-      $rmText.textContent = this.musicPlaying
+      const $rmText = document.querySelector("#menu-music-toggle span");
+      const $rmIcon = document.querySelector("#menu-music-toggle i");
+      $rmText.textContent = this.musicPlaying 
         ? GLOBAL_CONFIG.right_menu.music.stop
         : GLOBAL_CONFIG.right_menu.music.start;
-      $rmIcon.className = this.musicPlaying
-        ? "solitude fas fa-pause"
-        : "solitude fas fa-play";
+      $rmIcon.className = `solitude fas ${this.musicPlaying ? 'fa-pause' : 'fa-play'}`;
     }
 
-    if (isMeting) {
+    if (isMeting && $meting) {
       this.musicPlaying ? $meting.aplayer.play() : $meting.aplayer.pause();
     }
   },
-  musicBind() {
-    const $music = document.querySelector("#nav-music");
-    const $name = document.querySelector("#nav-music .aplayer-music");
-    const $button = document.querySelector("#nav-music .aplayer-button");
-
-    $name?.addEventListener("click", () => {
-      $music.classList.toggle("stretch");
-    });
-
-    $button?.addEventListener("click", () => {
-      this.musicToggle(false);
-    });
-
-    this.isMusicBind = true;
+  musicSkipBack() {
+    document.querySelector("meting-js")?.aplayer?.skipBack();
+  },
+  musicSkipForward() {
+    document.querySelector("meting-js")?.aplayer?.skipForward();
   },
   switchCommentBarrage() {
     const commentBarrageElement = document.querySelector(".comment-barrage");
@@ -870,10 +869,6 @@ const scrollFnToDo = () => {
   if (toc) {
     const $cardTocLayout = document.getElementById("card-toc");
     const $cardToc = $cardTocLayout.querySelector(".toc-content");
-    const $tocLink = $cardToc.querySelectorAll(".toc-link");
-    const $tocPercentage = $cardTocLayout.querySelector(".toc-percentage");
-    const isExpand = $cardToc.classList.contains("is-expand");
-
     const tocItemClickFn = (e) => {
       const target = e.target.closest(".toc-link");
       if (!target) return;
@@ -915,6 +910,7 @@ window.refreshFn = () => {
     sco.tagPageActive,
     sco.categoriesBarActive,
     sco.listenToPageInputPress,
+    sco.musicBind,
     sco.addNavBackgroundInit,
     sco.refreshWaterFall,
   ].forEach((fn) => fn());

package/source/js/utils.js

@@ -1,188 +1,218 @@
 (() => {
-    const utilsFn = {
-        throttle: (func, wait, {leading = true, trailing = true} = {}) => {
-            let timeout, previous = 0;
-            const later = (context, args) => {
-                timeout = previous = leading === false ? 0 : Date.now();
-                func.apply(context, args);
-            };
-            return function () {
-                const now = Date.now();
-                if (!previous && leading === false) previous = now;
-                const remaining = wait - (now - previous);
-                if (remaining <= 0 || remaining > wait) {
-                    if (timeout) clearTimeout(timeout);
-                    later(this, arguments);
-                } else if (!timeout && trailing !== false) {
-                    timeout = setTimeout(() => later(this, arguments), remaining);
-                }
-            };
-        },
-        fadeIn: (ele, time) => {
-            ele.style.display = 'block';
-            ele.style.animation = `to_show ${time}s`;
-        },
-        fadeOut: (ele, time) => {
-            const resetStyles = () => {
-                ele.style.display = 'none';
-                ele.style.animation = '';
-                ele.removeEventListener('animationend', resetStyles);
-            };
-            ele.addEventListener('animationend', resetStyles);
-            ele.style.animation = `to_hide ${time}s`;
-        },
-        snackbarShow: (text, showAction = false, duration = 5000) => {
-            Snackbar.show({ text, showAction, duration, pos: 'top-center' });
-        },
-        copy: async (text) => {
-            const message = await navigator.clipboard.writeText(text)
-                .then(() => GLOBAL_CONFIG.lang.copy.success)
-                .catch(() => GLOBAL_CONFIG.lang.copy.error);
-            utils.snackbarShow(message, false, 2000);
-        },
-        getEleTop: ele => {
-            let actualTop = ele.offsetTop;
-            while (ele.offsetParent) {
-                ele = ele.offsetParent;
-                actualTop += ele.offsetTop;
-            }
-            return actualTop;
-        },
-        siblings: (ele, selector) => {
-            return [...ele.parentNode.children].filter(child => 
-                child !== ele && (!selector || child.matches(selector))
-            );
-        },
-        randomNum: length => Math.floor(Math.random() * length),
-        timeDiff: (timeObj, today) => Math.floor((today.getTime() - timeObj.getTime()) / (1000 * 3600 * 24)),
-        scrollToDest: (pos, time = 500) => {
-            const currentPos = window.pageYOffset;
-            const isNavFixed = document.getElementById('page-header').classList.contains('nav-fixed');
-            pos = currentPos > pos || isNavFixed ? pos - 70 : pos;
+  const utilsFn = {
+    throttle: (func, wait, { leading = true, trailing = true } = {}) => {
+      let timeout,
+        previous = 0;
+      const later = (context, args) => {
+        timeout = previous = leading === false ? 0 : Date.now();
+        func.apply(context, args);
+      };
+      return function () {
+        const now = Date.now();
+        if (!previous && leading === false) previous = now;
+        const remaining = wait - (now - previous);
+        if (remaining <= 0 || remaining > wait) {
+          if (timeout) clearTimeout(timeout);
+          later(this, arguments);
+        } else if (!timeout && trailing !== false) {
+          timeout = setTimeout(() => later(this, arguments), remaining);
+        }
+      };
+    },
+    fadeIn: (ele, time) => {
+      ele.style.display = "block";
+      ele.style.animation = `to_show ${time}s`;
+    },
+    fadeOut: (ele, time) => {
+      const resetStyles = () => {
+        ele.style.display = "none";
+        ele.style.animation = "";
+        ele.removeEventListener("animationend", resetStyles);
+      };
+      ele.addEventListener("animationend", resetStyles);
+      ele.style.animation = `to_hide ${time}s`;
+    },
+    snackbarShow: (text, showAction = false, duration = 5000) => {
+      Snackbar.show({ text, showAction, duration, pos: "top-center" });
+    },
+    copy: async (text) => {
+      const message = await navigator.clipboard
+        .writeText(text)
+        .then(() => GLOBAL_CONFIG.lang.copy.success)
+        .catch(() => GLOBAL_CONFIG.lang.copy.error);
+      utils.snackbarShow(message, false, 2000);
+    },
+    getEleTop: (ele) => {
+      let actualTop = ele.offsetTop;
+      while (ele.offsetParent) {
+        ele = ele.offsetParent;
+        actualTop += ele.offsetTop;
+      }
+      return actualTop;
+    },
+    siblings: (ele, selector) => {
+      return [...ele.parentNode.children].filter(
+        (child) => child !== ele && (!selector || child.matches(selector))
+      );
+    },
+    randomNum: (length) => Math.floor(Math.random() * length),
+    timeDiff: (timeObj, today) =>
+      Math.floor((today.getTime() - timeObj.getTime()) / (1000 * 3600 * 24)),
+    scrollToDest: (pos, time = 500) => {
+      const currentPos = window.pageYOffset;
+      const isNavFixed = document
+        .getElementById("page-header")
+        .classList.contains("nav-fixed");
+      pos = currentPos > pos || isNavFixed ? pos - 70 : pos;
 
-            if ('scrollBehavior' in document.documentElement.style) {
-                window.scrollTo({ top: pos, behavior: 'smooth' });
-                return;
-            }
+      if ("scrollBehavior" in document.documentElement.style) {
+        window.scrollTo({ top: pos, behavior: "smooth" });
+        return;
+      }
 
-            const distance = pos - currentPos;
-            const step = currentTime => {
-                const progress = currentTime - (start || currentTime);
-                if (progress < time) {
-                    window.scrollTo(0, currentPos + (distance * progress) / time);
-                    window.requestAnimationFrame(step);
-                } else {
-                    window.scrollTo(0, pos);
-                }
-            };
+      const distance = pos - currentPos;
+      const step = (currentTime) => {
+        const progress = currentTime - (start || currentTime);
+        if (progress < time) {
+          window.scrollTo(0, currentPos + (distance * progress) / time);
+          window.requestAnimationFrame(step);
+        } else {
+          window.scrollTo(0, pos);
+        }
+      };
 
-            window.requestAnimationFrame(step);
-        },
-        isMobile: () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
-        isHidden: e => e.offsetHeight === 0 && e.offsetWidth === 0,
-        animateIn: (ele, text) => {
-            Object.assign(ele.style, { display: 'block', animation: text });
-        },
-        animateOut: (ele, text) => {
-            const resetAnimation = () => {
-                ele.style.display = '';
-                ele.style.animation = '';
-                ele.removeEventListener('animationend', resetAnimation);
-            };
-            ele.addEventListener('animationend', resetAnimation);
-            ele.style.animation = text;
-        },
-        wrap: (selector, eleType, options) => {
-            const createEle = document.createElement(eleType);
-            Object.entries(options).forEach(([key, value]) => createEle.setAttribute(key, value));
-            selector.parentNode.insertBefore(createEle, selector);
-            createEle.appendChild(selector);
-        },
-        lazyloadImg: () => {
-            window.lazyLoadInstance = new LazyLoad({
-                elements_selector: 'img',
-                threshold: 0,
-                data_src: 'lazy-src',
-                callback_error: img => img.src = GLOBAL_CONFIG.lazyload.error
-            });
-        },
-        lightbox: function (selector) {
-            const lightboxType = GLOBAL_CONFIG.lightbox;
-            const options = {
-                class: 'fancybox',
-                'data-fancybox': 'gallery',
-            };
+      window.requestAnimationFrame(step);
+    },
+    isMobile: () =>
+      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent
+      ),
+    isHidden: (e) => e.offsetHeight === 0 && e.offsetWidth === 0,
+    animateIn: (ele, text) => {
+      Object.assign(ele.style, { display: "block", animation: text });
+    },
+    animateOut: (ele, text) => {
+      const resetAnimation = () => {
+        ele.style.display = "";
+        ele.style.animation = "";
+        ele.removeEventListener("animationend", resetAnimation);
+      };
+      ele.addEventListener("animationend", resetAnimation);
+      ele.style.animation = text;
+    },
+    wrap: (selector, eleType, options) => {
+      const createEle = document.createElement(eleType);
+      Object.entries(options).forEach(([key, value]) =>
+        createEle.setAttribute(key, value)
+      );
+      selector.parentNode.insertBefore(createEle, selector);
+      createEle.appendChild(selector);
+    },
+    lazyloadImg: () => {
+      window.lazyLoadInstance = new LazyLoad({
+        elements_selector: "img",
+        threshold: 0,
+        data_src: "lazy-src",
+        callback_error: (img) => (img.src = GLOBAL_CONFIG.lazyload.error),
+      });
+    },
+    lightbox: function (selector) {
+      const lightboxType = GLOBAL_CONFIG.lightbox;
+      const options = {
+        class: "fancybox",
+        "data-fancybox": "gallery",
+      };
 
-            if (lightboxType === 'mediumZoom') {
-                mediumZoom && mediumZoom(selector, { background: "var(--efu-card-bg)" });
-            } else if (lightboxType === 'fancybox') {
-                selector.forEach(i => {
-                    if (i.parentNode.tagName !== 'A') {
-                        options.href = options['data-thumb'] = i.dataset.lazySrc || i.src;
-                        options['data-caption'] = i.title || i.alt || '';
-                        utils.wrap(i, 'a', options);
-                    }
-                });
+      if (lightboxType === "mediumZoom") {
+        mediumZoom &&
+          mediumZoom(selector, { background: "var(--efu-card-bg)" });
+      } else if (lightboxType === "fancybox") {
+        selector.forEach((i) => {
+          if (i.parentNode.tagName !== "A") {
+            options.href = options["data-thumb"] = i.dataset.lazySrc || i.src;
+            options["data-caption"] = i.title || i.alt || "";
+            utils.wrap(i, "a", options);
+          }
+        });
 
-                if (!window.fancyboxRun) {
-                    Fancybox.bind('[data-fancybox]', {
-                        Hash: false,
-                        animated: true,
-                        Thumbs: { showOnStart: false },
-                        Images: { Panzoom: { maxScale: 4 } },
-                        Carousel: { transition: 'slide' },
-                        Toolbar: {
-                            display: {
-                                left: ['infobar'],
-                                middle: ['zoomIn', 'zoomOut', 'toggle1to1', 'rotateCCW', 'rotateCW', 'flipX', 'flipY'],
-                                right: ['slideshow', 'thumbs', 'close']
-                            }
-                        },
-                    });
-                    window.fancyboxRun = true;
-                }
-            }
-        },
-        diffDate: (d, more = false) => {
-            const dateNow = new Date();
-            const datePost = new Date(d);
-            const dateDiff = dateNow - datePost;
-            const minute = 60000;
-            const hour = 3600000;
-            const day = 86400000;
-            const month = 2592000000;
-            const { time } = GLOBAL_CONFIG.lang;
+        if (!window.fancyboxRun) {
+          Fancybox.bind("[data-fancybox]", {
+            Hash: false,
+            animated: true,
+            Thumbs: { showOnStart: false },
+            Images: { Panzoom: { maxScale: 4 } },
+            Carousel: { transition: "slide" },
+            Toolbar: {
+              display: {
+                left: ["infobar"],
+                middle: [
+                  "zoomIn",
+                  "zoomOut",
+                  "toggle1to1",
+                  "rotateCCW",
+                  "rotateCW",
+                  "flipX",
+                  "flipY",
+                ],
+                right: ["slideshow", "thumbs", "close"],
+              },
+            },
+          });
+          window.fancyboxRun = true;
+        }
+      }
+    },
+    diffDate: (d, more = false) => {
+      const dateNow = new Date();
+      const datePost = new Date(d);
+      const dateDiff = dateNow - datePost;
+      const minute = 60000;
+      const hour = 3600000;
+      const day = 86400000;
+      const month = 2592000000;
+      const { time } = GLOBAL_CONFIG.lang;
 
-            const dayCount = Math.floor(dateDiff / day);
-            if (!more) return dayCount;
+      const dayCount = Math.floor(dateDiff / day);
+      if (!more) return dayCount;
 
-            const minuteCount = Math.floor(dateDiff / minute);
-            const hourCount = Math.floor(dateDiff / hour);
-            const monthCount = Math.floor(dateDiff / month);
+      const minuteCount = Math.floor(dateDiff / minute);
+      const hourCount = Math.floor(dateDiff / hour);
+      const monthCount = Math.floor(dateDiff / month);
 
-            if (monthCount > 12) return datePost.toISOString().slice(0, 10);
-            if (monthCount >= 1) return `${monthCount} ${time.month}`;
-            if (dayCount >= 1) return `${dayCount} ${time.day}`;
-            if (hourCount >= 1) return `${hourCount} ${time.hour}`;
-            if (minuteCount >= 1) return `${minuteCount} ${time.min}`;
-            return time.just;
-        },
-        loadComment: (dom, callback) => {
-            const observerItem = 'IntersectionObserver' in window ? new IntersectionObserver((entries) => {
+      if (monthCount > 12) return datePost.toISOString().slice(0, 10);
+      if (monthCount >= 1) return `${monthCount} ${time.month}`;
+      if (dayCount >= 1) return `${dayCount} ${time.day}`;
+      if (hourCount >= 1) return `${hourCount} ${time.hour}`;
+      if (minuteCount >= 1) return `${minuteCount} ${time.min}`;
+      return time.just;
+    },
+    loadComment: (dom, callback) => {
+      const observerItem =
+        "IntersectionObserver" in window
+          ? new IntersectionObserver(
+              (entries) => {
                 if (entries[0].isIntersecting) {
-                    callback();
-                    observerItem.disconnect();
+                  callback();
+                  observerItem.disconnect();
                 }
-            }, { threshold: [0] }) : null;
+              },
+              { threshold: [0] }
+            )
+          : null;
 
-            observerItem ? observerItem.observe(dom) : callback();
-        },
-        escapeHtml: unsafe => unsafe.replace(/[&<"']/g, m => ({
-            '&': '&amp;',
-            '<': '&lt;',
-            '"': '&quot;',
-            "'": '&#039;'
-        }[m])),
-    };
-    window.utils = { ...window.utils, ...utilsFn };
-})()
+      observerItem ? observerItem.observe(dom) : callback();
+    },
+    escapeHtml: (unsafe) =>
+      unsafe.replace(
+        /[&<"']/g,
+        (m) =>
+          ({
+            "&": "&amp;",
+            "<": "&lt;",
+            '"': "&quot;",
+            "'": "&#039;",
+          }[m])
+      ),
+  };
+  window.utils = { ...window.utils, ...utilsFn };
+})();