[feat] sidebar refactoring

_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/)'
+  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"/>](/)'
+  title: '[${config.title}](/)' # you can set html tag like: '[<img no-lazy height="32px" src="xxx"/>](/)'
   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

_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

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'}) %>
 <% } %>

layout/_partial/menubtn.ejs

@@ -1,5 +1,5 @@
 <div class='float-panel mobile-only blur' style='display:none'>
   <button type='button' class='sidebar-toggle mobile' onclick='sidebar.toggle()'>
-    <svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15301"><path d="M566.407 808.3c26.9-0.1 49.3-20.8 51.6-47.6-1.9-27.7-23.9-49.7-51.6-51.6h-412.6c-28.2-1.4-52.6 19.5-55.5 47.6 2.3 26.8 24.6 47.5 51.6 47.6h416.5v4z m309.3-249.9c26.9-0.1 49.3-20.8 51.6-47.6-2.2-26.8-24.6-47.5-51.6-47.6h-721.9c-27.7-2.8-52.5 17.4-55.3 45.1-0.1 0.8-0.1 1.7-0.2 2.5 0.9 27.2 23.6 48.5 50.7 47.6H875.707z m-103.1-245.9c26.9-0.1 49.3-20.8 51.6-47.6-0.4-28.3-23.2-51.1-51.5-51.6h-618.9c-29.5-1.1-54.3 21.9-55.5 51.4v0.2c1.4 27.8 25.2 49.2 53 47.8 0.8 0 1.7-0.1 2.5-0.2h618.8z" p-id="15302"></path><path d="M566.407 808.3c26.9-0.1 49.3-20.8 51.6-47.6-1.9-27.7-23.9-49.7-51.6-51.6h-412.6c-28.2-1.4-52.6 19.5-55.5 47.6 1.9 27.7 23.9 49.7 51.6 51.6h416.5z m309.3-249.9c26.9-0.1 49.3-20.8 51.6-47.6-2.2-26.8-24.6-47.5-51.6-47.6h-721.9c-27.7-2.8-52.5 17.4-55.3 45.1-0.1 0.8-0.1 1.7-0.2 2.5 0.9 27.2 23.6 48.5 50.7 47.6H875.707z m-103.1-245.9c26.9-0.1 49.3-20.8 51.6-47.6-0.4-28.3-23.2-51.1-51.5-51.6h-618.9c-29.5-1.1-54.3 21.9-55.5 51.4v0.2c1.4 27.8 25.2 49.2 53 47.8 0.8 0 1.7-0.1 2.5-0.2h618.8z" p-id="15303"></path></svg>
+    <svg t="1705412886951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8331" width="200" height="200"><path d="M638.72 970.666667h-256c-118.186667 0-198.272-25.002667-251.946667-78.72S52.053333 758.186667 52.053333 640V384c0-118.186667 25.002667-198.272 78.72-251.946667S264.533333 53.333333 382.72 53.333333h256c118.186667 0 198.272 25.002667 251.946667 78.72S969.386667 265.813333 969.386667 384v256c0 118.186667-25.002667 198.272-78.72 251.946667S756.906667 970.666667 638.72 970.666667z m-256-853.333334c-100.096 0-165.802667 19.2-206.72 59.946667S116.053333 283.904 116.053333 384v256c0 100.096 19.072 165.802667 59.946667 206.72S282.624 906.666667 382.72 906.666667h256c100.096 0 165.802667-19.072 206.72-59.946667S905.386667 740.096 905.386667 640V384c0-100.096-19.072-165.802667-59.946667-206.72S738.816 117.333333 638.72 117.333333z" p-id="8332"></path><path d="M638.72 970.666667a32 32 0 0 1-32-32V85.333333a32 32 0 0 1 32-32 32 32 0 0 1 32 32v853.333334a32 32 0 0 1-32 32zM340.053333 653.226667a31.914667 31.914667 0 0 1-22.613333-9.386667 32 32 0 0 1 0-45.269333L404.053333 512 317.44 425.386667a32 32 0 0 1 0-45.226667 32 32 0 0 1 45.226667 0l109.226666 109.226667a32 32 0 0 1 0 45.269333L362.666667 643.84a31.914667 31.914667 0 0 1-22.613334 9.386667z" p-id="8333"></path></svg>
   </button>
 </div>

