[opt] banner

_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: '[<img no-lazy height="32px" src="xxx"/>](/)'
-  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

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 `<div class="top"></div>`
+  }
+  var el = ''
+  // 1.main
+  el += `<div class="top bread-nav footnote">`
+  // 2.left
+  el += `<div class="left">`
+  // 3.left.top: 面包屑导航
+  el += `<div class="flex-row" id="breadcrumb">`
+    // 首页
+    el += `<a class="cap breadcrumb" href="${url_for(config.root)}">${__("btn.home")}</a>`
+    if (theme.wiki.tree[page.wiki]) {
+      el += partial('breadcrumb/wiki')
+    } else if (page.layout == 'post') {
+      el += partial('breadcrumb/blog')
+    } else {
+      el += partial('breadcrumb/page')
+    }
+  // end 3.left.top
+  el += `</div>`
+  // 3.left.bottom
+  el += partial('dateinfo')
+  // end 2.left
+  el += `</div>`
+  // end 1.main
+  el += `</div>`
+  return el
 }
 
 function layoutTitle() {
-  const title = page.h1 != null ? page.h1 : page.title
+  if (banner.title?.length > 0) {
-  if (title && title.length > 0) {
+    return `<h1 class="text title"><span>${banner.title}</span></h1>`
-    return `<h1 class="text title"><span>${title}</span></h1>`
+  } else {
+    return ''
+  }
+}
+
+function layoutSubtitle() {
+  if (banner.subtitle?.length > 0) {
+    return `<div class="text subtitle">${banner.subtitle}</div>`
+  } else {
+    return ''
+  }
+}
+
+function layoutIcon() {
+  if (banner.avatar?.length > 0 || banner.icon?.length > 0) {
+    return `<img class="avatar" src="${banner.avatar || banner.icon}">`
   } else {
     return ''
   }
 }
 
 function layoutBottom() {
-  const article_title = layoutTitle()
+  const el_icon = layoutIcon()
-  if (article_title.length > 0) {
+  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 `
-    <div class="bottom">
+    <div class="bottom${cls}">
+      ${el_icon}
       <div class="text-area">
-        ${article_title}
+        ${el_title}
+        ${el_subtitle}
       </div>
     </div>
     `
@@ -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 += `<div class="article banner top">`
-  if (banner_url?.length > 0) {
+  if (banner.url?.length > 0) {
-    el += `<img class="bg" src="${banner_url}">`
+    el += `<img class="bg" src="${banner.url}">`
-    if (page.poster?.color) {
+    if (banner.color) {
-      style += ' style="--text-banner:' + page.poster?.color + '"'
+      style += ' style="--text-banner:' + banner.color + '"'
     }
   }
   el += `

layout/_partial/main/navbar/article_top_area.ejs

@@ -1,33 +0,0 @@
-<%
-function layoutDiv() {
-  if (page.breadcrumb === false) {
-    return ''
-  }
-  var el = ''
-  // 1.main
-  el += `<div class="top bread-nav footnote">`
-  // 2.left
-  el += `<div class="left">`
-  // 3.left.top: 面包屑导航
-  el += `<div class="flex-row" id="breadcrumb">`
-    // 首页
-    el += `<a class="cap breadcrumb" href="${url_for(config.root)}">${__("btn.home")}</a>`
-    if (theme.wiki.tree[page.wiki]) {
-      el += partial('breadcrumb/wiki')
-    } else if (page.layout == 'post') {
-      el += partial('breadcrumb/blog')
-    } else {
-      el += partial('breadcrumb/page')
-    }
-  // end 3.left.top
-  el += `</div>`
-  // 3.left.bottom
-  el += partial('dateinfo')
-  // end 2.left
-  el += `</div>`
-  // end 1.main
-  el += `</div>`
-  return el
-}
-%>
-<%- layoutDiv() %>

layout/_partial/main/navbar/author_banner.ejs

@@ -1,29 +0,0 @@
-<%
-function layoutDiv() {
-  const author = page.author
-  var el = ``
-  el += `<div class="banner author top">`
-  if (author.banner) {
-    el += `<img class="bg" src="${author.banner}">`
-  }
-  el += `
-  <div class="content">
-    <div class="top">
-      <button class="back cap" onclick="window.history.back()">
-        ${icon('default:goback')}
-      </button>
-    </div>
-    <div class="bottom">
-      <img class="avatar" src="${author.avatar}">
-      <div class="text-area">
-        <p class="text title">${author.name}</p>
-        <div class="text subtitle">${author.description || ""}</div>
-      </div>
-    </div>
-  </div>
-  `
-  el += `</div>`
-  return el
-}
-%>
-<%- layoutDiv() %>

layout/_partial/sidebar/logo.ejs

@@ -67,7 +67,7 @@ function layoutDiv() {
   const main = md_text(logo.title)
   if (main) {
     let url = md_link(logo.title)
-    el += layoutTitle(main, url, logo.subtitle)
+    el += layoutTitle(main, url, md_text(logo.subtitle))
   }
   el += `</div>`
   el += '</header>'

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 += `<div class="post-list archives">`
+  el += `<div class="post-list${cls} archives">`
   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) {

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)
     }
-  }
+  } else {
-  if (tmp == 'config.title' || tmp == '${config.title}') {
+    tmp = args
-    tmp = hexo.config.title
-  } else if (tmp == 'config.avatar' || tmp == '${config.avatar}') {
-    tmp = hexo.config.avatar
   }
   return tmp
 })

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

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

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

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

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
+    margin: 0.25rem 0
-  
+
-.l_body[text-indent] .article.banner .content .bottom
+.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
   
 

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
+    border-radius: 0
-  .md-text.content:first-child .tag-plugin.banner:first-child
-    margin-top: 1rem

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