From e04a7887f058e0082dc98f1b06a3dd827ba83b3c Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Mon, 5 Feb 2024 22:55:10 +0800 Subject: [PATCH] [opt] layout --- _config.yml | 8 +-- _data/icons.yml | 2 + languages/en.yml | 1 + languages/zh-CN.yml | 1 + languages/zh-TW.yml | 1 + layout/_partial/widgets/toc.ejs | 14 +++-- source/css/_common/device.styl | 2 +- source/css/_layout/layout.styl | 6 +- source/css/_layout/sidebar/sidebar.styl | 15 ++--- source/css/_layout/tag-plugins/timeline.styl | 3 + source/css/_layout/widgets/related.styl | 1 - source/css/_layout/widgets/timeline.styl | 1 - source/css/_layout/widgets/toc.styl | 58 ++++++++++++++------ source/css/_layout/widgets/widgets.styl | 14 +++-- source/js/main.js | 4 ++ 15 files changed, 85 insertions(+), 46 deletions(-) diff --git a/_config.yml b/_config.yml index 28e4872..71ad24b 100755 --- a/_config.yml +++ b/_config.yml @@ -63,13 +63,13 @@ site_tree: # 主页配置 home: leftbar: welcome, recent - rightbar: timeline + rightbar: # timeline # 博客列表页配置 index_blog: base_dir: blog # 只影响自动生成的页面路径 menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id leftbar: welcome, recent # for categories/tags/archives - rightbar: timeline + rightbar: nav_tabs: # 近期发布 分类 标签 专栏 归档 and ... # '朋友文章': /friends/rss/ # 博客专栏列表页配置 @@ -81,7 +81,7 @@ site_tree: base_dir: wiki # 只影响自动生成的页面路径 menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id leftbar: ghissues, related, recent # for wiki - rightbar: timeline + rightbar: nav_tabs: # 'more': https://github.com/xaoxuu # -- 内容类页面 -- # @@ -113,7 +113,7 @@ site_tree: # 其它自定义页面配置 layout: page page: leftbar: recent - rightbar: toc, timeline + rightbar: toc diff --git a/_data/icons.yml b/_data/icons.yml index d14bf93..2545039 100644 --- a/_data/icons.yml +++ b/_data/icons.yml @@ -30,6 +30,8 @@ default:category: +default:upup: + github:logo: github:repo: diff --git a/languages/en.yml b/languages/en.yml index 9fa7fb8..4241803 100755 --- a/languages/en.yml +++ b/languages/en.yml @@ -13,6 +13,7 @@ btn: all_posts: All Posts getting_started: Getting Started edit: Edit This Page + top: Scroll to Top meta: recent_update: Recent Update diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index b2ce452..dab58f2 100755 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -13,6 +13,7 @@ btn: all_posts: 所有文章 getting_started: 开始使用 edit: 编辑本文 + top: 回到顶部 meta: recent_update: 最近更新 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 5feb558..1ce1373 100755 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -13,6 +13,7 @@ btn: all_posts: 所有網誌 getting_started: 開始使用 edit: 編輯本文 + top: 回到頂部 meta: recent_update: 最近更新 diff --git a/layout/_partial/widgets/toc.ejs b/layout/_partial/widgets/toc.ejs index 8a102db..0c32481 100644 --- a/layout/_partial/widgets/toc.ejs +++ b/layout/_partial/widgets/toc.ejs @@ -38,7 +38,7 @@ function layoutToc(fallback) { function layoutDiv(fallback) { const editBtn = partial('components/edit', {map: item.edit_this_page}) const tocBody = layoutTocBody() - if (tocBody.length == 0 && editBtn.length == 0) { + if (tocBody.trim().length == 0 && editBtn.trim().length == 0) { return '' } var el = '' @@ -49,11 +49,13 @@ function layoutDiv(fallback) { el += tocBody el += `` } - if (editBtn.trim().length > 0) { - el += `
` - el += editBtn - el += `
` - } + el += `
` + el += editBtn + el += `` + el += icon('default:upup') + el += `${__('btn.top')}` + el += `` + el += `
` el += `` return el } diff --git a/source/css/_common/device.styl b/source/css/_common/device.styl index 78e363b..de6c7ad 100644 --- a/source/css/_common/device.styl +++ b/source/css/_common/device.styl @@ -47,7 +47,7 @@ // 侧边栏弹出后 .l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel - box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -12px $color-theme + 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) diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl index c614ab3..d43205c 100644 --- a/source/css/_layout/layout.styl +++ b/source/css/_layout/layout.styl @@ -11,10 +11,10 @@ flex-shrink: 0 position: sticky position: -webkit-sticky - top: 8px +.l_body .l_left + top: 8px .l_body .l_right - height: 100% .widgets height: 100% overflow visible @@ -25,6 +25,7 @@ display: block !important .l_body .l_right + top: 8px position: fixed height: calc(100% - 8px * 2) transform: translateX(320px) @@ -35,6 +36,7 @@ z-index: 10 background: var(--site-bg) overflow: auto + scrollbar(0, 0) .l_body[rightbar] .l_right transform: translateX(0px) diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl index bcae093..4079e82 100644 --- a/source/css/_layout/sidebar/sidebar.styl +++ b/source/css/_layout/sidebar/sidebar.styl @@ -5,22 +5,19 @@ overflow: hidden .header margin: var(--gap-max) var(--gap-margin) 0 - @media screen and (min-width: 1400px) - margin-left: auto - margin-right: var(--gap-max) - @media screen and (min-width: $device-mobile-max) - >.widgets:first-child>.widget-wrapper:first-child - margin-top: "calc(2 * %s)" % var(--gap-max) + // @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: 0 8px 0 0 + margin: 8px 8px 8px 0 border-radius: $border-card-l @media screen and (min-width: 1400px) .l_left margin-left: auto - margin-right: var(--gap-max) + margin-right: calc(2 * var(--gap-max)) .l_right - margin-left: var(--gap-margin) + margin-left: var(--gap-max) margin-right: auto .l_left diff --git a/source/css/_layout/tag-plugins/timeline.styl b/source/css/_layout/tag-plugins/timeline.styl index 22cbdfd..3463a35 100644 --- a/source/css/_layout/tag-plugins/timeline.styl +++ b/source/css/_layout/tag-plugins/timeline.styl @@ -191,10 +191,13 @@ padding: 0 0.5rem display: flex align-items: center + border-color: var(--block-border) &:first-child margin-left: 0 &:last-child margin-right: 0 + a:hover + border-color: $color-hover .reaction border-color: var(--block) diff --git a/source/css/_layout/widgets/related.styl b/source/css/_layout/widgets/related.styl index e44fdf4..8243e16 100644 --- a/source/css/_layout/widgets/related.styl +++ b/source/css/_layout/widgets/related.styl @@ -1,7 +1,6 @@ .widget-wrapper.post-card .widget-body max-width: 100% - margin: 1rem 0 .item+.item margin-top: 8px .item diff --git a/source/css/_layout/widgets/timeline.styl b/source/css/_layout/widgets/timeline.styl index d14a669..8142a9c 100644 --- a/source/css/_layout/widgets/timeline.styl +++ b/source/css/_layout/widgets/timeline.styl @@ -1,6 +1,5 @@ .widget-wrapper.timeline .widget-body - margin-top: 0.5rem overflow hidden .body a diff --git a/source/css/_layout/widgets/toc.styl b/source/css/_layout/widgets/toc.styl index b8c4e86..8b1d222 100644 --- a/source/css/_layout/widgets/toc.styl +++ b/source/css/_layout/widgets/toc.styl @@ -1,6 +1,11 @@ .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-wrapper.toc .toc --fsp: $fsp2 @@ -15,7 +20,7 @@ list-style: none a padding: 4px var(--gap-max) - color: var(--text-p2) + color: var(--text-p3) display: block overflow: hidden text-overflow: ellipsis @@ -49,10 +54,11 @@ margin-top: 0 padding: 16px 0 .widget-body .toc - max-height: 75vh + max-height: 70vh @media screen and (max-width: $device-laptop) max-height: unset overflow: auto + scrollbar(0, 0) @@ -66,14 +72,14 @@ --fsp: $fsp2 // 高亮样式 -.widget-wrapper.toc .toc a.toc-link.active - color: var(--text-p0) - &:before,&:after - content: '' - .widget-wrapper.toc .toc a.toc-link:hover color: $color-theme +.widget-wrapper.toc .toc a.toc-link.active + color: var(--text) + &:before,&:after + content: '' + // 始终折叠 .widget-wrapper.toc[collapse='true'] .toc-item a.toc-link+ol @@ -115,19 +121,19 @@ grid-template-rows: 0fr // 编辑本文按钮 +.widget-wrapper.toc .widget-body+.widget-footer:before + content: '' + position absolute + background: var(--block-border) + top: 0 + height: 1px + left: var(--gap-max) + right: var(--gap-max) .widget-wrapper.toc .widget-footer margin-top: 8px color: var(--text-p2) position relative padding-top: 8px - &:before - content: '' - position absolute - background: var(--block-border) - top: 0 - height: 1px - left: var(--gap-max) - right: var(--gap-max) a display: flex align-items: center @@ -141,4 +147,24 @@ width: auto margin-right: 8px a:hover - background: var(--block-hover) \ No newline at end of file + background: var(--block-hover) + color: var(--text) + +.widget-wrapper.toc+.widget-wrapper + padding-top: 32px + +@media screen and (max-width: $device-laptop) + .l_right + blur-effect() + .widgets + padding: 8px + .widget-wrapper.toc + background: var(--alpha100) + .widget-wrapper.toc .toc + a + color: var(--text-p2) + .widget-wrapper.toc .widget-footer + a + background: var(--block) + 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 b5533ca..8b2096e 100644 --- a/source/css/_layout/widgets/widgets.styl +++ b/source/css/_layout/widgets/widgets.styl @@ -58,19 +58,21 @@ .widget-wrapper display: block + padding-bottom: 32px .l_left .widgets margin: 0 var(--gap-margin) .widget-wrapper - margin: 32px 0 - + &:first-child + margin-top: 32px + +.l_right + --gap-margin: 0 .l_right .widgets .widget-wrapper - margin-top: 8px - margin-bottom: 32px .widget-header - padding-left: var(--gap-max) - padding-right: var(--gap-max) + padding-left: var(--gap-padding) + padding-right: var(--gap-padding) &:not(.toc) margin-left: var(--gap-margin) margin-right: var(--gap-margin) diff --git a/source/js/main.js b/source/js/main.js index 28ba760..b108422 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -54,6 +54,10 @@ const util = { el.classList.toggle("display"); } }, + + scrollTop: () => { + window.scrollTo({top: 0, behavior: "smooth"}); + }, } const hud = {