From e1d1d8451d3e483224b784f575810616c16801e5 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Sun, 4 Feb 2024 21:09:44 +0800 Subject: [PATCH] [opt] sidebar -> leftbar --- _config.yml | 22 +++++++------- _data/icons.yml | 2 +- layout/_partial/menubtn.ejs | 4 +-- layout/_partial/sidebar/index.ejs | 40 ++++++++++++------------- layout/layout.ejs | 2 +- scripts/generators/author.js | 2 +- source/css/_common/device.styl | 8 ++--- source/css/_defines/theme.styl | 4 +-- source/css/_layout/layout.styl | 6 ++-- source/css/_layout/sidebar/sidebar.styl | 27 ++++++++--------- source/js/main.js | 10 +++---- 11 files changed, 62 insertions(+), 65 deletions(-) diff --git a/_config.yml b/_config.yml index fa94399..4f3e53c 100755 --- a/_config.yml +++ b/_config.yml @@ -62,12 +62,12 @@ site_tree: # -- 列表类页面 -- # # 主页配置 home: - sidebar: welcome, recent, timeline + leftbar: welcome, recent, timeline # 博客列表页配置 index_blog: base_dir: blog # 只影响自动生成的页面路径 menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id - sidebar: welcome, recent, timeline # for categories/tags/archives + leftbar: welcome, recent, timeline # for categories/tags/archives nav_tabs: # 近期发布 分类 标签 专栏 归档 and ... # '朋友文章': /friends/rss/ # 博客专栏列表页配置 @@ -78,34 +78,34 @@ site_tree: index_wiki: base_dir: wiki # 只影响自动生成的页面路径 menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id - sidebar: toc, ghissues, related, recent # for wiki + leftbar: toc, ghissues, related, recent # for wiki nav_tabs: # 'more': https://github.com/xaoxuu # -- 内容类页面 -- # # 博客文章内页配置 post: menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id - sidebar: toc, related, ghrepo, ghissues, recent # for pages using 'layout:post' + leftbar: toc, related, ghrepo, ghissues, recent # for pages using 'layout:post' # 博客专栏文章内页配置 topic: menu_id: post # 文档内页配置 wiki: menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id - sidebar: toc, ghissues, related, recent # for wiki + leftbar: toc, ghissues, related, recent # for wiki # 作者信息配置 author: base_dir: author # 只影响自动生成的页面路径 menu_id: post - sidebar: recent, timeline + leftbar: recent, timeline # 错误页配置 error_page: menu_id: post '404': '/404.html' - sidebar: recent, timeline + leftbar: recent, timeline # 其它自定义页面配置 layout: page page: - sidebar: toc, recent, timeline + leftbar: toc, recent, timeline @@ -521,11 +521,9 @@ style: gradient: # https://webgradients.com/ start: 'linear-gradient(to right, hsl(215, 95%, 64%), hsl(195, 95%, 60%), hsl(165, 95%, 56%), hsl(165, 95%, 56%), hsl(195 95% 60%), hsl(215, 95%, 64%))' search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)' - sidebar: - sticky: false # true/false 屏幕足够宽时，侧边栏是否吸附在正文区域旁边 + leftbar: # 可以设置：纯色/渐变色/图片作为背景 - # background: var(--sidebar-bg) - # background-image: 'linear-gradient(to bottom, var(--sidebar-bg), var(--sidebar-bg))' + # background: var(--leftbar-bg) background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg) blur-px: 100px blur-bg: var(--alpha60) diff --git a/_data/icons.yml b/_data/icons.yml index c44c14b..e438561 100644 --- a/_data/icons.yml +++ b/_data/icons.yml @@ -21,7 +21,7 @@ default:rss: # 侧边栏弹出按钮 -default:sidebar: +default:leftbar: default:pin: default:calendar: default:category: diff --git a/layout/_partial/menubtn.ejs b/layout/_partial/menubtn.ejs index dcdfdd7..fc71874 100644 --- a/layout/_partial/menubtn.ejs +++ b/layout/_partial/menubtn.ejs @@ -1,5 +1,5 @@ diff --git a/layout/_partial/sidebar/index.ejs b/layout/_partial/sidebar/index.ejs index c4c8d45..56ca751 100755 --- a/layout/_partial/sidebar/index.ejs +++ b/layout/_partial/sidebar/index.ejs @@ -3,49 +3,49 @@ const wiki = theme.wiki.tree[page.wiki] const topic = theme.topic.tree[page.topic] -if (page.sidebar == null) { +if (page.leftbar == null) { const { site_tree } = theme var sidebar if (is_home()) { - sidebar = site_tree.home.sidebar + sidebar = site_tree.home.leftbar } else if (is_category() || is_tag() || is_archive() || ['categories', 'tags', 'archives'].includes(page.layout)) { - sidebar = site_tree.index_blog.sidebar + sidebar = site_tree.index_blog.leftbar } else if (page.layout === 'index_topic') { // 专栏列表页等同于博客列表页 - sidebar = site_tree.index_blog.sidebar + sidebar = site_tree.index_blog.leftbar } else if (page.topic?.length > 0) { // 专栏文章内页等同于普通文章内页 - sidebar = site_tree.post.sidebar + sidebar = site_tree.post.leftbar } else if (page.layout === 'index_wiki') { - sidebar = site_tree.index_wiki.sidebar + sidebar = site_tree.index_wiki.leftbar } else if (page.wiki?.length > 0) { - sidebar = site_tree.wiki.sidebar + sidebar = site_tree.wiki.leftbar } else if (page.layout === '404') { - sidebar = site_tree.error_page.sidebar + sidebar = site_tree.error_page.leftbar } else if (page.layout === 'page') { - sidebar = site_tree.page.sidebar + sidebar = site_tree.page.leftbar } else if (page.layout === 'post') { - sidebar = site_tree.post.sidebar + sidebar = site_tree.post.leftbar } else if (page.layout == null) { - sidebar = site_tree.page.sidebar + sidebar = site_tree.page.leftbar } else { sidebar = [] } - if (topic?.sidebar) { - sidebar = topic.sidebar + if (topic?.leftbar) { + sidebar = topic.leftbar } - if (wiki?.sidebar) { - sidebar = wiki.sidebar + if (wiki?.leftbar) { + sidebar = wiki.leftbar } - page.sidebar = sidebar + page.leftbar = sidebar } // parse array string -if (typeof page.sidebar == 'string') { - page.sidebar = page.sidebar.replace(/ /g, '').split(','); +if (typeof page.leftbar == 'string') { + page.leftbar = page.leftbar.replace(/ /g, '').split(','); } function layoutTitle(main, url, sub) { var el = ''; @@ -66,8 +66,8 @@ function layoutTitle(main, url, sub) { function layoutWidgets() { var el = ''; el += '
'; - if (page.sidebar) { - page.sidebar.forEach((w, i) => { + if (page.leftbar) { + page.leftbar.forEach((w, i) => { let name = '' let widget = {} if (typeof w == 'string') { diff --git a/layout/layout.ejs b/layout/layout.ejs index e3fdbaa..2d5c7a7 100755 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -44,7 +44,7 @@ html += `` html += partial('_partial/cover/index') html += `
` html += `` diff --git a/scripts/generators/author.js b/scripts/generators/author.js index 0143850..f417621 100644 --- a/scripts/generators/author.js +++ b/scripts/generators/author.js @@ -16,7 +16,7 @@ hexo.extend.generator.register('author', function (locals) { layout: ['archive'], data: { author: author, - sidebar: site_tree.author.sidebar, + leftbar: site_tree.author.leftbar, menu_id: site_tree.author.menu_id } }) diff --git a/source/css/_common/device.styl b/source/css/_common/device.styl index 257a39b..0987cc1 100644 --- a/source/css/_common/device.styl +++ b/source/css/_common/device.styl @@ -27,7 +27,7 @@ --blur-bg: alpha(#000, .4) // 侧边栏弹出按钮 -.sidebar-toggle.mobile +.leftbar-toggle.mobile cursor: pointer color: var(--text) background: none @@ -42,7 +42,7 @@ width: auto height: 28px // 侧边栏弹出后 -.l_body.mobile.sidebar .sidebar-toggle.mobile +.l_body.mobile.leftbar .leftbar-toggle.mobile svg g fill: currentColor fill-opacity: 0.3 @@ -50,8 +50,8 @@ transform: translateX(2px) -.l_body.mobile.sidebar - .sidebar-toggle.mobile +.l_body.mobile.leftbar + .leftbar-toggle.mobile background: var(--card) color: $color-hover border-color: var(--block-border) diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl index d6c6b90..a6794eb 100644 --- a/source/css/_defines/theme.styl +++ b/source/css/_defines/theme.styl @@ -40,7 +40,7 @@ set_text_light() --alpha60: rgba(white, 0.6) --alpha75: rgba(white, 0.75) --alpha100: white - --sidebar-bg: hsl($color-block-h, $color-block-s, 90) + --leftbar-bg: hsl($color-block-h, $color-block-s, 90) --block: hsl($color-block-h, $color-block-s, 95) --block-border: hsl($color-block-h, $color-block-s, 90) --block-hover: hsl($color-block-h, $color-block-s, 92) @@ -60,7 +60,7 @@ set_darkmode() --alpha60: rgba(black, 0.6) --alpha75: rgba(black, 0.75) --alpha100: black - --sidebar-bg: hsl($color-block-h, $color-block-s, 24) + --leftbar-bg: hsl($color-block-h, $color-block-s, 24) set_text_light() @media screen and (max-width: $device-mobile-max) --site-bg: black diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl index 08107d5..cc7baa5 100644 --- a/source/css/_layout/layout.styl +++ b/source/css/_layout/layout.styl @@ -1,8 +1,8 @@ .l_body display: grid grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr + grid-gap: var(--gap-l) margin: auto - padding: 0 var(--gap-l) font-size: var(--fsp) .l_body .l_left @@ -19,7 +19,7 @@ display: block !important .l_body padding: 0 - grid-template-columns: 1fr + display: block .l_left position: fixed transform: translateX(-320px) @@ -32,7 +32,7 @@ .l_body.mobile .l_left transition: transform .38s ease-out - .l_body.mobile.sidebar + .l_body.mobile.leftbar .l_left transform: translateX(0px) .main-mask diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl index cbb3aab..8e4d377 100644 --- a/source/css/_layout/sidebar/sidebar.styl +++ b/source/css/_layout/sidebar/sidebar.styl @@ -1,36 +1,35 @@ .l_left - margin: 8px 8px 8px 0 + margin: 8px 0 8px 8px height: 'calc(%s - 16px)' % 100vh border-radius: $border-card-l overflow: hidden .header margin: var(--gap-l) var(--gap-l) 0 margin-top: "calc(2 * %s)" % var(--gap-l) - if hexo-config('style.sidebar') && hexo-config('style.sidebar.sticky') - @media screen and (min-width: 1400px) - margin-left: auto - margin-right: "calc(2 * %s)" % var(--gap-l) + @media screen and (min-width: 1400px) + margin-left: auto + margin-right: "calc(2 * %s)" % var(--gap-l) @media screen and (min-width: $device-mobile-max) >.widgets:first-child>.widget-wrapper:first-child margin-top: "calc(2 * %s)" % var(--gap-l) .l_left background-size: cover - if hexo-config('style.sidebar') && hexo-config('style.sidebar.background-image') - background-image: convert(hexo-config('style.sidebar.background-image')) - else if hexo-config('style.sidebar') && hexo-config('style.sidebar.background') - background: convert(hexo-config('style.sidebar.background')) - .sidebar-container + if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image') + background-image: convert(hexo-config('style.leftbar.background-image')) + else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background') + background: convert(hexo-config('style.leftbar.background')) + .leftbar-container height: 100% display: flex flex-direction: column word-break: break-all text-align: justify - if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-px') - --blur-px: convert(hexo-config('style.sidebar.blur-px')) + if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-px') + --blur-px: convert(hexo-config('style.leftbar.blur-px')) @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px)))) background: var(--blur-bg) backdrop-filter: saturate(240%) blur(var(--blur-px)) -webkit-backdrop-filter: saturate(240%) blur(var(--blur-px)) - if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-bg') - --blur-bg: convert(hexo-config('style.sidebar.blur-bg')) \ No newline at end of file + if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-bg') + --blur-bg: convert(hexo-config('style.leftbar.blur-bg')) \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index a3c1138..a603d9a 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -76,11 +76,11 @@ const hud = { const l_body = document.querySelector('.l_body'); -const sidebar = { +const leftbar = { toggle: () => { if (l_body) { l_body.classList.add('mobile'); - l_body.classList.toggle("sidebar"); + l_body.classList.toggle("leftbar"); } } } @@ -139,10 +139,10 @@ const init = { }) }) }, - sidebar: () => { + leftbar: () => { stellar.jQuery(() => { $("#data-toc a.toc-link").click(function (e) { - l_body.classList.remove("sidebar"); + l_body.classList.remove("leftbar"); }); }) }, @@ -190,7 +190,7 @@ const init = { // init init.toc() -init.sidebar() +init.leftbar() init.relativeDate(document.querySelectorAll('#post-meta time')) init.registerTabsTag()