From 016d75f1ba0232658a88aba00acb45f7e3ccf612 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Wed, 17 Jan 2024 00:27:48 +0800 Subject: [PATCH] [feat] sidebar refactoring --- _config.yml | 25 ++--- _data/widgets.yml | 18 +--- layout/_partial/main/header/index.ejs | 2 +- layout/_partial/menubtn.ejs | 2 +- layout/_partial/sidebar/header.ejs | 58 ------------ layout/_partial/sidebar/index.ejs | 87 ++++++++++++------ layout/_partial/sidebar/logo.ejs | 45 +++++++++ layout/_partial/sidebar/menu.ejs | 26 ++---- layout/_partial/sidebar/search.ejs | 42 +++++++++ layout/_partial/widgets/ghissues.ejs | 2 +- layout/_partial/widgets/ghuser.ejs | 4 - layout/_partial/widgets/markdown.ejs | 2 +- layout/_partial/widgets/recent.ejs | 12 ++- layout/_partial/widgets/related.ejs | 18 ++-- layout/_partial/widgets/search.ejs | 40 -------- layout/_partial/widgets/tagcloud.ejs | 2 +- layout/_partial/widgets/timeline.ejs | 2 +- layout/_partial/widgets/toc.ejs | 6 +- layout/layout.ejs | 8 +- scripts/helpers/parse_config.js | 34 +++---- source/css/_common/blur.styl | 9 +- source/css/_common/cap.styl | 2 +- source/css/_common/device.styl | 4 +- source/css/_defines/theme.styl | 8 ++ source/css/_layout/layout.styl | 20 +++- source/css/_layout/list.styl | 4 +- source/css/_layout/main.styl | 2 +- source/css/_layout/sidebar/footer.styl | 14 +-- .../sidebar/{header.styl => logo.styl} | 52 +++-------- source/css/_layout/sidebar/menu.styl | 44 +++++++++ source/css/_layout/sidebar/nav-area.styl | 2 + .../_layout/{widgets => sidebar}/search.styl | 91 +++++++++---------- source/css/_layout/sidebar/sidebar.styl | 32 ++++--- source/css/_layout/widgets/ghuser.styl | 23 ----- source/css/_layout/widgets/list.styl | 24 +++++ source/css/_layout/widgets/markdown.styl | 13 +++ source/css/_layout/widgets/recent.styl | 15 --- source/css/_layout/widgets/related.styl | 41 ++++++++- source/css/_layout/widgets/timeline.styl | 19 +++- source/css/_layout/widgets/toc_blog.styl | 2 +- source/css/_layout/widgets/toc_common.styl | 24 ++--- source/css/_layout/widgets/toc_wiki.styl | 45 ++++----- source/css/_layout/widgets/widgets.styl | 30 +++--- 43 files changed, 515 insertions(+), 440 deletions(-) delete mode 100644 layout/_partial/sidebar/header.ejs create mode 100644 layout/_partial/sidebar/logo.ejs create mode 100644 layout/_partial/sidebar/search.ejs rename source/css/_layout/sidebar/{header.styl => logo.styl} (67%) create mode 100644 source/css/_layout/sidebar/menu.styl create mode 100644 source/css/_layout/sidebar/nav-area.styl rename source/css/_layout/{widgets => sidebar}/search.styl (56%) create mode 100644 source/css/_layout/widgets/list.styl create mode 100644 source/css/_layout/widgets/markdown.styl delete mode 100644 source/css/_layout/widgets/recent.styl diff --git a/_config.yml b/_config.yml index abdb834..7d614fc 100755 --- a/_config.yml +++ b/_config.yml @@ -20,8 +20,8 @@ open_graph: ######## Sidebar ######## # 左上角显示的 logo 区域，包含图标、大标题、副标题 logo: - avatar: '[config.avatar](/about/)' # you can set avatar link in _config.yml or '[https://xxx.png](/about/)' - title: '[config.title](/)' # you can set html tag like: '[](/)' + avatar: '[${config.avatar}](/about/)' # you can set avatar link in _config.yml or '[https://xxx.png](/about/)' + title: '[${config.title}](/)' # you can set html tag like: '[](/)' subtitle: '' # '文字1 | 文字2' (鼠标放上去会切换到文字2) # 侧边栏主功能导航菜单 @@ -40,41 +40,41 @@ menu: site_tree: # 主页配置 home: - sidebar: search, recent, timeline - # 博客配置 + sidebar: recent, timeline + # 博客列表配置 blog: base_dir: blog # 只影响自动生成的页面路径 menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id - sidebar: search_blog, recent, timeline # for categories/tags/archives + sidebar: recent, timeline # for categories/tags/archives nav_tabs: # 近期发布 分类 标签 专栏 归档 and ... # '朋友文章': /friends/rss/ # 博客文章配置 post: menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id - sidebar: search_blog, toc, related, ghrepo, ghissues # for pages using 'layout:post' + sidebar: toc, related, ghrepo, ghissues, recent # for pages using 'layout:post' # 博客专栏配置 topic: base_dir: topic # 只影响自动生成的页面路径 menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 topic 的页面默认使用这里配置的 menu_id - sidebar: search_blog, toc, related # for topic + sidebar: toc, related # for topic # wiki配置 wiki: base_dir: wiki # 只影响自动生成的页面路径 menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id - sidebar: search_docs, toc, ghissues, related # for wiki + sidebar: toc, ghissues, related, recent # for wiki # 作者信息配置 author: base_dir: author # 只影响自动生成的页面路径 menu_id: post - sidebar: search_blog, recent, timeline + sidebar: recent, timeline # 错误页配置 error_page: menu_id: post '404': '/404.html' - sidebar: search, recent, timeline + sidebar: recent, timeline # 其它自定义页面配置 layout: page page: - sidebar: toc, search + sidebar: toc, timeline @@ -448,7 +448,7 @@ style: border-radius: card: 12px block: 12px - bar: 6px + bar: 8px image: 6px color: # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可） @@ -485,6 +485,7 @@ default: project: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/image/2779789.png banner: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/banner/books.jpg topic: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/image/10433048.png + sidebar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg api_host: ghapi: https://api.github.com diff --git a/_data/widgets.yml b/_data/widgets.yml index 1c0cc5c..20448b9 100644 --- a/_data/widgets.yml +++ b/_data/widgets.yml @@ -2,21 +2,7 @@ # layout即组件布局，支持自定义的有： # - markdown: 渲染 md 文本 # -search: - layout: search - filter: auto # auto or 'path' - -search_blog: - layout: search - filter: /blog/ # auto or 'path' - placeholder: 文章搜索 - -search_docs: - layout: search - filter: /wiki/ # auto or 'path' - placeholder: 文档搜索 - ghrepo: layout: ghrepo related: @@ -33,7 +19,7 @@ ghissues: recent: layout: recent rss: # /atom.xml # npm i hexo-generator-feed - limit: 5 # Count of posts + limit: 10 # Count of posts # TOC (valid only in layout:post/wiki) toc: @@ -41,7 +27,7 @@ toc: list_number: false min_depth: 2 max_depth: 5 - fallback: recent # Use a backup widget when toc does not exist. + fallback: # recent # Use a backup widget when toc does not exist. collapse: false # true / false / auto # github user info diff --git a/layout/_partial/main/header/index.ejs b/layout/_partial/main/header/index.ejs index ee9e064..8ec1be6 100644 --- a/layout/_partial/main/header/index.ejs +++ b/layout/_partial/main/header/index.ejs @@ -1,3 +1,3 @@ <% if (page.header != 'auto' && page.header != false) { %> - <%- partial('../../sidebar/header', {where: 'main'}) %> + <%- partial('../../sidebar/logo', {logo: theme.logo, where: 'main'}) %> <% } %> diff --git a/layout/_partial/menubtn.ejs b/layout/_partial/menubtn.ejs index 8de06de..64a91a0 100644 --- a/layout/_partial/menubtn.ejs +++ b/layout/_partial/menubtn.ejs @@ -1,5 +1,5 @@ diff --git a/layout/_partial/sidebar/header.ejs b/layout/_partial/sidebar/header.ejs deleted file mode 100644 index cf8613a..0000000 --- a/layout/_partial/sidebar/header.ejs +++ /dev/null @@ -1,58 +0,0 @@ -<% -var proj; -if (page.layout === 'wiki' && page.wiki) { - proj = theme.wiki.tree[page.wiki]; -} -function layoutTitle(main, url, sub) { - var el = ''; - el += ''; - el += '
' + main + '
'; - if (sub) { - let arr = sub.split('|'); - if (arr.length > 1) { - el += '
' + arr.shift().trim() + '
'; - el += '
' + arr.join('|') + '
'; - } else { - el += '
' + sub + '
'; - } - } - el += ''; - return el; -} - -function layoutDiv() { - var el = ''; - if (page.layout == 'wiki' && page.menu_id == 'wiki') { - return el; - } - el += '
'; - - el += '
'; - if (md_text(theme.logo.avatar)) { - el += ''; - if (theme.style.animated_avatar.animate) { - el += '
'; - } - el += ''; - el += ''; - } - let main = md_text(theme.logo.title); - if (main) { - let url = md_link(theme.logo.title); - el += layoutTitle(main, url, theme.logo.subtitle); - } - el += '
'; - - if (where != 'main') { - el += partial('menu', {where: where}); - } - el += '
'; - return el; -} -%> - -<%- layoutDiv() %> diff --git a/layout/_partial/sidebar/index.ejs b/layout/_partial/sidebar/index.ejs index 013cae7..64bcd24 100755 --- a/layout/_partial/sidebar/index.ejs +++ b/layout/_partial/sidebar/index.ejs @@ -28,10 +28,11 @@ if (page.sidebar == null) { if (page.layout == 'wiki' && page.wiki && theme.wiki?.tree[page.wiki]?.sidebar) { sidebar = theme.wiki.tree[page.wiki].sidebar } - + page.sidebar = sidebar } + console.log('s', sidebar); // parse array string if (typeof page.sidebar == 'string') { page.sidebar = page.sidebar.replace(/ /g, '').split(','); @@ -59,31 +60,6 @@ function layoutWidgets() { proj = theme.wiki.tree[page.wiki]; } el += '
'; - if (page.layout == 'wiki' && proj && page.menu_id == 'wiki') { - el += '
'; - // all products - el += ''; - el += ''; - el += __('btn.all_wiki'); - el += ''; - // this product - if (proj == undefined) { - // 如果没有项目名，则使用menu中显示的名字 - if (page.menu_id && theme.menu[page.menu_id] && md_link(theme.menu[page.menu_id])) { - proj = { - path: md_link(theme.menu[page.menu_id]), - wiki: __(md_text(theme.menu[page.menu_id])) - }; - } - } - if (proj != undefined) { - let main = proj.name || proj.title || page.wiki || page.title; - let url = proj.homepage.path; - let sub = proj.subtitle; - el += layoutTitle(main, url, sub); - } - el += '
'; - } if (page.sidebar) { page.sidebar.forEach((w, i) => { let name = '' @@ -142,9 +118,62 @@ function layoutFooterDiv() { } } +function layoutLogo() { + var logo = theme.logo + if (page.logo) { + logo = page.logo + } else if (page.wiki && page.layout == 'wiki' && theme.wiki.tree[page.wiki]) { + const proj = theme.wiki.tree[page.wiki] + var l = proj.logo + if (l) { + logo = l + } else if (proj.name || proj.icon) { + logo = { + icon: proj.icon || theme.default.project, + title: `[${proj.name || proj.title}](${url_for(proj.homepage?.path || '')})`, + subtitle: proj.subtitle + } + } + } else if (page.topic && page.layout == 'topic' && theme.topic.tree[page.topic]) { + const topic = theme.topic.tree[page.topic] + var l = topic.logo + if (l) { + logo = l + } else if (topic.name || topic.icon) { + logo = { + icon: topic.icon || theme.default.topic, + title: `[${topic.name || topic.title}](${url_for(topic.homepage?.path || '')})`, + subtitle: topic.subtitle + } + } + } + return partial('logo', {logo: logo, where: 'sidebar'}) +} + +function layoutNavArea() { + var search = {} + if (page.search) { + search = page.search + } else if (page.wiki && page.layout == 'wiki' && theme.wiki.tree[page.wiki]) { + const proj = theme.wiki.tree[page.wiki] + if (proj.search) { + search = proj.search + } + } else if (page.topic && page.layout == 'topic' && theme.topic.tree[page.topic]) { + const topic = theme.topic.tree[page.topic] + if (topic.search) { + search = topic.search + } + } + var el = '' + el += `
` + el += partial('search', {item: search}) + el += partial('menu', {where: 'sidebar'}) + el += `
` + return el +} %> -<% if (page.header == undefined || page.header == 'left' || page.header == 'auto') { %> - <%- partial('header', {where: 'sidebar'}) %> -<% } %> +<%- layoutLogo() %> +<%- layoutNavArea() %> <%- layoutWidgets() %> <%- layoutFooterDiv() %> diff --git a/layout/_partial/sidebar/logo.ejs b/layout/_partial/sidebar/logo.ejs new file mode 100644 index 0000000..f72a7e5 --- /dev/null +++ b/layout/_partial/sidebar/logo.ejs @@ -0,0 +1,45 @@ +<% +// logo.icon, logo.title, logo.subtitle, logo.url +function layoutTitle(main, url, sub) { + var el = '' + el += `` + el += `
${main}
` + if (sub) { + const arr = sub.split('|') + if (arr.length > 1) { + el += `
${arr.shift().trim()}
` + el += `
${arr.join('|')}
` + } else { + el += `
${sub}
` + } + } + el += `` + return el +} + +function layoutDiv() { + var el = '' + el += `
` + el += `
` + if (logo.icon) { + el += `
` + } else if (md_text(logo.avatar)) { + el += `` + if (theme.style.animated_avatar.animate) { + el += `
` + } + el += `` + el += `` + } + const main = md_text(logo.title) + if (main) { + let url = md_link(logo.title) + el += layoutTitle(main, url, logo.subtitle) + } + el += `
` + el += '
' + return el +} +%> + +<%- layoutDiv() %> diff --git a/layout/_partial/sidebar/menu.ejs b/layout/_partial/sidebar/menu.ejs index 52fde0e..5827cde 100644 --- a/layout/_partial/sidebar/menu.ejs +++ b/layout/_partial/sidebar/menu.ejs @@ -1,26 +1,18 @@ <% function layoutDiv() { - var el = ''; - el += '` + return el } %> diff --git a/layout/_partial/sidebar/search.ejs b/layout/_partial/sidebar/search.ejs new file mode 100644 index 0000000..ce82bc4 --- /dev/null +++ b/layout/_partial/sidebar/search.ejs @@ -0,0 +1,42 @@ +<% +if (item.filter == null) { + item.filter = 'auto' +} +function layoutDiv() { + var el = '' + el += `
` + el += `
` + var filter = '' + if (item.filter == 'auto') { + if (page.layout == 'wiki') { + let matches = page.path.match(/(.*?)\/(.*?)\//i) + if (matches?.length > 0) { + filter = matches[0] + } + } + } else { + if (item.filter?.length > 0) { + filter = item.filter + } + } + el += `` + el += `` + el += `` + el += ` 0) { + if (!filter.startsWith('/')) { + filter = '/' + filter + } + el += ` data-filter="${filter}"` + el += ` placeholder="${item.placeholder || __('search.search_in', filter)}">` + } else { + el += ` placeholder="${item.placeholder || __('search.search')}">` + } + el += `
` + el += `
` + el += `
${__('search.no_results')}
` + el += `
` + return el +} +%> +<%- layoutDiv() %> diff --git a/layout/_partial/widgets/ghissues.ejs b/layout/_partial/widgets/ghissues.ejs index e01a2fd..5aa3eef 100644 --- a/layout/_partial/widgets/ghissues.ejs +++ b/layout/_partial/widgets/ghissues.ejs @@ -23,7 +23,7 @@ function layoutDiv() { } el += ''; if (item.title) { - el += '
'; + el += '
'; el += '' + item.title + ''; el += '
'; } diff --git a/layout/_partial/widgets/ghuser.ejs b/layout/_partial/widgets/ghuser.ejs index b8abff6..10112bb 100644 --- a/layout/_partial/widgets/ghuser.ejs +++ b/layout/_partial/widgets/ghuser.ejs @@ -45,10 +45,6 @@ function layoutDiv() { el += ''; el += 'Follow'; el += ''; - // menu - if (item.menu) { - el += partial('../sidebar/menu', {where: 'sidebar'}); - } el += '
'; el += ''; return el; diff --git a/layout/_partial/widgets/markdown.ejs b/layout/_partial/widgets/markdown.ejs index 6241f89..802192e 100644 --- a/layout/_partial/widgets/markdown.ejs +++ b/layout/_partial/widgets/markdown.ejs @@ -4,7 +4,7 @@ function layoutDiv() { var el = ''; el += ''; if (item.title?.length > 0) { - el += '
'; + el += '
'; el += '' + item.title + ''; el += '
'; } diff --git a/layout/_partial/widgets/recent.ejs b/layout/_partial/widgets/recent.ejs index e5ed8d8..545c090 100644 --- a/layout/_partial/widgets/recent.ejs +++ b/layout/_partial/widgets/recent.ejs @@ -1,8 +1,8 @@ <% function layoutDiv() { - var el = ''; + var el = ''; // header - el += '
'; + el += '
'; el += '' + __("meta.recent_update") + ''; if (item.rss) { el += ''; @@ -25,11 +25,12 @@ function layoutDiv() { arr = site.posts.filter( p => p.title && p.title.length > 0) arr = arr.sort("updated", -1) } - el += '
'; + el += '
'; arr.length = item.limit arr.forEach(post => { if (!post) { return } - el += ''; + const isActive = post.path == page.path + el += `` el += '' if (post.layout == 'wiki') { let proj = theme.wiki.tree[post.wiki]; @@ -39,6 +40,9 @@ function layoutDiv() { } } el += (post.title || post.seo_title || post.wiki) + ''; + if (isActive) { + el += `` + } el += ''; el += ''; }); diff --git a/layout/_partial/widgets/related.ejs b/layout/_partial/widgets/related.ejs index d218140..189524d 100644 --- a/layout/_partial/widgets/related.ejs +++ b/layout/_partial/widgets/related.ejs @@ -8,14 +8,18 @@ function relatedPostsInTopic() { return '' } var el = '' - el += `` - el += `
` + el += `` + el += `
` el += `${__('btn.topic') + __('symbol.colon') + topic.name}` el += `
` - el += `
` + el += `
` for (let post of topic.pages) { - el += `` + const isActive = post.path == page.path + el += `` el += `${post.title}` + if (isActive) { + el += `` + } el += `` } el += `
` @@ -30,11 +34,11 @@ function relatedWiki() { const relatedItems = thisItemObject.relatedItems var el = '' for (let relatedItem of relatedItems) { - el += `` - el += `
` + el += `` + el += `
` el += `${__('meta.more') + __('symbol.colon') + relatedItem.name}` el += `
` - el += `
` + el += `
` for (let id of relatedItem.items) { // 同一个分组中的其它项目 let item = theme.wiki.tree[id] diff --git a/layout/_partial/widgets/search.ejs b/layout/_partial/widgets/search.ejs index 9cb563d..e69de29 100644 --- a/layout/_partial/widgets/search.ejs +++ b/layout/_partial/widgets/search.ejs @@ -1,40 +0,0 @@ -<% -function layoutDiv() { - var el = '' - el += '
' - el += '
' - el += '
' - var filter = '' - if (item.filter == 'auto') { - if (page.layout == 'wiki') { - let matches = page.path.match(/(.*?)\/(.*?)\//i) - if (matches?.length > 0) { - filter = matches[0] - } - } - } else { - if (item.filter?.length > 0) { - filter = item.filter - } - } - el += ' 0) { - if (!filter.startsWith('/')) { - filter = '/' + filter - } - el += ' data-filter="' + filter + '"' - el += ' placeholder="' + (item.placeholder || __('search.search_in', filter)) + '">' - } else { - el += ' placeholder="' + (item.placeholder || __('search.search')) + '">' - } - el += '' - el += '
' - el += '
' - el += '
' + __('search.no_results') + '
' - el += '
' - el += '
' - el += '' - return el -} -%> -<%- layoutDiv() %> diff --git a/layout/_partial/widgets/tagcloud.ejs b/layout/_partial/widgets/tagcloud.ejs index 2e9f861..8ebf841 100644 --- a/layout/_partial/widgets/tagcloud.ejs +++ b/layout/_partial/widgets/tagcloud.ejs @@ -10,7 +10,7 @@ function layoutDiv() { opts.class = 'tag '; el += ''; if (item.title) { - el += '
'; + el += '
'; el += '' + item.title + ''; el += '
'; } diff --git a/layout/_partial/widgets/timeline.ejs b/layout/_partial/widgets/timeline.ejs index 575bf42..e2098f3 100644 --- a/layout/_partial/widgets/timeline.ejs +++ b/layout/_partial/widgets/timeline.ejs @@ -6,7 +6,7 @@ function layoutDiv() { } el += ''; if (item.title) { - el += '
'; + el += '
'; el += '' + item.title + ''; el += '
'; } diff --git a/layout/_partial/widgets/toc.ejs b/layout/_partial/widgets/toc.ejs index 559f1ef..a29eacb 100644 --- a/layout/_partial/widgets/toc.ejs +++ b/layout/_partial/widgets/toc.ejs @@ -40,6 +40,9 @@ function layoutDocTree(pages) { } el += `` el += `${p.title}` + if (isActive.length > 0) { + el += `` + } el += `` } if (p.path === page.path) { @@ -108,7 +111,8 @@ function layoutDiv(fallback) { } el += `` } else if (item.fallback) { - el += partial(item.fallback, {item: theme.data.widgets[item.fallback]}) + const fallback = theme.data.widgets[item.fallback] + el += partial(fallback.layout, {item: fallback}) } return el } diff --git a/layout/layout.ejs b/layout/layout.ejs index 1e1e36b..f134257 100755 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -5,13 +5,17 @@ <%- partial('_partial/cover/index') %>
-
+
<%- partial('_partial/main/header/index') %> <%- body %> <%- partial('_partial/main/footer') %> <%- partial('_partial/menubtn') %> +
diff --git a/scripts/helpers/parse_config.js b/scripts/helpers/parse_config.js index afdac5a..2d79bcb 100644 --- a/scripts/helpers/parse_config.js +++ b/scripts/helpers/parse_config.js @@ -7,33 +7,35 @@ hexo.extend.helper.register('md_text', function(args) { if (args == undefined) { - return ''; + return '' } - let tmp = args.split(']('); + let tmp = args.split('](') if (tmp.length > 1) { - tmp = tmp[0]; + tmp = tmp[0] if (tmp.length > 1) { - tmp = tmp.substring(1, tmp.length); + tmp = tmp.substring(1, tmp.length) } } - if (tmp == 'config.title') { - tmp = hexo.config.title; - } else if (tmp == 'config.avatar') { - tmp = hexo.config.avatar; + if (tmp == 'config.title' || tmp == '${config.title}') { + tmp = hexo.config.title + } else if (tmp == 'config.avatar' || tmp == '${config.avatar}') { + tmp = hexo.config.avatar } - return tmp; -}); + return tmp +}) hexo.extend.helper.register('md_link', function(args) { if (args == undefined) { - return ''; + return '' } - let tmp = args.split(']('); + let tmp = args.split('](') if (tmp.length > 1) { - tmp = tmp[1]; + tmp = tmp[1] if (tmp.length > 1) { - tmp = tmp.substring(0, tmp.length-1); + tmp = tmp.substring(0, tmp.length-1) } + } else { + return '' } - return tmp; -}); + return tmp +}) diff --git a/source/css/_common/blur.styl b/source/css/_common/blur.styl index 80bc72a..3256f33 100644 --- a/source/css/_common/blur.styl +++ b/source/css/_common/blur.styl @@ -1,13 +1,6 @@ :root --blur-px: 12px - --blur-bg: alpha(white, .5) -if hexo-config('style.darkmode') == 'auto' - @media (prefers-color-scheme: dark) - :root - --blur-bg: alpha(black, .5) -if hexo-config('style.darkmode') == 'always' - :root - --blur-bg: alpha(black, .5) + --blur-bg: var(--alpha50) blur-effect() background: var(--blur-bg) diff --git a/source/css/_common/cap.styl b/source/css/_common/cap.styl index e36ee91..7f2d81d 100644 --- a/source/css/_common/cap.styl +++ b/source/css/_common/cap.styl @@ -2,7 +2,7 @@ font-weight: 500 font-size: $fs-12 scrollbar-width: none - color: var(--text-p3) + color: var(--text-p2) &.blue color: darken($color-md-blue, 6) &.cyan diff --git a/source/css/_common/device.styl b/source/css/_common/device.styl index 5de3b82..dda2e16 100644 --- a/source/css/_common/device.styl +++ b/source/css/_common/device.styl @@ -30,9 +30,9 @@ cursor: pointer color: var(--text-p0) background: none - padding: 0.5rem + padding: 8px line-height: 0 - font-size: 20px + font-size: 24px margin: 0 diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl index 292f757..53610e2 100644 --- a/source/css/_defines/theme.styl +++ b/source/css/_defines/theme.styl @@ -35,6 +35,10 @@ set_text_light() :root --site-bg: hsl($color-background-h, $color-background-s, $color-background-l) --card: hsl($color-block-h, $color-block-s, 100) + --alpha20: rgba(white, 0.2) + --alpha50: rgba(white, 0.5) + --alpha75: rgba(white, 0.75) + --alpha100: white --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) @@ -48,6 +52,10 @@ set_darkmode() --block: hsl($color-block-h, $color-block-s, 16) --block-border: hsl($color-block-h, $color-block-s, 24) --block-hover: hsl($color-block-h, $color-block-s, 20) + --alpha20: rgba(black, 0.2) + --alpha50: rgba(black, 0.5) + --alpha75: rgba(black, 0.75) + --alpha100: black 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 6fb08f0..f3dab37 100644 --- a/source/css/_layout/layout.styl +++ b/source/css/_layout/layout.styl @@ -10,7 +10,7 @@ flex-shrink: 0 position: sticky position: -webkit-sticky - top: 0 + top: 8px .l_body .l_main flex-shrink: 1 @@ -20,6 +20,17 @@ // 手机布局 +.main-mask + position: fixed + pointer-events: none + top: 0 + left: 0 + width: 100% + height: 100% + background: rgba(black, 0.5) + z-index: 9 + opacity 0 + trans1 opacity @media screen and (max-width: $device-mobile-max) .mobile-only display: block !important @@ -29,10 +40,10 @@ position: fixed transform: translateX(-320px) margin: 0 - left: 0 + left: 8px background: var(--site-bg) box-shadow: $boxshadow-card-float - z-index: 9 + z-index: 10 .l_main max-width: 100% .l_body.mobile @@ -41,3 +52,6 @@ .l_body.mobile.sidebar .l_left transform: translateX(0px) + .main-mask + opacity 1 + pointer-events: inherit \ No newline at end of file diff --git a/source/css/_layout/list.styl b/source/css/_layout/list.styl index 30a1b73..80e9fff 100644 --- a/source/css/_layout/list.styl +++ b/source/css/_layout/list.styl @@ -1,10 +1,10 @@ // list -.post-list +.l_main .post-list margin: 1rem .post-title:first-child margin-top: .5rem -.post-list +.l_main .post-list .post-title font-weight: 500 margin: 1.25rem 0 .75rem 0 diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl index c11df98..d5d0ab7 100644 --- a/source/css/_layout/main.styl +++ b/source/css/_layout/main.styl @@ -5,7 +5,7 @@ margin-left: "calc(2 * %s)" % var(--gap-l) margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left)) @media screen and (min-width: $device-mobile-max) - padding-top: "calc(2 * %s)" % var(--gap-l) + padding-top: 8px @media screen and (max-width: $device-mobile-max) padding-top: 1rem header diff --git a/source/css/_layout/sidebar/footer.styl b/source/css/_layout/sidebar/footer.styl index 590fe41..0910bef 100644 --- a/source/css/_layout/sidebar/footer.styl +++ b/source/css/_layout/sidebar/footer.styl @@ -1,4 +1,4 @@ -.l_left>.footer +.l_left footer.footer margin: 0.5rem var(--gap-l) 1rem .social-wrap @@ -9,23 +9,15 @@ line-height: 0 display: inline-block padding: 6px - border-radius: 4px + border-radius: 32px filter: grayscale(100%) overflow: hidden background: transparent trans3: box-shadow background transform &:hover - color: $color-hover z-index: 1 filter: unset - transform: translateY(-1px) - background: linear-gradient(145deg, #ddd, #fff) - box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff - if hexo-config('style.darkmode') == 'auto' - @media (prefers-color-scheme: dark) - box-shadow: none - if hexo-config('style.darkmode') == 'always' - box-shadow: none + background: var(--alpha100) .proj-wrap display: grid diff --git a/source/css/_layout/sidebar/header.styl b/source/css/_layout/sidebar/logo.styl similarity index 67% rename from source/css/_layout/sidebar/header.styl rename to source/css/_layout/sidebar/logo.styl index 5643d46..450eac9 100644 --- a/source/css/_layout/sidebar/header.styl +++ b/source/css/_layout/sidebar/logo.styl @@ -1,44 +1,15 @@ -.l_left - nav.menu - margin-bottom: 0 - -nav.menu - margin: 1rem 0 - background: var(--block) - border: 1px solid var(--block-border) - border-radius: 6px - display: flex - flex-wrap: wrap - &::-webkit-scrollbar - display: none - &::-webkit-scrollbar-track-piece - background: transparent - &::-webkit-scrollbar-thumb - display: none - a.nav-item - text-overflow: ellipsis - word-break: keep-all - margin: 1px - border-radius: 4px - font-size: $fs-14 - font-weight: 500 - overflow: hidden - padding: 0.375rem 0.5rem - color: var(--text-p3) - text-align: center - &.active, &:hover - color: var(--text-p1) - background: var(--card) - box-shadow: $boxshadow-button - -.l_left .menu a.nav-item - flex-grow: 1 - - .logo-wrap display: flex align-items: center overflow: hidden + height: 48px + img + object-fit: cover + .icon + width: 48px + height: 48px + margin-right: 1rem + border-radius: 4px a color: inherit display: flex @@ -46,10 +17,10 @@ nav.menu a.avatar display: block position: relative - width: 50px - height: 50px + width: 48px + height: 48px flex-shrink: 0 - border-radius: 50px + border-radius: 48px overflow: hidden margin-right: 1rem div.bg @@ -58,7 +29,6 @@ nav.menu background-size: cover img.avatar margin: 2px - object-fit: cover width: "calc(100% - 2 * %s)" % @margin height: "calc(100% - 2 * %s)" % @margin border-radius: @width diff --git a/source/css/_layout/sidebar/menu.styl b/source/css/_layout/sidebar/menu.styl new file mode 100644 index 0000000..350bea1 --- /dev/null +++ b/source/css/_layout/sidebar/menu.styl @@ -0,0 +1,44 @@ +.nav-area .menu + width: 100% + display: grid + margin: 8px 0 + grid-template-columns: repeat(4, 1fr) + grid-gap: 8px + &::-webkit-scrollbar + display: none + &::-webkit-scrollbar-track-piece + background: transparent + &::-webkit-scrollbar-thumb + display: none + + .nav-item + box-sizing: border-box + text-overflow: ellipsis + word-break: keep-all + width: 100% + line-height: 40px + border-radius: $border-bar + font-size: $fs-15 + font-weight: 500 + color: var(--text-p3) + text-align: center + background: var(--alpha50) + @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px)))) + backdrop-filter: saturate(200%) blur(var(--blur-px)) + -webkit-backdrop-filter: saturate(200%) blur(var(--blur-px)) + trans1 background + position: relative + &.active, &:hover + color: var(--text-p1) + background: var(--alpha100) + &.active:after + content: '' + position absolute + width: 16px + height: 2px + left: 50% + transform: translateX(-50%) + border-radius: 2px + bottom: 2px + background: var(--text-p1) + diff --git a/source/css/_layout/sidebar/nav-area.styl b/source/css/_layout/sidebar/nav-area.styl new file mode 100644 index 0000000..fba7b37 --- /dev/null +++ b/source/css/_layout/sidebar/nav-area.styl @@ -0,0 +1,2 @@ +.nav-area + margin: 32px var(--gap-l) 8px \ No newline at end of file diff --git a/source/css/_layout/widgets/search.styl b/source/css/_layout/sidebar/search.styl similarity index 56% rename from source/css/_layout/widgets/search.styl rename to source/css/_layout/sidebar/search.styl index e7e2ede..1e68a04 100644 --- a/source/css/_layout/widgets/search.styl +++ b/source/css/_layout/sidebar/search.styl @@ -1,57 +1,80 @@ -.widgets .widget-wrapper.search - margin-bottom: 0 .search-wrapper width: 100% >.search-form position: sticky + margin-bottom: 8px top: 1rem + height: 40px display: flex flex-direction: row align-items: center transition: 0.38s ease-out z-index: 0 + border-radius: $border-bar + color: var(--text-p0) + background: var(--alpha50) + &:has(input:focus) + background: var(--alpha100) .search-input width: 100% - padding: 0.5rem 0 - line-height: 1.5 + line-height: 16px box-sizing: border-box font-family: $ff-body font-size: $fs-13 + padding: 12px 0 color: var(--text-p0) + .search-button + border-radius: $border-bar + line-height: 40px + .search-icon + width: 44px + margin-left: 4px + color: var(--text-p2) + margin-bottom: 2px + path[p-id="1562"] + color: $color-theme &.noresult[searching='true'] .search-icon path[p-id="1562"] color: $c-red - .search-form - border: 1px solid $c-red .search-no-result display: none - margin: 1em auto color: var(--text-p1) text-align: center font-size: $fs-14 padding: 2rem - background: var(--block) - border-radius: $border-bar + background: var(--alpha20) + border-radius: $border-card + #search-result - ul.search-result-list + max-height: 60vh + overflow: scroll + border-radius: $border-card + &:empty + display: none + .search-result-list padding: 0 margin: 0 list-style-type: none - li - margin: 1em auto - &:hover - .search-result-title - color: $color-hover + li a + display: block + background: var(--alpha20) + line-height: 1.2 + padding: 0.75rem 1rem + border-radius: $border-card + trans1 background + &:hover + background: var(--alpha100) + li+li + margin-top: 8px .search-result-title color: var(--text-p1) font-weight: 700 - line-height: 1.2 .search-result-content overflow: hidden @@ -60,46 +83,18 @@ max-height: 13em text-align: justify font-size: $fs-12 - line-height: 1.2 display: -webkit-box -webkit-box-orient: vertical overflow: hidden - -webkit-line-clamp: 3 + -webkit-line-clamp: 2 .search-keyword - border-bottom: 1px dashed $color-hover - color: $color-hover + color: var(--text-p1) + border-bottom: 1px dashed var(--text-p1) font-weight: bold - .search-wrapper.noresult[searching='true'] .search-no-result display: block - -.widget-wrapper - .search-form - top: 0 - background: var(--card) - border: 1px solid var(--block-border) - border-radius: $border-bar - .search-input - text-indent: 0.75rem - padding-right: 2rem - .search-icon - margin: 2px - position absolute - right: 0 - pointer-events: none - color: var(--text-p2) - padding: 0.5rem - border-radius: 'calc(%s - 2px)' % $border-bar - path[p-id="1562"] - color: $color-theme - - #search-result,.search-no-result - margin-top: 1rem - -.widget-wrapper:not(:first-child) - .search-wrapper - margin-top: -1rem \ No newline at end of file + margin-bottom: 8px diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl index 07ee045..10ff364 100644 --- a/source/css/_layout/sidebar/sidebar.styl +++ b/source/css/_layout/sidebar/sidebar.styl @@ -1,9 +1,8 @@ .l_left - display: flex - flex-direction: column - word-break: break-all - text-align: justify - height: 100vh + margin: 8px + height: 'calc(%s - 16px)' % 100vh + border-radius: $border-card + overflow: hidden .header margin: var(--gap-l) var(--gap-l) 0 margin-top: "calc(2 * %s)" % var(--gap-l) @@ -13,15 +12,20 @@ @media screen and (max-width: $device-mobile-max) height: 100vh - -.l_left[layout=wiki] - padding-bottom: 0 - height: 100vh - @media screen and (max-width: $device-mobile-max) - height: 100vh - .widgets >:last-child - margin-bottom: 6rem - +.l_left + .sidebar-bg + position absolute + width: 100% + height: 100% + object-fit: cover + background: var(--text-meta) + .sidebar-container + height: 100% + --blur-px: 50px + display: flex + flex-direction: column + word-break: break-all + text-align: justify .l_left .widgets .widget-wrapper.logo-wrap.wiki .widget-body display: flex diff --git a/source/css/_layout/widgets/ghuser.styl b/source/css/_layout/widgets/ghuser.styl index afbed5f..015070a 100644 --- a/source/css/_layout/widgets/ghuser.styl +++ b/source/css/_layout/widgets/ghuser.styl @@ -48,29 +48,6 @@ &:hover background: $color-hover - .menu - margin-bottom: 0 - background: none - border: 0 - a - margin: 0 - &.active - box-shadow: none - position: relative - background: none - &:after - content: '' - position: absolute - height: 3px - bottom: 0 - width: 32px - left: 'calc(50% - 0.5 * %s)' % @width - border-radius: 4px - background: $color-theme - &:hover - box-shadow: none - background: var(--block) - .buttons margin: 1rem 0 align-self: stretch diff --git a/source/css/_layout/widgets/list.styl b/source/css/_layout/widgets/list.styl new file mode 100644 index 0000000..f7134c7 --- /dev/null +++ b/source/css/_layout/widgets/list.styl @@ -0,0 +1,24 @@ +.widget-wrapper.post-list .widget-body + margin-top: 0.25rem + a + line-height: 1 + font-size: $fs-14 + padding: 8px 16px + display: block + border-radius: $border-bar + color: var(--text-p1) + trans1 background + &.active + background: var(--alpha50) + &:hover + background: var(--alpha100) + a+a + margin-top: 2px + a + display: flex + justify-content: space-between + align-items: center + .title + txt-ellipsis() + .icon + flex-shrink: 0 \ No newline at end of file diff --git a/source/css/_layout/widgets/markdown.styl b/source/css/_layout/widgets/markdown.styl new file mode 100644 index 0000000..08170fa --- /dev/null +++ b/source/css/_layout/widgets/markdown.styl @@ -0,0 +1,13 @@ +.widget-wrapper.markdown + .widget-body + border-radius: $border-card + padding: 4px 16px + background: var(--alpha50) + + a + trans1 all + border-bottom: 1px solid var(--text-p0) + color: var(--text-p0) + &:hover + color: $color-hover + border-bottom: 1px solid $color-hover \ No newline at end of file diff --git a/source/css/_layout/widgets/recent.styl b/source/css/_layout/widgets/recent.styl deleted file mode 100644 index 4c446e9..0000000 --- a/source/css/_layout/widgets/recent.styl +++ /dev/null @@ -1,15 +0,0 @@ -.widget-wrapper.recent .widget-body - display: flex - flex-direction: column - align-items: flex-start - margin-top: 0.25rem - a - line-height: 1.2 - font-size: $fs-13 - margin: 0.25rem 0 - .title - font-size: $fs-13 - color: var(--text-p2) - &:hover - color: $color-hover - diff --git a/source/css/_layout/widgets/related.styl b/source/css/_layout/widgets/related.styl index 11a7632..f8d44ee 100644 --- a/source/css/_layout/widgets/related.styl +++ b/source/css/_layout/widgets/related.styl @@ -1,8 +1,39 @@ -.widget-wrapper.related .widget-body a - margin-top: 0.5rem - margin-bottom: 1rem - .title + +.widget-wrapper.post-card .widget-body + max-width: 100% + margin: 1rem 0 + .item+.item + margin-top: 8px + .item + line-height: 1.2 + background: var(--alpha50) + padding: 10px 16px + border-radius: $border-card + display: block + border-left: 0 + box-sizing: border-box + .title + color: var(--text-p1) + font-weight: 500 + font-size: 1rem + display: -webkit-box + -webkit-box-orient: vertical + overflow: hidden + -webkit-line-clamp: 1 font-weight: 700 font-size: $fs-14 .excerpt - -webkit-line-clamp: 3 + color: var(--text-p3) + font-size: $fs-12 + margin-top: 0.5rem + display: -webkit-box + -webkit-box-orient: vertical + overflow: hidden + -webkit-line-clamp: 2 + + .item + trans1 background + .item.active + background: var(--card) + .item:hover + background: var(--card) diff --git a/source/css/_layout/widgets/timeline.styl b/source/css/_layout/widgets/timeline.styl index fdd9d6d..cae30d4 100644 --- a/source/css/_layout/widgets/timeline.styl +++ b/source/css/_layout/widgets/timeline.styl @@ -3,10 +3,10 @@ margin-top: 0.5rem .tag-plugin.timeline .timenode .header - margin-bottom: 0.5rem + margin: 0.5rem 16px txt-ellipsis() .user-info - background: var(--block) + background: var(--alpha50) &:hover background: $color-hover color: var(--card) @@ -14,4 +14,19 @@ display: none &+.timenode margin-top: 0.75rem + .header p + color: var(--text-p2) + .body + border-radius: $border-card + background: var(--alpha50) + box-shadow: none + + a + trans1 all + border-bottom: 1px solid var(--text-p0) + color: var(--text-p0) + &:hover + color: $color-hover + border-bottom: 1px solid $color-hover + \ No newline at end of file diff --git a/source/css/_layout/widgets/toc_blog.styl b/source/css/_layout/widgets/toc_blog.styl index d696c65..b37746e 100644 --- a/source/css/_layout/widgets/toc_blog.styl +++ b/source/css/_layout/widgets/toc_blog.styl @@ -1,3 +1,3 @@ .widget-wrapper.toc.single .doc-tree &.active>.toc - border-left: 2px solid var(--block-hover) + border-left: 2px solid var(--alpha50) diff --git a/source/css/_layout/widgets/toc_common.styl b/source/css/_layout/widgets/toc_common.styl index 3b52fbd..c89a19f 100644 --- a/source/css/_layout/widgets/toc_common.styl +++ b/source/css/_layout/widgets/toc_common.styl @@ -1,12 +1,12 @@ -.widget-wrapper.toc .widget-header - margin-top: 1rem .widget-wrapper.toc.single .widget-header font-weight: 500 font-size: $fs-12 - >span - margin: 0.5rem 0 +.toc-item + margin-top: 2px +.toc-child + margin-top: 2px .widget-wrapper.toc .widget-body margin-top: 0 ul ul, ul ol @@ -14,8 +14,6 @@ ol ul, ol ol padding-left: 0 - .doc-tree - margin: 4px 0 .toc padding: 0 margin: 0 @@ -43,7 +41,7 @@ padding: 0 list-style: none &.active - color: $color-theme + background: var(--alpha50) border-left-color: @color .toc-child .toc-item padding: 0 @@ -51,8 +49,9 @@ color: inherit display: block line-height: 1.2 - border-radius: 4px + border-radius: $border-bar position: relative + trans1 background &:before content: '' position: absolute @@ -61,14 +60,15 @@ bottom: 'calc(50% - %s)' % 6px width: 2px border-radius: 2px - background: $color-theme + background: var(--text-p0) visibility: hidden - &:hover - background: var(--block-hover) &.active - color: $color-theme !important + background: var(--alpha50) &:before visibility: visible + &:hover + background: var(--alpha100) + // 始终折叠 .widget-wrapper.toc[collapse='true'] diff --git a/source/css/_layout/widgets/toc_wiki.styl b/source/css/_layout/widgets/toc_wiki.styl index 92a04ae..9e03048 100644 --- a/source/css/_layout/widgets/toc_wiki.styl +++ b/source/css/_layout/widgets/toc_wiki.styl @@ -1,48 +1,49 @@ -.widget-wrapper.toc.multi .widget-header - color: var(--text-p1) - font-size: $fs-14 - +.doc-tree+.doc-tree + margin-top: 2px // 其它分页链接 .widget-wrapper.toc.multi .doc-tree border-radius: $border-bar - background: var(--block) overflow: hidden - border: 1px solid var(--block-border) a.doc-tree-link - color: var(--text-p2) - padding: 0.5rem - display: block - font-size: $fs-12 + color: var(--text-p1) + padding: 0.5rem 16px + display: flex + justify-content: space-between + align-items: center + font-size: $fs-14 font-weight: 500 position: relative + trans1 background + .toc-text + txt-ellipsis() + .icon + flex-shrink: 0 &:after position: absolute right: .5rem &.active - color: var(--text-p1) &:only-child - background: var(--card) + background: var(--alpha100) &:hover - background: var(--block-hover) - &:after - content: '+' + background: var(--alpha50) // 当前分页链接 .widget-wrapper.toc.multi .doc-tree.active a.doc-tree-link - background: var(--block) - font-weight: 700 - &:not(:only-child) - border-bottom: 1px solid var(--block-border) + background: var(--alpha100) + font-weight: 500 &:hover:after content: none >.toc - padding: 4px - background: var(--card) + padding: 4px 10px + border: 1px solid var(--alpha50) + background: var(--alpha20) + border-bottom-left-radius: $border-bar + border-bottom-right-radius: $border-bar a.toc-link:before left: -2px width: 4px a.toc-link:hover - background: var(--block) + background: var(--alpha100) diff --git a/source/css/_layout/widgets/widgets.styl b/source/css/_layout/widgets/widgets.styl index 798a4e7..266d2b0 100644 --- a/source/css/_layout/widgets/widgets.styl +++ b/source/css/_layout/widgets/widgets.styl @@ -9,6 +9,7 @@ scrollbar(0, 0) z-index: 1 line-height: 1.2 + margin: 0 var(--gap-l) .widget-wrapper .widget-header padding-left: var(--gap-l) @@ -17,32 +18,30 @@ justify-content: space-between align-items: center font-weight: 500 - position: sticky - top: -2px - background: var(--site-bg) - padding-top: 2px - z-index 1 + line-height: 28px .item display: block - >span - margin: 0.25rem 0 + >span text-align: left &:empty display: none .cap-action - hover-block 4px 4px line-height: 0 - color: var(--text-meta) + color: var(--text-p2) trans2: color background + border-radius: 4px + padding: 6px + margin-right: -4px .icon - fill: var(--text-meta) + fill: var(--text-p2) &:hover color: $color-hover + background: var(--alpha100) .icon fill: $color-hover .widget-body - margin: 0.5rem var(--gap-l) + margin: 0.5rem 0 color: var(--text-p1) p margin-top: .5em @@ -50,11 +49,8 @@ line-height: 1.5 .widget-header+.widget-body margin-top: 0 - .widget-wrapper+.widget-wrapper .widget-header - margin-top: 3rem - .widget-wrapper+.widget-wrapper.toc .widget-header - margin-top: 1rem + .widget-wrapper - display: block - margin: 2rem 0 \ No newline at end of file + display: block + margin: 32px 0 \ No newline at end of file