From cb717580a06d6392f73c5416ae112c6d33a5c0f4 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Tue, 6 Feb 2024 14:07:46 +0800 Subject: [PATCH] [opt] banner --- _config.yml | 6 +- .../_partial/main/navbar/article_banner.ejs | 94 +++++++++++++++---- .../_partial/main/navbar/article_top_area.ejs | 33 ------- layout/_partial/main/navbar/author_banner.ejs | 29 ------ layout/_partial/sidebar/logo.ejs | 2 +- layout/archive.ejs | 11 ++- scripts/helpers/parse_config.js | 11 ++- source/css/_custom.styl | 2 +- source/css/_defines/const.styl | 2 +- source/css/_layout/layout.styl | 4 +- source/css/_layout/pages/archives.styl | 3 + .../css/_layout/partial/article-banner.styl | 11 ++- source/css/_layout/tag-plugins/banner.styl | 9 +- source/css/_layout/widgets/list.styl | 1 - 14 files changed, 111 insertions(+), 107 deletions(-) delete mode 100644 layout/_partial/main/navbar/article_top_area.ejs delete mode 100644 layout/_partial/main/navbar/author_banner.ejs diff --git a/_config.yml b/_config.yml index 71ad24b..0f1649a 100755 --- a/_config.yml +++ b/_config.yml @@ -23,7 +23,7 @@ open_graph: 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: '[](/)' - subtitle: '' # '文字1 | 文字2' (鼠标放上去会切换到文字2) + subtitle: '${config.subtitle}' # '文字1 | 文字2' (鼠标放上去会切换到文字2) # 侧边栏主功能导航菜单 menubar: @@ -63,7 +63,7 @@ site_tree: # 主页配置 home: leftbar: welcome, recent - rightbar: # timeline + rightbar: welcome # 博客列表页配置 index_blog: base_dir: blog # 只影响自动生成的页面路径 @@ -191,7 +191,7 @@ comments: data-input-position: top # top, bottom data-theme: preferred_color_scheme data-lang: zh-CN - data-loading: lazy + data-loading: # lazy crossorigin: anonymous # Twikoo diff --git a/layout/_partial/main/navbar/article_banner.ejs b/layout/_partial/main/navbar/article_banner.ejs index fe9d49f..9996c96 100644 --- a/layout/_partial/main/navbar/article_banner.ejs +++ b/layout/_partial/main/navbar/article_banner.ejs @@ -1,30 +1,90 @@ <% -var banner_url +var banner = {} + if (page.banner) { - banner_url = page.banner + banner.url = page.banner } else if (theme.topic.tree[page.topic]?.banner != null) { - banner_url = theme.topic.tree[page.topic]?.banner + banner.url = theme.topic.tree[page.topic]?.banner } else if (theme.wiki.tree[page.wiki]?.banner != null) { - banner_url = theme.wiki.tree[page.wiki]?.banner + banner.url = theme.wiki.tree[page.wiki]?.banner +} +banner = Object.assign(banner, page.banner_info) +// 标题 +if (banner.title == null) { + banner.title = page.h1 != null ? page.h1 : page.title +} + +function layoutBreadcrumb() { + if (page.breadcrumb === false) { + return `
` + } + var el = '' + // 1.main + el += `
` + // 2.left + el += `
` + // 3.left.top: 面包屑导航 + el += `` + // 3.left.bottom + el += partial('dateinfo') + // end 2.left + el += `
` + // end 1.main + el += `
` + return el } function layoutTitle() { - const title = page.h1 != null ? page.h1 : page.title - if (title && title.length > 0) { - return `

${title}

` + if (banner.title?.length > 0) { + return `

${banner.title}

