[opt] style & menu

_config.yml

@@ -448,7 +448,7 @@ style:
   border-radius:
     card: 12px
     block: 12px
-    bar: 8px
+    bar: 12px
     image: 6px
   color:
     # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）

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'>

layout/_partial/main/header/index.ejs

@@ -1,3 +0,0 @@
-<% if (page.header != 'auto' && page.header != false) { %>
-  <%- partial('../../sidebar/logo', {logo: theme.logo, where: 'main'}) %>
-<% } %>

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])) {
+    if (page.menu_id && theme.menu[page.menu_id]?.url) {
-      let url = url_for(md_link(theme.menu[page.menu_id]));
+      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);

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
+  return partial('logo', {where: 'sidebar'})
-  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() {

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">`

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 += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" title="${item.title}" href="${url_for(item.url)}">`
-    el += __(md_text(item))
+    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>`

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 = ''

layout/layout.ejs

@@ -1,25 +1,35 @@
-<!DOCTYPE html>
+<%
-<html lang='<%- page.lang %>'>
+var page_type = 'index'
-<%- partial('_partial/head') %>
+if (['post', 'page', 'wiki', 'topic', null].includes(page.layout)) {
-<body>
+  if (!page.nav_tabs) {
-  <%- partial('_partial/cover/index') %>
+    page_type = 'content'
-  <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">
+var html = `<!DOCTYPE html>`
-        <%- partial('_partial/sidebar/index') %>
+html += `<html lang="${page.lang}">`
-      </div>
+  html += partial('_partial/head')
-    </aside>
+  html += `<body>`
-    <div class='l_main<%- page.content ? "" : " list" %>' id="main">
+    html += partial('_partial/cover/index')
-      <%- partial('_partial/main/header/index') %>
+    html += `<div class="l_body ${page_type}" id="start" layout="page.layout">`
-      <%- body %>
+      html += `<aside class="l_left">`
-      <%- partial('_partial/main/footer') %>
+        html += `<img no-lazy class="sidebar-bg" src="${theme.default.sidebar}">`
-      <%- partial('_partial/menubtn') %>
+        html += `<div class="sidebar-container blur">`
-      <div class="main-mask" onclick="sidebar.toggle()"></div>
+          html += partial('_partial/sidebar/index')
-    </div>
+        html += `</div>`
-  </div>
+      html += `</aside>`
-  <div class='scripts'>
+      html += `<div class="l_main" id="main">`
-    <%- partial('_partial/scripts/index') %>
+        html += partial('_partial/sidebar/logo', {where: 'main'})
-  </div>
+        html += body
-</body>
+        html += partial('_partial/main/footer')
-</html>
+        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 %>

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;

source/css/_layout/main.styl

@@ -13,6 +13,7 @@
     .logo-wrap
       margin: 0
 
-.l_main.list
+.l_body.index
-  @media screen and (max-width: $device-mobile-max)
+  .l_main
-    padding-top: 0
+    @media screen and (max-width: $device-mobile-max)
+      padding-top: 0

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

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

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

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()

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

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-left-radius: $border-card
-    border-bottom-right-radius: $border-bar
+    border-bottom-right-radius: $border-card
     a.toc-link:before
       left: -2px
       width: 4px