diff --git a/themes/butterfly/layout/includes/header/nav.pug b/themes/butterfly/layout/includes/header/nav.pug index 921fc02..de3da72 100644 --- a/themes/butterfly/layout/includes/header/nav.pug +++ b/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 \ No newline at end of file + i.fas.fa-bars.fa-fw diff --git a/themes/butterfly/layout/includes/layout.pug b/themes/butterfly/layout/includes/layout.pug index 735ad8d..2df72fe 100644 --- a/themes/butterfly/layout/includes/layout.pug +++ b/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 \ No newline at end of file + include ./rightmenu.pug diff --git a/themes/butterfly/layout/includes/sidebar.pug b/themes/butterfly/layout/includes/sidebar.pug index 178c420..8947f36 100644 --- a/themes/butterfly/layout/includes/sidebar.pug +++ b/themes/butterfly/layout/includes/sidebar.pug @@ -2,17 +2,4 @@ if theme.menu #sidebar #menu-mask #sidebar-menus - .avatar-img.text-center - 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 }) \ No newline at end of file + #sidebar-aside-wrapper diff --git a/themes/butterfly/source/css/_layout/sidebar.styl b/themes/butterfly/source/css/_layout/sidebar.styl index 51c5b2f..2427d9f 100644 --- a/themes/butterfly/source/css/_layout/sidebar.styl +++ b/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) \ No newline at end of file + 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 diff --git a/themes/butterfly/source/css/nav.css b/themes/butterfly/source/css/nav.css index 6ed56ad..64a5a53 100644 --- a/themes/butterfly/source/css/nav.css +++ b/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; -} \ No newline at end of file +} diff --git a/themes/butterfly/source/js/main.js b/themes/butterfly/source/js/main.js index 046ad4e..ac503db 100644 --- a/themes/butterfly/source/js/main.js +++ b/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') {