xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[opt] layout

This commit is contained in:
xaoxuu 2024-02-06 23:39:51 +08:00
parent cb717580a0
commit c58fc191e8
12 changed files with 121 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_config.yml
View File

@ -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:

13
layout/_partial/sidebar/index_rightbar.ejs
View File

@ -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 ''
}
}
%>

15
layout/_partial/widgets/tree.ejs
View File

@ -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
}
%>

19
source/css/_common/device.styl
View File

@ -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

17
source/css/_custom.styl
View File

@ -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

12
source/css/_layout/layout.styl
View File

@ -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
// 手机布局

4
source/css/_layout/sidebar/logo.styl
View File

@ -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

9
source/css/_layout/sidebar/sidebar.styl
View File

@ -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))

3
source/css/_layout/widgets/ghuser.styl
View File

@ -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%

96
source/css/_layout/widgets/toc.styl
View File

@ -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)
--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

9
source/css/_layout/widgets/widgets.styl
View File

@ -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)

2
source/js/main.js
View File

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