layout/_partial/sidebar/header.ejs

@@ -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 += '<a class="title" href="' + url_for(url || "/") + '">';
-  el += '<div class="main" ff="title">' + main + '</div>';
-  if (sub) {
-    let arr = sub.split('|');
-    if (arr.length > 1) {
-      el += '<div class="sub normal cap">' + arr.shift().trim() + '</div>';
-      el += '<div class="sub hover cap" style="opacity:0">' + arr.join('|') + '</div>';
-    } else {
-      el += '<div class="sub cap">' + sub + '</div>';
-    }
-  }
-  el += '</a>';
-  return el;
-}
-
-function layoutDiv() {
-  var el = '';
-  if (page.layout == 'wiki' && page.menu_id == 'wiki') {
-    return el;
-  }
-  el += '<header class="header';
-  if (where == 'main') {
-    el += ' mobile-only';
-  }
-  el += '">';
-
-  el += '<div class="logo-wrap">';
-  if (md_text(theme.logo.avatar)) {
-    el += '<a class="avatar" href="' + url_for(md_link(theme.logo.avatar) || "/") + '">';
-    if (theme.style.animated_avatar.animate) {
-      el += '<div class="bg" style="opacity:0;background-image:url(' + theme.style.animated_avatar.background + ');"></div>';
-    }
-    el += '<img no-lazy class="avatar" src="' + md_text(theme.logo.avatar) + '">';
-    el += '</a>';
-  }
-  let main = md_text(theme.logo.title);
-  if (main) {
-    let url = md_link(theme.logo.title);
-    el += layoutTitle(main, url, theme.logo.subtitle);
-  }
-  el += '</div>';
-
-  if (where != 'main') {
-    el += partial('menu', {where: where});
-  }
-  el += '</header>';
-  return el;
-}
-%>
-
-<%- layoutDiv() %>

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 += '<div class="widgets">';
-  if (page.layout == 'wiki' && proj && page.menu_id == 'wiki') {
-    el += '<widget class="widget-wrapper logo-wrap wiki"><div class="widget-body">';
-    // all products
-    el += '<a style="filter: grayscale(100%)" class="wiki-home cap" href="' + url_for(theme.site_tree.wiki.base_dir) + '">';
-    el += '<svg aria-hidden="true" viewBox="0 0 16 16" width="1.2em" height="1.2em" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>';
-    el += __('btn.all_wiki');
-    el += '</a>';
-    // 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 += '</div></widget>';
-  }
   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 += `<div class="nav-area">`
+  el += partial('search', {item: search})
+  el += partial('menu', {where: 'sidebar'})
+  el += `</div>`
+  return el
+}
 %>
-<% if (page.header == undefined || page.header == 'left' || page.header == 'auto') { %>
+<%- layoutLogo() %>
-  <%- partial('header', {where: 'sidebar'}) %>
+<%- layoutNavArea() %>
-<% } %>
 <%- layoutWidgets() %>
 <%- layoutFooterDiv() %>

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 += `<a class="title" href="${url_for(url || "/")}">`
+  el += `<div class="main" ff="title">${main}</div>`
+  if (sub) {
+    const arr = sub.split('|')
+    if (arr.length > 1) {
+      el += `<div class="sub normal cap">${arr.shift().trim()}</div>`
+      el += `<div class="sub hover cap" style="opacity:0">${arr.join('|')}</div>`
+    } else {
+      el += `<div class="sub cap">${sub}</div>`
+    }
+  }
+  el += `</a>`
+  return el
+}
+
+function layoutDiv() {
+  var el = ''
+  el += `<header class="header${where == 'main' ? ' mobile-only' : ''}">`
+  el += `<div class="logo-wrap">`
+  if (logo.icon) {
+    el += `<div class="icon"><img no-lazy class="icon" src="${md_text(logo.icon)}"></div>`
+  } else if (md_text(logo.avatar)) {
+    el += `<a class="avatar" href="${url_for(md_link(logo.avatar) || '/')}">`
+    if (theme.style.animated_avatar.animate) {
+      el += `<div class="bg" style="opacity:0;background-image:url(${theme.style.animated_avatar.background});"></div>`
+    }
+    el += `<img no-lazy class="avatar" src="${md_text(logo.avatar)}">`
+    el += `</a>`
+  }
+  const main = md_text(logo.title)
+  if (main) {
+    let url = md_link(logo.title)
+    el += layoutTitle(main, url, logo.subtitle)
+  }
+  el += `</div>`
+  el += '</header>'
+  return el
+}
+%>
+
+<%- layoutDiv() %>