` + } else { + return '' + } +} + +function layoutSubtitle() { + if (banner.subtitle?.length > 0) { + return `
${banner.subtitle}
` + } else { + return '' + } +} + +function layoutIcon() { + if (banner.avatar?.length > 0 || banner.icon?.length > 0) { + return `` } else { return '' } } function layoutBottom() { - const article_title = layoutTitle() - if (article_title.length > 0) { + const el_icon = layoutIcon() + const el_title = layoutTitle() + const el_subtitle = layoutSubtitle() + var cls = '' + if (el_title.length > 0 && el_subtitle.length == 0) { + cls += ' only-title' + } + if (el_title.length > 0) { return ` -
+
+ ${el_icon}
- ${article_title} + ${el_title} + ${el_subtitle}
` @@ -34,18 +94,18 @@ function layoutBottom() { } function layoutDiv() { - const top = partial('article_top_area') const bottom = layoutBottom() - if (top.trim().length == 0 && bottom.length == 0) { + if (page.breadcrumb === false && bottom.length == 0) { return `` } + const top = layoutBreadcrumb() var style = `` var el = `` el += `` el += '' diff --git a/layout/archive.ejs b/layout/archive.ejs index a4120bf..39858ba 100755 --- a/layout/archive.ejs +++ b/layout/archive.ejs @@ -8,14 +8,21 @@ if (page.author) { } function layoutArchiveList() { var el = '' + var cls = '' if (page.author) { page.title = page.author.name - el += partial('_partial/main/navbar/author_banner') + page.banner = page.author.banner + page.banner_info = { + avatar: page.author.avatar, + subtitle: page.author.description + } + el += partial('_partial/main/navbar/article_banner') + cls += ' author' } else { page.title = __('btn.archives') el += partial('_partial/main/navbar/nav_tabs_blog') } - el += `
` + el += `
` var years = [] const posts = page.author != null ? site.posts.filter(p => (p.author || theme.default_author.id) == page.author.id) : site.posts posts.sort('date', -1).each(function(post) { diff --git a/scripts/helpers/parse_config.js b/scripts/helpers/parse_config.js index 2d79bcb..2873c49 100644 --- a/scripts/helpers/parse_config.js +++ b/scripts/helpers/parse_config.js @@ -9,17 +9,18 @@ hexo.extend.helper.register('md_text', function(args) { if (args == undefined) { return '' } + const { config } = hexo + args = args.replace('${config.title}', config.title) + args = args.replace('${config.subtitle}', config.subtitle) + args = args.replace('${config.avatar}', config.avatar) let tmp = args.split('](') if (tmp.length > 1) { tmp = tmp[0] if (tmp.length > 1) { tmp = tmp.substring(1, tmp.length) } - } - if (tmp == 'config.title' || tmp == '${config.title}') { - tmp = hexo.config.title - } else if (tmp == 'config.avatar' || tmp == '${config.avatar}') { - tmp = hexo.config.avatar + } else { + tmp = args } return tmp }) diff --git a/source/css/_custom.styl b/source/css/_custom.styl index 2c658ac..0c6eea7 100644 --- a/source/css/_custom.styl +++ b/source/css/_custom.styl @@ -48,7 +48,7 @@ $fs-body = convert(hexo-config('style.font-size.body')) $fs-code = convert(hexo-config('style.font-size.code')) $fs-codeblock = convert(hexo-config('style.font-size.codeblock')) -$fsh1 = 'calc(%s + 11px)' % $fs-body +$fsh1 = 'calc(%s + 9px)' % $fs-body $fsh2 = 'calc(%s + 11px)' % $fs-body $fsh3 = 'calc(%s + 7px)' % $fs-body $fsh4 = 'calc(%s + 4px)' % $fs-body diff --git a/source/css/_defines/const.styl b/source/css/_defines/const.styl index 242f48f..8a17dc9 100644 --- a/source/css/_defines/const.styl +++ b/source/css/_defines/const.styl @@ -4,7 +4,7 @@ $device-mobile-425 = 425px $device-mobile = 500px $device-mobile-max = 667px $device-tablet = 768px -$device-laptop = 1024px +$device-laptop = 1180px $device-desktop = 1440px $device-2k = 2048px $device-4k = 2560px diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl index d43205c..18ff1a9 100644 --- a/source/css/_layout/layout.styl +++ b/source/css/_layout/layout.styl @@ -15,6 +15,7 @@ .l_body .l_left top: 8px .l_body .l_right + width: calc(var(--width-sidebar) - var(--gap-max) + var(--gap-padding)) .widgets height: 100% overflow visible @@ -37,6 +38,7 @@ background: var(--site-bg) overflow: auto scrollbar(0, 0) + --blur-bg: var(--alpha75) .l_body[rightbar] .l_right transform: translateX(0px) @@ -76,7 +78,7 @@ left: 0 width: 100% height: 100% - background: rgba(black, 0.2) + background: rgba(black, 0.1) z-index: 9 opacity 0 trans1 opacity \ No newline at end of file diff --git a/source/css/_layout/pages/archives.styl b/source/css/_layout/pages/archives.styl index c54d31f..e1532cc 100644 --- a/source/css/_layout/pages/archives.styl +++ b/source/css/_layout/pages/archives.styl @@ -100,3 +100,6 @@ opacity: 1 color: var(--text) background: var(--block-hover) + +.post-list.author #archive + padding: 1rem 0 \ No newline at end of file diff --git a/source/css/_layout/partial/article-banner.styl b/source/css/_layout/partial/article-banner.styl index c7bdf7f..bc4e06a 100644 --- a/source/css/_layout/partial/article-banner.styl +++ b/source/css/_layout/partial/article-banner.styl @@ -17,13 +17,14 @@ .title font-size: $fsh1 color: var(--text-banner) - .bottom - padding: 2rem 1rem h1 line-height: 1.2 - margin: 0 - -.l_body[text-indent] .article.banner .content .bottom + margin: 0.25rem 0 + +.l_body .article.banner .content .bottom.only-title .title + padding: 0.75rem 0 + +.l_body[text-indent] .article.banner .content .bottom.only-title justify-content: center diff --git a/source/css/_layout/tag-plugins/banner.styl b/source/css/_layout/tag-plugins/banner.styl index 5d6c98e..1846c9a 100644 --- a/source/css/_layout/tag-plugins/banner.styl +++ b/source/css/_layout/tag-plugins/banner.styl @@ -127,13 +127,6 @@ .tag-plugin.banner .navbar a.active blur-effect() -@media screen and (min-width: $device-mobile-max) - .banner.author.top - margin-left: var(--gap-max) - margin-right: var(--gap-max) - @media screen and (max-width: $device-mobile-max) .banner.top - border-radius: 0 - .md-text.content:first-child .tag-plugin.banner:first-child - margin-top: 1rem \ No newline at end of file + border-radius: 0 \ No newline at end of file diff --git a/source/css/_layout/widgets/list.styl b/source/css/_layout/widgets/list.styl index 583c4cd..0f788ce 100644 --- a/source/css/_layout/widgets/list.styl +++ b/source/css/_layout/widgets/list.styl @@ -1,5 +1,4 @@ .widget-wrapper.post-list .widget-body - margin-top: 0.25rem a line-height: 1 font-size: $fs-14