From 36a27d7572ec6c17da9005e788af1135446cf1b9 Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Wed, 17 Jan 2024 14:07:30 +0800
Subject: [PATCH] [opt] style & menu

---
 _config.yml                                |  2 +-
 layout/404.ejs                             |  2 +-
 layout/_partial/main/header/index.ejs      |  3 --
 layout/_partial/main/navbar/breadcrumb.ejs |  6 +--
 layout/_partial/sidebar/index.ejs          | 36 ++-----------
 layout/_partial/sidebar/logo.ejs           | 37 +++++++++++++
 layout/_partial/sidebar/menu.ejs           | 12 ++++-
 layout/archive.ejs                         |  2 +-
 layout/layout.ejs                          | 60 +++++++++++++---------
 layout/post.ejs                            |  2 +-
 source/css/_layout/main.styl               |  7 +--
 source/css/_layout/sidebar/logo.styl       |  2 +-
 source/css/_layout/sidebar/menu.styl       | 20 ++++++--
 source/css/_layout/sidebar/sidebar.styl    |  2 -
 source/css/_layout/tag-plugins/banner.styl |  9 ----
 source/css/_layout/tag-plugins/toc.styl    |  2 +-
 source/css/_layout/widgets/toc_wiki.styl   |  6 +--
 17 files changed, 120 insertions(+), 90 deletions(-)
 delete mode 100644 layout/_partial/main/header/index.ejs

diff --git a/_config.yml b/_config.yml
index 7d614fc..5d23ea9 100755
--- a/_config.yml
+++ b/_config.yml
@@ -448,7 +448,7 @@ style:
   border-radius:
     card: 12px
     block: 12px
-    bar: 8px
+    bar: 12px
     image: 6px
   color:
     # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
diff --git a/layout/404.ejs b/layout/404.ejs
index 283bddf..82710eb 100755
--- a/layout/404.ejs
+++ b/layout/404.ejs
@@ -1,6 +1,6 @@
 <%
 page.comment_title = '';
-page.header = 'auto';
+page.header = false;
 page.robots = 'none';
 %>
 <article class='md-text error-page'>
