diff --git a/_config.yml b/_config.yml
index 0f1649a..e8f5485 100755
--- a/_config.yml
+++ b/_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:
diff --git a/layout/_partial/sidebar/index_rightbar.ejs b/layout/_partial/sidebar/index_rightbar.ejs
index b94436e..96152e5 100644
--- a/layout/_partial/sidebar/index_rightbar.ejs
+++ b/layout/_partial/sidebar/index_rightbar.ejs
@@ -49,8 +49,10 @@ if (typeof page.rightbar == 'string') {
}
function layoutWidgets() {
- var el = '';
- el += '';
+ 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 += '
';
- return el;
+ if (el.trim().length > 0) {
+ return `${el}
`
+ } else {
+ return ''
+ }
}
%>
diff --git a/layout/_partial/widgets/tree.ejs b/layout/_partial/widgets/tree.ejs
index 897d4fd..afcd5de 100644
--- a/layout/_partial/widgets/tree.ejs
+++ b/layout/_partial/widgets/tree.ejs
@@ -47,7 +47,6 @@ function layoutDiv(fallback) {
return ''
}
var el = ''
- el += ``
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 += ``
- el += layoutDocTree(sec.pages)
- el += `
`
+ const docTree = layoutDocTree(sec.pages)
+ if (docTree.trim().length > 0) {
+ el += `${docTree}
`
+ }
+ }
+ if (el.trim().length > 0) {
+ return `${el}`
+ } else {
+ return ''
}
- el += ``
- return el
}
%>
diff --git a/source/css/_common/device.styl b/source/css/_common/device.styl
index de6c7ad..e5fb2f0 100644
--- a/source/css/_common/device.styl
+++ b/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
diff --git a/source/css/_custom.styl b/source/css/_custom.styl
index 0c6eea7..f1676cf 100644
--- a/source/css/_custom.styl
+++ b/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
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
index 18ff1a9..983f70f 100644
--- a/source/css/_layout/layout.styl
+++ b/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
// 手机布局
diff --git a/source/css/_layout/sidebar/logo.styl b/source/css/_layout/sidebar/logo.styl
index 828853e..2e013a0 100644
--- a/source/css/_layout/sidebar/logo.styl
+++ b/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
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index 4079e82..6cde837 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/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))
diff --git a/source/css/_layout/widgets/ghuser.styl b/source/css/_layout/widgets/ghuser.styl
index 1dc861b..fca7ee2 100644
--- a/source/css/_layout/widgets/ghuser.styl
+++ b/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%
diff --git a/source/css/_layout/widgets/toc.styl b/source/css/_layout/widgets/toc.styl
index 8b1d222..bd6e4ad 100644
--- a/source/css/_layout/widgets/toc.styl
+++ b/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
\ No newline at end of file
diff --git a/source/css/_layout/widgets/widgets.styl b/source/css/_layout/widgets/widgets.styl
index 8b2096e..2c5ea5c 100644
--- a/source/css/_layout/widgets/widgets.styl
+++ b/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)
diff --git a/source/js/main.js b/source/js/main.js
index b108422..41909e9 100644
--- a/source/js/main.js
+++ b/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);
});
})
},