[feat] sidebar refactoring

2024-01-17 00:27:48 +08:00 · 2024-01-17 00:27:48 +08:00 · 016d75f1ba
parent 662f59274b
commit 016d75f1ba
43 changed files with 515 additions and 440 deletions
--- a/_config.yml
+++ b/_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/)'
-  title: '[config.title](/)' # you can set html tag like: '[<img no-lazy height="32px" src="xxx"/>](/)'
+  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)

 # 侧边栏主功能导航菜单
@ -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
--- a/_data/widgets.yml
+++ b/_data/widgets.yml
@ -2,20 +2,6 @@
 # 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
@ -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
--- a/layout/_partial/main/header/index.ejs
+++ b/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'}) %>
 <% } %>
--- a/layout/_partial/menubtn.ejs
+++ b/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>
--- a/layout/_partial/sidebar/header.ejs
+++ b/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() %>
--- a/layout/_partial/sidebar/index.ejs
+++ b/layout/_partial/sidebar/index.ejs
@ -32,6 +32,7 @@ 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(',');
@ -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') { %>
-  <%- partial('header', {where: 'sidebar'}) %>
-<% } %>
+<%- layoutLogo() %>
+<%- layoutNavArea() %>
 <%- layoutWidgets() %>
 <%- layoutFooterDiv() %>
--- a/layout/_partial/sidebar/logo.ejs
+++ b/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() %>
--- a/layout/_partial/sidebar/menu.ejs
+++ b/layout/_partial/sidebar/menu.ejs
@ -1,26 +1,18 @@
 <%
 function layoutDiv() {
-  var el = '';
-  el += '<nav class="menu dis-select';
-  if (where == 'main') {
-    el += ' mobile-hidden';
-  }
-  el += '">';
+  var el = ''
+  el += `<nav class="menu dis-select${where == 'main' ? ' mobile-hidden' : ''}">`
  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';
-    if (id == page.menu_id) {
-      el += ' active';
-    }
-    el += '" href="' + url_for(md_link(item)) + '">';
-    el += __(md_text(item));
-    el += '</a>';
+    el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" href="${url_for(md_link(item))}">`
+    el += __(md_text(item))
+    el += `</a>`
  }
-  el += '</nav>';
-  return el;
+  el += `</nav>`
+  return el
 }
 %>

--- a/layout/_partial/sidebar/search.ejs
+++ b/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() %>
--- a/layout/_partial/widgets/ghissues.ejs
+++ b/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>';
    }
--- a/layout/_partial/widgets/ghuser.ejs
+++ b/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;
--- a/layout/_partial/widgets/markdown.ejs
+++ b/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>';
  }
--- a/layout/_partial/widgets/recent.ejs
+++ b/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 += '';
  });
--- a/layout/_partial/widgets/related.ejs
+++ b/layout/_partial/widgets/related.ejs
@ -8,14 +8,18 @@ function relatedPostsInTopic() {
    return ''
  }
  var el = ''
-  el += `<widget class="widget-wrapper recent">`
-  el += `<div class="widget-header cap theme dis-select">`
+  el += `<widget class="widget-wrapper post-list">`
+  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 += `<div class="widget-header cap theme dis-select">`
+    el += `<widget class="widget-wrapper post-card">`
+    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]
--- a/layout/_partial/widgets/search.ejs
+++ b/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() %>
--- a/layout/_partial/widgets/tagcloud.ejs
+++ b/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>';
    }
--- a/layout/_partial/widgets/timeline.ejs
+++ b/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>';
    }
--- a/layout/_partial/widgets/toc.ejs
+++ b/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
 }
--- a/layout/layout.ejs
+++ b/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'>
--- a/scripts/helpers/parse_config.js
+++ b/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') {
-    tmp = hexo.config.title;
-  } else if (tmp == 'config.avatar') {
-    tmp = hexo.config.avatar;
+  if (tmp == 'config.title' || tmp == '${config.title}') {
+    tmp = hexo.config.title
+  } else if (tmp == 'config.avatar' || tmp == '${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
+})
--- a/source/css/_common/blur.styl
+++ b/source/css/_common/blur.styl
@ -1,13 +1,6 @@
 :root
  --blur-px: 12px
-  --blur-bg: alpha(white, .5)
-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-bg: var(--alpha50)

 blur-effect()
  background: var(--blur-bg)
--- a/source/css/_common/cap.styl
+++ b/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
--- a/source/css/_common/device.styl
+++ b/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