layout/_partial/sidebar/menu.ejs

@@ -1,26 +1,18 @@
 <%
 function layoutDiv() {
-  var el = '';
+  var el = ''
-  el += '<nav class="menu dis-select';
+  el += `<nav class="menu dis-select${where == 'main' ? ' mobile-hidden' : ''}">`
-  if (where == 'main') {
-    el += ' mobile-hidden';
-  }
-  el += '">';
   for (let id of Object.keys(theme.menu)) {
-    let item = theme.menu[id];
+    let item = theme.menu[id]
     if (item == undefined || item.length == 0) {
-      continue;
+      continue
     }
-    el += '<a class="nav-item';
+    el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" href="${url_for(md_link(item))}">`
-    if (id == page.menu_id) {
+    el += __(md_text(item))
-      el += ' active';
+    el += `</a>`
-    }
-    el += '" href="' + url_for(md_link(item)) + '">';
-    el += __(md_text(item));
-    el += '</a>';
   }
-  el += '</nav>';
+  el += `</nav>`
-  return el;
+  return el
 }
 %>
 

layout/_partial/sidebar/search.ejs

@@ -0,0 +1,42 @@
+<%
+if (item.filter == null) {
+  item.filter = 'auto'
+}
+function layoutDiv() {
+  var el = ''
+  el += `<div class="search-wrapper" id="search-wrapper">`
+  el += `<form class="search-form">`
+  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 += `<a class="search-button" onclick="document.getElementById(&quot;search-input&quot;).focus();">`
+  el += `<svg t="1705074644177" class="icon search-icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="200" height="200"><path d="M1008.839137 935.96571L792.364903 719.491476a56.783488 56.783488 0 0 0-80.152866 0 358.53545 358.53545 0 1 1 100.857314-335.166073 362.840335 362.840335 0 0 1-3.689902 170.145468 51.248635 51.248635 0 1 0 99.217358 26.444296 462.057693 462.057693 0 1 0-158.255785 242.303546l185.930047 185.725053a51.248635 51.248635 0 0 0 72.568068 0 51.248635 51.248635 0 0 0 0-72.978056z" p-id="1561"></path><path d="M616.479587 615.969233a50.428657 50.428657 0 0 0-61.498362-5.534852 174.655348 174.655348 0 0 1-177.525271 3.484907 49.403684 49.403684 0 0 0-58.833433 6.76482l-3.074918 2.869923a49.403684 49.403684 0 0 0 8.609771 78.10292 277.767601 277.767601 0 0 0 286.992355-5.739847 49.403684 49.403684 0 0 0 8.404776-76.667958z" p-id="1562"></path></svg>`
+  el += `</a>`
+  el += `<input type="text" class="search-input" id="search-input"`
+  if (filter.length > 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 += `</form>`
+  el += `<div id="search-result"></div>`
+  el += `<div class="search-no-result">${__('search.no_results')}</div>`
+  el += `</div>`
+  return el
+}
+%>
+<%- layoutDiv() %>

layout/_partial/widgets/ghissues.ejs

@@ -23,7 +23,7 @@ function layoutDiv() {
   }
   el += '<widget class="widget-wrapper timeline">';
     if (item.title) {
-      el += '<div class="widget-header cap theme dis-select">';
+      el += '<div class="widget-header cap dis-select">';
       el += '<span class="name">' + item.title + '</span>';
       el += '</div>';
     }

layout/_partial/widgets/ghuser.ejs

@@ -45,10 +45,6 @@ function layoutDiv() {
     el += '<svg aria-hidden="true" role="img" class="color-icon-primary" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>';
     el += 'Follow';
     el += '</a>';
-    // menu
-    if (item.menu) {
-      el += partial('../sidebar/menu', {where: 'sidebar'});
-    }
   el += '</div>';
   el += '</widget>';
   return el;

layout/_partial/widgets/markdown.ejs

@@ -4,7 +4,7 @@ function layoutDiv() {
   var el = '';
   el += '<widget class="widget-wrapper markdown">';
   if (item.title?.length > 0) {
-    el += '<div class="widget-header cap theme dis-select">';
+    el += '<div class="widget-header cap dis-select">';
     el += '<span class="name">' + item.title + '</span>';
     el += '</div>';
   }

layout/_partial/widgets/recent.ejs

@@ -1,8 +1,8 @@
 <%
 function layoutDiv() {
-  var el = '<widget class="widget-wrapper recent">';
+  var el = '<widget class="widget-wrapper post-list">';
   // header
-  el += '<div class="widget-header cap theme dis-select">';
+  el += '<div class="widget-header cap dis-select">';
   el += '<span class="name">' + __("meta.recent_update") + '</span>';
   if (item.rss) {
     el += '<a class="cap-action" id="rss" title="Subscribe" href="' + item.rss + '">';
@@ -25,11 +25,12 @@ function layoutDiv() {
     arr = site.posts.filter( p => p.title && p.title.length > 0)
     arr = arr.sort("updated", -1)
   }
-  el += '<div class="widget-body related-posts fs14">';
+  el += '<div class="widget-body fs14">';
   arr.length = item.limit
   arr.forEach(post => {
     if (!post) { return }
-    el += '<a class="item title" href="' + url_for(post.link || post.path) + '">';
+    const isActive = post.path == page.path
+    el += `<a class="item title${post.path == page.path ? ' active' : ''}" href="${url_for(post.link || post.path)}">`
     el += '<span class="title">'
     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) + '</span>';
+    if (isActive) {
+      el += `<svg t="1705415018387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14793" width="200" height="200"><path d="M256 896a42.666667 42.666667 0 0 1-20.906667-5.546667A42.666667 42.666667 0 0 1 213.333333 853.333333V227.413333A97.28 97.28 0 0 1 307.2 128h409.6A97.28 97.28 0 0 1 810.666667 227.413333V853.333333a42.666667 42.666667 0 0 1-21.333334 36.693334 42.666667 42.666667 0 0 1-42.666666 0l-241.92-136.96-227.413334 136.533333A42.666667 42.666667 0 0 1 256 896z" p-id="14794"></path></svg>`
+    }
     el += '</a>';
     el += '';
   });

layout/_partial/widgets/related.ejs

@@ -8,14 +8,18 @@ function relatedPostsInTopic() {
     return ''
   }
   var el = ''
-  el += `<widget class="widget-wrapper recent">`
+  el += `<widget class="widget-wrapper post-list">`
-  el += `<div class="widget-header cap theme dis-select">`
+  el += `<div class="widget-header cap dis-select">`
   el += `<span class="name">${__('btn.topic') + __('symbol.colon') + topic.name}</span>`
   el += `</div>`
-  el += `<div class="widget-body related-posts">`
+  el += `<div class="widget-body">`
   for (let post of topic.pages) {
-    el += `<a class="item${post.path == page.path ? ' active' : ''}" href="${url_for(post.path)}">`
+    const isActive = post.path == page.path
+    el += `<a class="item${isActive ? ' active' : ''}" href="${url_for(post.path)}">`
     el += `<span class="title">${post.title}</span>`
+    if (isActive) {
+      el += `<svg t="1705415018387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14793" width="200" height="200"><path d="M256 896a42.666667 42.666667 0 0 1-20.906667-5.546667A42.666667 42.666667 0 0 1 213.333333 853.333333V227.413333A97.28 97.28 0 0 1 307.2 128h409.6A97.28 97.28 0 0 1 810.666667 227.413333V853.333333a42.666667 42.666667 0 0 1-21.333334 36.693334 42.666667 42.666667 0 0 1-42.666666 0l-241.92-136.96-227.413334 136.533333A42.666667 42.666667 0 0 1 256 896z" p-id="14794"></path></svg>`
+    }
     el += `</a>`
   }
   el += `</div>`
@@ -30,11 +34,11 @@ function relatedWiki() {
   const relatedItems = thisItemObject.relatedItems
   var el = ''
   for (let relatedItem of relatedItems) {
-    el += `<widget class="widget-wrapper related">`
+    el += `<widget class="widget-wrapper post-card">`
-    el += `<div class="widget-header cap theme dis-select">`
+    el += `<div class="widget-header cap dis-select">`
     el += `<span class="name">${__('meta.more') + __('symbol.colon') + relatedItem.name}</span>`
     el += `</div>`
-    el += `<div class="widget-body related-posts">`
+    el += `<div class="widget-body">`
     for (let id of relatedItem.items) {
       // 同一个分组中的其它项目
       let item = theme.wiki.tree[id]

layout/_partial/widgets/search.ejs

@@ -1,40 +0,0 @@
-<%
-function layoutDiv() {
-  var el = '<widget class="widget-wrapper search">'
-  el += '<div class="widget-body">'
-  el += '<div class="search-wrapper" id="search-wrapper">'
-  el += '<form class="search-form">'
-  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 += '<input type="text" class="search-input" id="search-input"'
-  if (filter.length > 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 += '<svg t="1705074644177" class="icon search-icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="200" height="200"><path d="M1008.839137 935.96571L792.364903 719.491476a56.783488 56.783488 0 0 0-80.152866 0 358.53545 358.53545 0 1 1 100.857314-335.166073 362.840335 362.840335 0 0 1-3.689902 170.145468 51.248635 51.248635 0 1 0 99.217358 26.444296 462.057693 462.057693 0 1 0-158.255785 242.303546l185.930047 185.725053a51.248635 51.248635 0 0 0 72.568068 0 51.248635 51.248635 0 0 0 0-72.978056z" p-id="1561"></path><path d="M616.479587 615.969233a50.428657 50.428657 0 0 0-61.498362-5.534852 174.655348 174.655348 0 0 1-177.525271 3.484907 49.403684 49.403684 0 0 0-58.833433 6.76482l-3.074918 2.869923a49.403684 49.403684 0 0 0 8.609771 78.10292 277.767601 277.767601 0 0 0 286.992355-5.739847 49.403684 49.403684 0 0 0 8.404776-76.667958z" p-id="1562"></path></svg>'
-  el += '</form>'
-  el += '<div id="search-result"></div>'
-  el += '<div class="search-no-result">' + __('search.no_results') + '</div>'
-  el += '</div>'
-  el += '</div>'
-  el += '</widget>'
-  return el
-}
-%>
-<%- layoutDiv() %>

layout/_partial/widgets/tagcloud.ejs

@@ -10,7 +10,7 @@ function layoutDiv() {
   opts.class = 'tag ';
   el += '<widget class="widget-wrapper tagcloud">';
     if (item.title) {
-      el += '<div class="widget-header cap theme dis-select">';
+      el += '<div class="widget-header cap dis-select">';
       el += '<span class="name">' + item.title + '</span>';
       el += '</div>';
     }

layout/_partial/widgets/timeline.ejs

@@ -6,7 +6,7 @@ function layoutDiv() {
   }
   el += '<widget class="widget-wrapper timeline">';
     if (item.title) {
-      el += '<div class="widget-header cap theme dis-select">';
+      el += '<div class="widget-header cap dis-select">';
       el += '<span class="name">' + item.title + '</span>';
       el += '</div>';
     }

layout/_partial/widgets/toc.ejs

@@ -40,6 +40,9 @@ function layoutDocTree(pages) {
       }
       el += `<a class="doc-tree-link${isActive}" href="${href}">`
       el += `<span class="toc-text">${p.title}</span>`
+      if (isActive.length > 0) {
+        el += `<svg t="1705415018387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14793" width="200" height="200"><path d="M256 896a42.666667 42.666667 0 0 1-20.906667-5.546667A42.666667 42.666667 0 0 1 213.333333 853.333333V227.413333A97.28 97.28 0 0 1 307.2 128h409.6A97.28 97.28 0 0 1 810.666667 227.413333V853.333333a42.666667 42.666667 0 0 1-21.333334 36.693334 42.666667 42.666667 0 0 1-42.666666 0l-241.92-136.96-227.413334 136.533333A42.666667 42.666667 0 0 1 256 896z" p-id="14794"></path></svg>`
+      }
       el += `</a>`
     }
     if (p.path === page.path) {
@@ -108,7 +111,8 @@ function layoutDiv(fallback) {
     }
     el += `</widget>`
   } 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
 }

layout/layout.ejs

@@ -5,13 +5,17 @@
   <%- partial('_partial/cover/index') %>
   <div class='l_body' id='start'>
     <aside class='l_left' layout='<%- page.layout %>'>
-    <%- partial('_partial/sidebar/index') %>
+      <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" %>'>
+    <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'>

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

source/css/_common/blur.styl

@@ -1,13 +1,6 @@
 :root
   --blur-px: 12px
-  --blur-bg: alpha(white, .5)
+  --blur-bg: var(--alpha50)
-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-effect()
   background: var(--blur-bg)

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

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
 
 

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

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

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

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

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: var(--alpha100)
-      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
 
 .proj-wrap
   display: grid

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
+    width: 48px
-    height: 50px
+    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

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

source/css/_layout/sidebar/nav-area.styl

@@ -0,0 +1,2 @@
+.nav-area
+  margin: 32px var(--gap-l) 8px

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: 16px
-    line-height: 1.5
     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)
+    background: var(--alpha20)
-    border-radius: $border-bar
+    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
+    li a
-      margin: 1em auto
+        display: block
-      &:hover
+        background: var(--alpha20)
-        .search-result-title
+        line-height: 1.2
-          color: $color-hover
+        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: var(--text-p1)
-      color: $color-hover
+      border-bottom: 1px dashed var(--text-p1)
       font-weight: bold
 
 
-
 .search-wrapper.noresult[searching='true']
   .search-no-result
     display: block
-
+    margin-bottom: 8px
-.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

source/css/_layout/sidebar/sidebar.styl

@@ -1,9 +1,8 @@
 .l_left
-  display: flex
+  margin: 8px
-  flex-direction: column
+  height: 'calc(%s - 16px)' % 100vh
-  word-break: break-all
+  border-radius: $border-card
-  text-align: justify
+  overflow: hidden
-  height: 100vh
   .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 
-.l_left[layout=wiki]
+  .sidebar-bg
-  padding-bottom: 0
+    position absolute
-  height: 100vh
+    width: 100%
-  @media screen and (max-width: $device-mobile-max)
+    height: 100%
-    height: 100vh
+    object-fit: cover
-  .widgets >:last-child
+    background: var(--text-meta)
-    margin-bottom: 6rem
+  .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

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

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

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

source/css/_layout/widgets/recent.styl

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

source/css/_layout/widgets/related.styl

@@ -1,8 +1,39 @@
-.widget-wrapper.related .widget-body a
+
-  margin-top: 0.5rem
+.widget-wrapper.post-card .widget-body
-  margin-bottom: 1rem
+  max-width: 100%
-  .title 
+  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)

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
+      
       

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)

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

source/css/_layout/widgets/toc_wiki.styl

@@ -1,48 +1,49 @@
-.widget-wrapper.toc.multi .widget-header
+.doc-tree+.doc-tree
-  color: var(--text-p1)
+  margin-top: 2px
-  font-size: $fs-14
-
 
 // 其它分页链接
 .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)
+    color: var(--text-p1)
-    padding: 0.5rem
+    padding: 0.5rem 16px
-    display: block
+    display: flex
-    font-size: $fs-12
+    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)
+      background: var(--alpha50)
-      &:after
-        content: '+'
 
 
 // 当前分页链接
 .widget-wrapper.toc.multi .doc-tree.active
   a.doc-tree-link
-    background: var(--block)
+    background: var(--alpha100)
-    font-weight: 700
+    font-weight: 500
-    &:not(:only-child)
-      border-bottom: 1px solid var(--block-border)
     &:hover:after
       content: none
   >.toc
-    padding: 4px
+    padding: 4px 10px
-    background: var(--card)
+    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)

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
+      line-height: 28px
-      top: -2px
-      background: var(--site-bg)
-      padding-top: 2px
-      z-index 1
       .item 
         display: block
-      >span 
+      >span
-        margin: 0.25rem 0
         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
+  display: block
-    margin: 2rem 0
+  margin: 32px 0