diff --git a/layout/_partial/main/header/index.ejs b/layout/_partial/main/header/index.ejs
deleted file mode 100644
index 8ec1be6..0000000
--- a/layout/_partial/main/header/index.ejs
+++ /dev/null
@@ -1,3 +0,0 @@
-<% if (page.header != 'auto' && page.header != false) { %>
-  <%- partial('../../sidebar/logo', {logo: theme.logo, where: 'main'}) %>
-<% } %>
diff --git a/layout/_partial/main/navbar/breadcrumb.ejs b/layout/_partial/main/navbar/breadcrumb.ejs
index 0f8d2af..e6c3846 100644
--- a/layout/_partial/main/navbar/breadcrumb.ejs
+++ b/layout/_partial/main/navbar/breadcrumb.ejs
@@ -95,10 +95,10 @@ function layoutDiv() {
     nodes.push('/');
     // menu_id
     el += '<span class="sep"></span>';
-    if (page.menu_id && theme.menu[page.menu_id] && md_link(theme.menu[page.menu_id])) {
-      let url = url_for(md_link(theme.menu[page.menu_id]));
+    if (page.menu_id && theme.menu[page.menu_id]?.url) {
+      let url = url_for(theme.menu[page.menu_id]?.url);
       nodes.push(url);
-      el += '<a class="cap breadcrumb" id="menu" href="' + url + '">' + __(md_text(theme.menu[page.menu_id])) + '</a>';
+      el += '<a class="cap breadcrumb" id="menu" href="' + url + '">' + __(theme.menu[page.menu_id]?.title) + '</a>';
     } else {
       let url = url_for(theme.site_tree.wiki.base_dir);
       nodes.push(url);
diff --git a/layout/_partial/sidebar/index.ejs b/layout/_partial/sidebar/index.ejs
index 64bcd24..ec9d527 100755
--- a/layout/_partial/sidebar/index.ejs
+++ b/layout/_partial/sidebar/index.ejs
@@ -6,7 +6,10 @@ if (page.sidebar == null) {
     sidebar = site_tree.home.sidebar
   } else if (is_category() || is_tag() || is_archive() || ['categories', 'tags', 'archives'].includes(page.layout)) {
     sidebar = site_tree.blog.sidebar
-  } else if (page.layout === 'index_topic' || page.layout === 'topic') {
+  } else if (page.layout === 'index_topic') {
+    // 专栏列表页等同于博客列表页
+    sidebar = site_tree.blog.sidebar
+  } else if (page.layout === 'topic') {
     sidebar = site_tree.topic.sidebar
   } else if (page.layout === 'index_wiki' || page.layout === 'wiki') {
     sidebar = site_tree.wiki.sidebar
@@ -32,7 +35,6 @@ if (page.sidebar == null) {
   page.sidebar = sidebar
 }
 
-  console.log('s', sidebar);
 // parse array string
 if (typeof page.sidebar == 'string') {
   page.sidebar = page.sidebar.replace(/ /g, '').split(',');
@@ -119,35 +121,7 @@ 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'})
+  return partial('logo', {where: 'sidebar'})
 }
 
 function layoutNavArea() {
diff --git a/layout/_partial/sidebar/logo.ejs b/layout/_partial/sidebar/logo.ejs
index f72a7e5..1389d5e 100644
--- a/layout/_partial/sidebar/logo.ejs
+++ b/layout/_partial/sidebar/logo.ejs
@@ -1,4 +1,33 @@
 <%
+var logo = theme.logo
+if (page.logo) {
+  logo = Object.assign({}, 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
+    }
+  }
+}
+
 // logo.icon, logo.title, logo.subtitle, logo.url
 function layoutTitle(main, url, sub) {
   var el = ''
@@ -18,6 +47,14 @@ function layoutTitle(main, url, sub) {
 }
 
 function layoutDiv() {
+  if (where == 'main') {
+    if (page.layout == 'wiki' && page.menu_id == 'wiki') {
+      return ''
+    }
+    if (page.header == false) {
+      return
+    }
+  }
   var el = ''
   el += `<header class="header${where == 'main' ? ' mobile-only' : ''}">`
   el += `<div class="logo-wrap">`
diff --git a/layout/_partial/sidebar/menu.ejs b/layout/_partial/sidebar/menu.ejs
index 5827cde..318e553 100644
--- a/layout/_partial/sidebar/menu.ejs
+++ b/layout/_partial/sidebar/menu.ejs
@@ -7,8 +7,16 @@ function layoutDiv() {
     if (item == undefined || item.length == 0) {
       continue
     }
-    el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" href="${url_for(md_link(item))}">`
-    el += __(md_text(item))
+    el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" title="${item.title}" href="${url_for(item.url)}">`
+    if (item.icon?.length > 0) {
+      if (item.icon.startsWith('<img')) {
+        el += item.icon
+      } else {
+        el += `<img no-lazy src="${item.icon}">`
+      }
+    } else {
+      el += `<span>${__(item.title)}</span>`
+    }
     el += `</a>`
   }
   el += `</nav>`
diff --git a/layout/archive.ejs b/layout/archive.ejs
index 7af1fab..d5677e3 100755
--- a/layout/archive.ejs
+++ b/layout/archive.ejs
@@ -4,7 +4,7 @@ if (page.menu_id == undefined) {
   page.menu_id = 'post';
 }
 if (page.author) {
-  page.header = 'auto';
+  page.header = false;
 }
 function layoutArchiveList() {
   var el = ''
diff --git a/layout/layout.ejs b/layout/layout.ejs
index f134257..0aa10a5 100755
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -1,25 +1,35 @@
-<!DOCTYPE html>
-<html lang='<%- page.lang %>'>
-<%- partial('_partial/head') %>
-<body>
-  <%- partial('_partial/cover/index') %>
-  <div class='l_body' id='start'>
-    <aside class='l_left' layout='<%- page.layout %>'>
-      <img no-lazy class="sidebar-bg" src="<%- theme.default.sidebar %>">
-      <div class="sidebar-container blur">
-        <%- partial('_partial/sidebar/index') %>
-      </div>
-    </aside>
-    <div class='l_main<%- page.content ? "" : " list" %>' id="main">
-      <%- partial('_partial/main/header/index') %>
-      <%- body %>
-      <%- partial('_partial/main/footer') %>
-      <%- partial('_partial/menubtn') %>
-      <div class="main-mask" onclick="sidebar.toggle()"></div>
-    </div>
-  </div>
-  <div class='scripts'>
-    <%- partial('_partial/scripts/index') %>
-  </div>
-</body>
-</html>
+<%
+var page_type = 'index'
+if (['post', 'page', 'wiki', 'topic', null].includes(page.layout)) {
+  if (!page.nav_tabs) {
+    page_type = 'content'
+  }
+}
+
+var html = `<!DOCTYPE html>`
+html += `<html lang="${page.lang}">`
+  html += partial('_partial/head')
+  html += `<body>`
+    html += partial('_partial/cover/index')
+    html += `<div class="l_body ${page_type}" id="start" layout="page.layout">`
+      html += `<aside class="l_left">`
+        html += `<img no-lazy class="sidebar-bg" src="${theme.default.sidebar}">`
+        html += `<div class="sidebar-container blur">`
+          html += partial('_partial/sidebar/index')
+        html += `</div>`
+      html += `</aside>`
+      html += `<div class="l_main" id="main">`
+        html += partial('_partial/sidebar/logo', {where: 'main'})
+        html += body
+        html += partial('_partial/main/footer')
+        html += partial('_partial/menubtn')
+        html += `<div class="main-mask" onclick="sidebar.toggle()"></div>`
+      html += `</div>`
+    html += `</div>`
+    html += `<div class="scripts">`
+      html += partial('_partial/scripts/index')
+    html += `</div>`
+  html += `</body>`
+html += `</html>`
+%>
+<%- html %>
diff --git a/layout/post.ejs b/layout/post.ejs
index 07f868f..77c2ac9 100755
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -3,7 +3,7 @@ if (page.menu_id == undefined) {
   page.menu_id = 'post';
 }
 if (page.header == undefined) {
-  page.header = 'auto';
+  page.header = false;
 }
 function layoutTitle() {
   const title = page.h1 != null ? page.h1 : page.title;
diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl
index d5d0ab7..66e074d 100644
--- a/source/css/_layout/main.styl
+++ b/source/css/_layout/main.styl
@@ -13,6 +13,7 @@
     .logo-wrap
       margin: 0
 
-.l_main.list
-  @media screen and (max-width: $device-mobile-max)
-    padding-top: 0
\ No newline at end of file
+.l_body.index
+  .l_main
+    @media screen and (max-width: $device-mobile-max)
+      padding-top: 0
\ No newline at end of file
diff --git a/source/css/_layout/sidebar/logo.styl b/source/css/_layout/sidebar/logo.styl
index 450eac9..5577c8a 100644
--- a/source/css/_layout/sidebar/logo.styl
+++ b/source/css/_layout/sidebar/logo.styl
@@ -2,7 +2,7 @@
   display: flex
   align-items: center
   overflow: hidden
-  height: 48px
+  min-height: 48px
   img
     object-fit: cover
   .icon
diff --git a/source/css/_layout/sidebar/menu.styl b/source/css/_layout/sidebar/menu.styl
index 350bea1..0df22e4 100644
--- a/source/css/_layout/sidebar/menu.styl
+++ b/source/css/_layout/sidebar/menu.styl
@@ -13,10 +13,8 @@
   
   .nav-item
     box-sizing: border-box
-    text-overflow: ellipsis
-    word-break: keep-all
     width: 100%
-    line-height: 40px
+    min-height: 40px
     border-radius: $border-bar
     font-size: $fs-15
     font-weight: 500
@@ -28,9 +26,25 @@
       -webkit-backdrop-filter: saturate(200%) blur(var(--blur-px))
     trans1 background
     position: relative
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    img
+      height: 32px
+      object-fit: contain
+      opacity 0.5
+      filter: grayscale(100%) brightness(0.4)
+      trans1 all
+    span
+      text-overflow: ellipsis
+      word-break: keep-all
     &.active, &:hover
       color: var(--text-p1)
       background: var(--alpha100)
+      img
+        opacity: 1
+        filter: unset
     &.active:after
       content: ''
       position absolute
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index 10ff364..17012a1 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@@ -9,8 +9,6 @@
   @media screen and (min-width: $device-mobile-max)
     >.widgets:first-child>.widget-wrapper:first-child
       margin-top: "calc(2 * %s)" % var(--gap-l)
-  @media screen and (max-width: $device-mobile-max)
-    height: 100vh
   
 .l_left 
   .sidebar-bg
diff --git a/source/css/_layout/tag-plugins/banner.styl b/source/css/_layout/tag-plugins/banner.styl
index dddde0b..6df96d4 100644
--- a/source/css/_layout/tag-plugins/banner.styl
+++ b/source/css/_layout/tag-plugins/banner.styl
@@ -111,14 +111,5 @@
     img.bg
      transform: scale(1.01)
 
-.l_main.list .tag-plugin.banner
-  background: var(--block-hover)
-  .content .top
-    margin-top: 1.5rem
-  margin: 0 1rem
-  @media screen and (max-width: $device-mobile)
-    margin: 0
-    border-radius: 0
-
 .tag-plugin.banner .navbar a.active
   blur-effect()
\ No newline at end of file
diff --git a/source/css/_layout/tag-plugins/toc.styl b/source/css/_layout/tag-plugins/toc.styl
index b7f8e77..671404e 100644
--- a/source/css/_layout/tag-plugins/toc.styl
+++ b/source/css/_layout/tag-plugins/toc.styl
@@ -1,7 +1,7 @@
 details.toc
   background: var(--block)
   border: 1px solid var(--block-border)
-  border-radius: $border-bar
+  border-radius: $border-card
   overflow: hidden
   color: var(--text-p2)
   summary
diff --git a/source/css/_layout/widgets/toc_wiki.styl b/source/css/_layout/widgets/toc_wiki.styl
index 9e03048..7c90d88 100644
--- a/source/css/_layout/widgets/toc_wiki.styl
+++ b/source/css/_layout/widgets/toc_wiki.styl
@@ -3,7 +3,7 @@
 
 // 其它分页链接
 .widget-wrapper.toc.multi .doc-tree
-  border-radius: $border-bar
+  border-radius: $border-card
   overflow: hidden
   a.doc-tree-link
     color: var(--text-p1)
@@ -40,8 +40,8 @@
     padding: 4px 10px
     border: 1px solid var(--alpha50)
     background: var(--alpha20)
-    border-bottom-left-radius: $border-bar
-    border-bottom-right-radius: $border-bar
+    border-bottom-left-radius: $border-card
+    border-bottom-right-radius: $border-card
     a.toc-link:before
       left: -2px
       width: 4px