--- a/source/css/_defines/theme.styl
+++ b/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
--- a/source/css/_layout/layout.styl
+++ b/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
--- a/source/css/_layout/list.styl
+++ b/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
--- a/source/css/_layout/main.styl
+++ b/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
--- a/source/css/_layout/sidebar/footer.styl
+++ b/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: 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
+      background: var(--alpha100)

 .proj-wrap
  display: grid
--- a/source/css/_layout/sidebar/header.styl
+++ b/source/css/_layout/sidebar/header.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
-    height: 50px
+    width: 48px
+    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
--- a/source/css/_layout/sidebar/menu.styl
+++ b/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)
+
--- a/source/css/_layout/sidebar/nav-area.styl
+++ b/source/css/_layout/sidebar/nav-area.styl
@ -0,0 +1,2 @@
+.nav-area
+  margin: 32px var(--gap-l) 8px
--- a/source/css/_layout/sidebar/search.styl
+++ b/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: 1.5
+    line-height: 16px
    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)
-    border-radius: $border-bar
+    background: var(--alpha20)
+    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
-      margin: 1em auto
-      &:hover
-        .search-result-title
-          color: $color-hover
+    li a
+        display: block
+        background: var(--alpha20)
+        line-height: 1.2
+        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: $color-hover
+      color: var(--text-p1)
+      border-bottom: 1px dashed var(--text-p1)
      font-weight: bold


-
 .search-wrapper.noresult[searching='true']
  .search-no-result
    display: block
-
-.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
+    margin-bottom: 8px
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@ -1,9 +1,8 @@
 .l_left
-  display: flex
-  flex-direction: column
-  word-break: break-all
-  text-align: justify
-  height: 100vh
+  margin: 8px
+  height: 'calc(%s - 16px)' % 100vh
+  border-radius: $border-card
+  overflow: hidden
  .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[layout=wiki]
-  padding-bottom: 0
-  height: 100vh
-  @media screen and (max-width: $device-mobile-max)
-    height: 100vh
-  .widgets >:last-child
-    margin-bottom: 6rem
-
+.l_left 
+  .sidebar-bg
+    position absolute
+    width: 100%
+    height: 100%
+    object-fit: cover
+    background: var(--text-meta)
+  .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
--- a/source/css/_layout/widgets/ghuser.styl
+++ b/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
--- a/source/css/_layout/widgets/list.styl
+++ b/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
--- a/source/css/_layout/widgets/markdown.styl
+++ b/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
--- a/source/css/_layout/widgets/recent.styl
+++ b/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
-
--- a/source/css/_layout/widgets/related.styl
+++ b/source/css/_layout/widgets/related.styl
@ -1,8 +1,39 @@
-.widget-wrapper.related .widget-body a
-  margin-top: 0.5rem
-  margin-bottom: 1rem
+
+.widget-wrapper.post-card .widget-body
+  max-width: 100%
+  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)
--- a/source/css/_layout/widgets/timeline.styl
+++ b/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
+      
      
--- a/source/css/_layout/widgets/toc_blog.styl
+++ b/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)
--- a/source/css/_layout/widgets/toc_common.styl
+++ b/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']
--- a/source/css/_layout/widgets/toc_wiki.styl
+++ b/source/css/_layout/widgets/toc_wiki.styl
@ -1,48 +1,49 @@
-.widget-wrapper.toc.multi .widget-header
-  color: var(--text-p1)
-  font-size: $fs-14
-
+.doc-tree+.doc-tree
+  margin-top: 2px

 // 其它分页链接
 .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)
-    padding: 0.5rem
-    display: block
-    font-size: $fs-12
+    color: var(--text-p1)
+    padding: 0.5rem 16px
+    display: flex
+    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)
-      &:after
-        content: '+'
+      background: var(--alpha50)


 // 当前分页链接
 .widget-wrapper.toc.multi .doc-tree.active
  a.doc-tree-link
-    background: var(--block)
-    font-weight: 700
-    &:not(:only-child)
-      border-bottom: 1px solid var(--block-border)
+    background: var(--alpha100)
+    font-weight: 500
    &:hover:after
      content: none
  >.toc
-    padding: 4px
-    background: var(--card)
+    padding: 4px 10px
+    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)
--- a/source/css/_layout/widgets/widgets.styl
+++ b/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
-      top: -2px
-      background: var(--site-bg)
-      padding-top: 2px
-      z-index 1
+      line-height: 28px
      .item 
        display: block
      >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
-    margin: 2rem 0
+  display: block
+  margin: 32px 0