优化移动端侧边栏

themes/butterfly/layout/includes/header/nav.pug

@@ -1,9 +1,9 @@
 nav#nav
   //- 左侧区域：包含指纹菜单和网站名
   span#blog-info
-    #ls-menu-container
+    #ls-menu-container.ls-mobile-safe
       i.fas.fa-fingerprint
-      #ls-menu-panel
+      #ls-menu-panel.ls-mobile-safe-panel
         .ls-section
           .ls-title 😀 个人网站
           .ls-grid
@@ -51,4 +51,4 @@ nav#nav
           i.fas.fa-search.fa-fw
       #toggle-menu
         span.site-page
-          i.fas.fa-bars.fa-fw
+          i.fas.fa-bars.fa-fw

themes/butterfly/layout/includes/layout.pug

@@ -58,4 +58,4 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
 
     include ./rightside.pug
     include ./additional-js.pug
-    include ./rightmenu.pug
+    include ./rightmenu.pug

themes/butterfly/layout/includes/sidebar.pug

@@ -2,17 +2,4 @@ if theme.menu
   #sidebar
     #menu-mask
     #sidebar-menus
-      .avatar-img.text-center
+      #sidebar-aside-wrapper
-        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.flink)}'` alt="avatar")
-      .site-data.text-center
-        a(href=`${url_for(config.archive_dir)}/`)
-          .headline= _p('aside.articles')
-          .length-num= site.posts.length
-        a(href=`${url_for(config.tag_dir)}/`)
-          .headline= _p('aside.tags')
-          .length-num= site.tags.length
-        a(href=`${url_for(config.category_dir)}/`)
-          .headline= _p('aside.categories')
-          .length-num= site.categories.length
-
-      != partial('includes/header/menu_item', {}, { cache: true })

themes/butterfly/source/css/_layout/sidebar.styl

@@ -94,4 +94,51 @@
     .site-page.group:not(.hide) + .menus_item_child
       max-height: 1000px
       opacity: 1
-      transform: scaleY(1)
+      transform: scaleY(1)
+
+    #sidebar-aside-wrapper
+      display: none
+
+html.mobile-aside-in-sidebar
+  #content-inner
+    > #aside-content
+      display: none
+
+  #sidebar
+    #sidebar-menus
+      #sidebar-aside-wrapper
+        display: block
+        padding: 20px
+
+        &:empty
+          display: none
+
+        #aside-content
+          margin-top: 0
+          width: 100%
+
+          .card-widget
+            margin-bottom: 16px
+
+          .sticky_layout
+            position: static
+            position: initial
+            top: auto
+
+          #card-toc
+            position: relative
+            right: auto
+            bottom: auto
+            z-index: auto
+            max-width: none
+            max-height: none
+            width: 100%
+            transition: none
+            transform: none
+            transform-origin: center top
+
+            &.open
+              transform: none
+
+            .toc-content
+              max-height: 60vh

themes/butterfly/source/css/nav.css

@@ -175,6 +175,41 @@
   background: rgba(255, 255, 255, 0.05); 
 }
 
+@media screen and (max-width: 768px) {
+  #ls-menu-container.ls-mobile-safe {
+    position: static !important;
+    padding: 0 10px;
+  }
+
+  #ls-menu-panel.ls-mobile-safe-panel {
+    position: fixed !important;
+    top: 70px !important;
+    left: 12px !important;
+    right: 12px !important;
+    width: auto !important;
+    max-width: calc(100vw - 24px) !important;
+    max-height: calc(100vh - 94px) !important;
+    margin-top: 0 !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: 16px;
+  }
+
+  #ls-menu-panel.ls-mobile-safe-panel::before {
+    display: none;
+  }
+
+  #ls-menu-panel.ls-mobile-safe-panel .ls-grid {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  #ls-menu-panel.ls-mobile-safe-panel .ls-grid a {
+    min-width: 0;
+    padding: 10px;
+  }
+}
+
 #nav.show-title .nav-page-title {
   display: flex !important;
   opacity: 1 !important;
@@ -200,4 +235,4 @@
 
 #nav #blog-info {
   overflow: visible !important;
-}
+}

themes/butterfly/source/js/main.js

@@ -38,6 +38,26 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  const syncAsideToSidebar = () => {
+    const asideContent = document.getElementById('aside-content')
+    const desktopAsideContainer = document.getElementById('content-inner')
+    const mobileAsideContainer = document.getElementById('sidebar-aside-wrapper')
+
+    if (!(asideContent && desktopAsideContainer && mobileAsideContainer)) {
+      document.documentElement.classList.remove('mobile-aside-in-sidebar')
+      return
+    }
+
+    const shouldMoveAside = window.innerWidth <= 900
+    const targetContainer = shouldMoveAside ? mobileAsideContainer : desktopAsideContainer
+
+    if (asideContent.parentNode !== targetContainer) {
+      targetContainer.appendChild(asideContent)
+    }
+
+    document.documentElement.classList.toggle('mobile-aside-in-sidebar', shouldMoveAside)
+  }
+
   /**
    * 首頁top_img底下的箭頭
    */
@@ -921,12 +941,20 @@ document.addEventListener('DOMContentLoaded', () => {
   const unRefreshFn = () => {
     window.addEventListener('resize', () => {
       adjustMenu(false)
+      syncAsideToSidebar()
       mobileSidebarOpen && btf.isHidden(document.getElementById('toggle-menu')) && sidebarFn.close()
     })
 
     const menuMask = document.getElementById('menu-mask')
     menuMask && menuMask.addEventListener('click', () => { sidebarFn.close() })
 
+    const sidebarMenus = document.getElementById('sidebar-menus')
+    sidebarMenus && sidebarMenus.addEventListener('click', e => {
+      const clickedLink = e.target.closest('a')
+      if (!clickedLink) return
+      sidebarFn.close()
+    })
+
     clickFnOfSubMenu()
     GLOBAL_CONFIG.islazyloadPlugin && lazyloadImg()
     GLOBAL_CONFIG.copyright !== undefined && addCopyright()
@@ -952,6 +980,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const refreshFn = () => {
     initAdjust()
+    syncAsideToSidebar()
     justifiedIndexPostUI()
 
     if (GLOBAL_CONFIG_SITE.pageType === 'post') {