[opt] layout

_config.yml

@@ -63,7 +63,7 @@ site_tree:
   # 主页配置
   home:
     leftbar: welcome, recent
-    rightbar: welcome
+    rightbar: 
   # 博客列表页配置
   index_blog:
     base_dir: blog # 只影响自动生成的页面路径
@@ -80,7 +80,7 @@ site_tree:
   index_wiki:
     base_dir: wiki # 只影响自动生成的页面路径
     menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
-    leftbar: ghissues, related, recent # for wiki
+    leftbar: related, recent # for wiki
     rightbar: 
     nav_tabs:
       # 'more': https://github.com/xaoxuu
@@ -88,7 +88,7 @@ site_tree:
   # 博客文章内页配置
   post:
     menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
-    leftbar: related, ghrepo, ghissues, recent # for pages using 'layout:post'
+    leftbar: related, recent # for pages using 'layout:post'
     rightbar: ghrepo, toc
   # 博客专栏文章内页配置
   topic:
@@ -96,7 +96,7 @@ site_tree:
   # 文档内页配置
   wiki:
     menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
-    leftbar: tree, ghissues, related, recent # for wiki
+    leftbar: tree, related, recent # for wiki
     rightbar: ghrepo, toc
   # 作者信息配置
   author: 

layout/_partial/sidebar/index_rightbar.ejs

@@ -49,8 +49,10 @@ if (typeof page.rightbar == 'string') {
 }
 
 function layoutWidgets() {
-  var el = '';
-  el += '<div class="widgets">';
+  if (page.rightbar == null || page.rightbar.length == 0) {
+    return ''
+  }
+  var el = ''
   if (page.rightbar) {
     page.rightbar.forEach((w, i) => {
       let name = ''
@@ -71,8 +73,11 @@ function layoutWidgets() {
       }
     });
   }
-  el += '</div>';
-  return el;
+  if (el.trim().length > 0) {
+    return `<div class="widgets">${el}</div>`
+  } else {
+    return ''
+  }
 }
 
 %>

layout/_partial/widgets/tree.ejs

@@ -47,7 +47,6 @@ function layoutDiv(fallback) {
     return ''
   }
   var el = ''
-  el += `<widget class="widget-wrapper${scrollreveal(' ')} post-list">`
   for (let sec of proj.sections) {
     if (sec.pages.length == 0) {
       continue
@@ -55,12 +54,16 @@ function layoutDiv(fallback) {
     if (sec.title?.length > 0) {
       el += layoutTocHeader(sec.title)
     }
-    el += `<div class="widget-body fs14">`
-    el += layoutDocTree(sec.pages)
-    el += `</div>`
+    const docTree = layoutDocTree(sec.pages)
+    if (docTree.trim().length > 0) {
+      el += `<div class="widget-body fs14">${docTree}</div>`
+    }
+  }
+  if (el.trim().length > 0) {
+    return `<widget class="widget-wrapper${scrollreveal(' ')} post-list">${el}</widget>`
+  } else {
+    return ''
   }
-  el += `</widget>`
-  return el
 }
 
 %>

source/css/_common/device.styl

@@ -16,9 +16,11 @@
   z-index: 10
   display: flex
   flex-direction: column
-  border-radius: 0.5rem
+  border-radius: $border-bar
   margin-left: auto
   margin-right: 1rem
+  @media screen and (min-width: $device-mobile-max)
+    margin-right: 2rem
   overflow: hidden
   --blur-px: 16px
   --blur-bg: alpha(#fff, .4)
@@ -47,9 +49,10 @@
 
 // 侧边栏弹出后
 .l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
-  box-shadow: 0 0 4px -2px $color-theme, 0 0 16px -8px $color-theme, 0 0 32px -16px $color-theme
-.l_body[leftbar] .float-panel button
-  background: var(--card)
+  box-shadow: 0 0 4px -1px $color-theme, 0 0 16px -4px $color-theme, 0 0 32px -12px $color-theme, 0 0 128px -32px $color-theme
+  
+.l_body[leftbar] .float-panel button.leftbar-toggle
+  background: var(--alpha100)
 
 .l_body[leftbar] .float-panel button.leftbar-toggle
   color: $color-theme
@@ -61,8 +64,12 @@
       transform: translateX(2px)
 
 
-.l_body[rightbar] .float-panel button
-  background: var(--card)
+// 侧边栏有内容时才显示弹出按钮
+.l_body .l_right:empty+.float-panel button.rightbar-toggle
+  display: none !important
+
+.l_body[rightbar] .float-panel button.rightbar-toggle
+  background: var(--alpha100)
 
 .l_body[rightbar] .float-panel button.rightbar-toggle
   color: $color-theme

source/css/_custom.styl

@@ -67,32 +67,35 @@ $border-button = 4px
 
 // 可以动态变化的属性
 :root
-  --width-sidebar: 288px
   --width-main: 720px
   --fsp: $fs-body
   --fsh2: 'calc(%s + 11px)' % var(--fsp)
   --fsh3: 'calc(%s + 7px)' % var(--fsp)
   --fsh4: 'calc(%s + 4px)' % var(--fsp)
   
+  // 侧边栏文字内容宽度
+  --side-content-width: 224px
+  // 元素轮廓到容器边缘的间距
   --gap-margin: 16px
+  // 元素文本内容到元素自身的轮廓的间距
   --gap-padding: 16px
-  --gap-max: calc(var(--gap-margin) + var(--gap-padding))
   
   --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
   --gap-p-compact: 'calc(%s * 0.75)' % $fs-body
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
-    --width-sidebar: 352px
     --width-main: 780px
   // desktop 4k or larger
   @media screen and (min-width: $device-4k)
     --width-main: 860px
   // iPad 竖屏
   @media screen and (max-width: $device-tablet)
-    --width-sidebar: 252px
-  // iPad 竖屏
-  @media screen and (max-width: $device-mobile-max)
-    --width-sidebar: 288px
+    --side-content-width: 188px
+
+// 动态计算值
+:root
+  // 元素文本内容到容器边缘的间距
+  --gap-max: calc(var(--gap-margin) + var(--gap-padding))
 
 // 文章布局风格
 .l_body.story

source/css/_layout/layout.styl

@@ -7,21 +7,27 @@
 
 .l_body aside
   z-index: 8
-  width: var(--width-sidebar)
   flex-shrink: 0
   position: sticky
   position: -webkit-sticky
+  // 侧边栏容器宽度
+  --width-sidebar: calc(var(--gap-margin) * 2 + var(--gap-padding) * 2 + var(--side-content-width))
+  width: var(--width-sidebar)
 
 .l_body .l_left
+  justify-self: right
   top: 8px
 .l_body .l_right
-  width: calc(var(--width-sidebar) - var(--gap-max) + var(--gap-padding))
+  justify-self: left
+  --gap-margin: 0px
   .widgets
     height: 100%
     overflow visible
 
 // 平板布局
 @media screen and (max-width: $device-laptop)
+  .l_body .l_right
+    --gap-margin: 16px
   .laptop-only
     display: block !important
   .l_body
@@ -43,7 +49,7 @@
     .l_right
       transform: translateX(0px)
     .main-mask
-      opacity 1
+      // opacity 1
       pointer-events: inherit
 
 // 手机布局

source/css/_layout/sidebar/logo.styl

@@ -3,8 +3,10 @@
   align-items: center
   overflow: hidden
   min-height: 48px
-  img
+  img.avatar
     object-fit: cover
+  img.icon
+    object-fit: contain
   .icon
     width: 48px
     height: 48px

source/css/_layout/sidebar/sidebar.styl

@@ -1,18 +1,15 @@
 .l_left
-  margin: 8px 0 8px 8px
+  margin: 8px
   height: 'calc(%s - 16px)' % 100vh
   border-radius: $border-card-l
   overflow: hidden
   .header
     margin: var(--gap-max) var(--gap-margin) 0
-  // @media screen and (min-width: $device-mobile-max)
-  //   >.widgets:first-child>.widget-wrapper:first-child
-  //     margin-top: calc(2 * var(--gap-max))
 
 .l_right
-  margin: 8px 8px 8px 0
+  margin: 8px
   border-radius: $border-card-l
-@media screen and (min-width: 1400px)
+@media screen and (min-width: $device-2k)
   .l_left
     margin-left: auto
     margin-right: calc(2 * var(--gap-max))

source/css/_layout/widgets/ghuser.styl

@@ -6,7 +6,7 @@
   background: var(--card)
   border-radius: $border-card
   padding: 1rem
-  hoverable-card()
+  box-shadow: $boxshadow-card
 
 .widgets .widget-wrapper.user-card 
   .avatar
@@ -17,6 +17,7 @@
     overflow: hidden
     img
       display: block
+      aspect-ratio: 1
     @media screen and (max-width: $device-tablet)
       max-width: 50%
 

source/css/_layout/widgets/toc.styl

@@ -1,10 +1,17 @@
 .widget-wrapper.toc
   background: var(--site-bg)
   z-index 1
-
-.l_right .widgets .widget-wrapper.toc .widget-header
-  padding-left: var(--gap-max)
-  padding-right: var(--gap-max)
+  .widget-body
+    position relative
+    &:before
+      content: ''
+      position absolute
+      top: 4px
+      bottom: 4px
+      left: 0
+      width: 4px
+      background: var(--block)
+      border-radius: 4px
 
 // 目录基本样式
 .widget-wrapper.toc .toc
@@ -13,46 +20,42 @@
   margin: 0
   position relative
   list-style: none
-  .toc-child
-    padding-left: 1em
   li
-    margin: 2px 0
+    margin: 0
     list-style: none
-  a  
-    padding: 4px var(--gap-max)
+  a
+    --padding: calc(var(--gap-padding) / 2)
+    --padding-offset: calc(0 - var(--padding))
+    padding: 6px var(--padding)
+    margin: 0 var(--padding)
     color: var(--text-p3)
     display: block
-    overflow: hidden
-    text-overflow: ellipsis
-    white-space: nowrap
     position relative
-    &:before,&:after
-      position: absolute
-      left: 'calc(%s * 0.5)' % var(--gap-max)
-      width: 8px
-      height: 8px
-      top: 'calc(%s - 4px)' % 50%
-      border-radius: 8px
-      background: var(--block)
+    border-radius: $border-bar
+    trans1 all
+    &.active:before
+      content: ''
+      position absolute
+      top: 4px
+      bottom: 4px
+      left: -8px
+      width: 4px
       background: $color-theme
-    &:after
-      opacity 0
-      animation: wave 1s linear infinite
-      @keyframes wave
-        from
-          transform: scale(1)
-          opacity 1
-        to
-          transform: scale(2)
-          opacity 0
+      border-radius: 4px
+    &:hover
+      background: var(--block-hover)
+      color: var(--text)
     
 // 固定位置
 .l_right .widgets .widget-wrapper.toc
+  margin-top: 0
   position: sticky
   position: -webkit-sticky
   top: 0
-  margin-top: 0
   padding: 16px 0
+  &:first-child
+    top: 8px
+    padding-top: 8px
   .widget-body .toc
     max-height: 70vh
     @media screen and (max-width: $device-laptop)
@@ -67,14 +70,23 @@
   .toc-item
     font-weight: 500
     --fsp: $fsp1
-  .toc-item  .toc-item
+  .toc-item .toc-item
     font-weight: 400
     --fsp: $fsp2
+  ol
+    padding-left: 0
+  .toc-child .toc-link
+    padding-left: 1.5rem
+  .toc-child .toc-child .toc-link
+    padding-left: 2.5rem
+  .toc-child .toc-child .toc-child .toc-link
+    padding-left: 3.5rem
+  .toc-child .toc-child .toc-child .toc-child .toc-link
+    padding-left: 4.5rem
+  .toc-child .toc-child .toc-child .toc-child .toc-child .toc-link
+    padding-left: 5rem
 
 // 高亮样式
-.widget-wrapper.toc .toc a.toc-link:hover
-  color: $color-theme
-
 .widget-wrapper.toc .toc a.toc-link.active
   color: var(--text)
   &:before,&:after
@@ -127,8 +139,8 @@
   background: var(--block-border)
   top: 0
   height: 1px
-  left: var(--gap-max)
-  right: var(--gap-max)
+  left: var(--gap-padding)
+  right: var(--gap-padding)
 .widget-wrapper.toc .widget-footer
   margin-top: 8px
   color: var(--text-p2)
@@ -139,9 +151,9 @@
     align-items: center
     color: inherit
     font-size: $fs-14
-    padding: 8px 16px
-    margin: 0 calc(var(--gap-max) - 16px)
-    border-radius: 4px
+    padding: 8px var(--gap-padding)
+    border-radius: $border-bar
+    trans1 all
     svg,img
       height: 16px
       width: auto
@@ -157,14 +169,14 @@
   .l_right
     blur-effect()
     .widgets
-      padding: 8px
       .widget-wrapper.toc
-        background: var(--alpha100)
+        position: static
+        background: none
   .widget-wrapper.toc .toc
     a
       color: var(--text-p2)
   .widget-wrapper.toc .widget-footer
     a
-      background: var(--block)
+      background: var(--alpha100)
     a+a
       margin-top: 4px

source/css/_layout/widgets/widgets.styl

@@ -10,6 +10,7 @@
   scrollbar(0, 0)
   z-index: 1
   line-height: 1.2
+  margin: 0 var(--gap-margin)
   .widget-wrapper
     .widget-header
       padding-left: var(--gap-padding)
@@ -61,21 +62,17 @@
   padding-bottom: 32px
 
 .l_left .widgets
-  margin: 0 var(--gap-margin)
   .widget-wrapper
     &:first-child
       margin-top: 32px
 
-.l_right
-  --gap-margin: 0
 .l_right .widgets
+  &:empty 
+    display: none
   .widget-wrapper
     .widget-header
       padding-left: var(--gap-padding)
       padding-right: var(--gap-padding)
-    &:not(.toc)
-      margin-left: var(--gap-margin)
-      margin-right: var(--gap-margin)
   @media screen and (max-width: $device-laptop)
     .widget-wrapper
       margin-top: var(--gap-margin)

source/js/main.js

@@ -159,7 +159,7 @@ const init = {
         if(timeout !== null) clearTimeout(timeout);
         timeout = setTimeout(function() {
           scrollTOC();
-        }.bind(this), 300);
+        }.bind(this), 50);
       });      
     })
   },