[feat] layout refactoring

_config.yml

@@ -89,7 +89,7 @@ site_tree:
   post:
     menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
     leftbar: related, ghrepo, ghissues, recent # for pages using 'layout:post'
-    rightbar: toc
+    rightbar: ghrepo, toc
   # 博客专栏文章内页配置
   topic:
     menu_id: post
@@ -97,19 +97,19 @@ site_tree:
   wiki:
     menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
     leftbar: tree, ghissues, related, recent # for wiki
-    rightbar: toc
+    rightbar: ghrepo, toc
   # 作者信息配置
   author: 
     base_dir: author # 只影响自动生成的页面路径
     menu_id: post
     leftbar: recent, timeline
-    rightbar:
+    rightbar: timeline
   # 错误页配置
   error_page:
     menu_id: post
     '404': '/404.html'
     leftbar: recent, timeline
-    rightbar:
+    rightbar: timeline
   # 其它自定义页面配置 layout: page
   page:
     leftbar: recent

_data/icons.yml

@@ -22,10 +22,15 @@ default:bookmark.active: <svg class="active-icon" xmlns="http://www.w3.org/2000/
 
 # 侧边栏弹出按钮
 default:leftbar: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 11c0-3.771 0-5.657 1.172-6.828C4.343 3 6.229 3 10 3h4c3.771 0 5.657 0 6.828 1.172C22 5.343 22 7.229 22 11v2c0 3.771 0 5.657-1.172 6.828C19.657 21 17.771 21 14 21h-4c-3.771 0-5.657 0-6.828-1.172C2 18.657 2 16.771 2 13z"/><path id="sep" stroke-linecap="round" d="M5.5 10h6m-5 4h4m4.5 7V3"/></g></svg>
+default:rightbar: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6h11m-11 6h11m-11 6h11M4 6h1v4m-1 0h2m0 8H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
+
 default:pin: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.068l-3.771 3.905c-.54.559-.81.839-1.04.935c-.52.22-1.099.032-1.373-.448c-.12-.21-.158-.59-.232-1.35c-.043-.43-.064-.644-.128-.824a1.433 1.433 0 0 0-.835-.864c-.173-.067-.38-.089-.795-.133c-.734-.077-1.101-.116-1.305-.24c-.463-.284-.646-.883-.433-1.422c.094-.237.364-.517.904-1.076L5.456 12l1.238-1.238zl5.306-5.306L18.544 12l2.464 2.55c.54.56.81.84.904 1.076c.213.54.03 1.139-.433 1.423c-.204.124-.57.163-1.305.24c-.414.044-.622.066-.795.133c-.389.149-.69.462-.835.864c-.064.18-.085.394-.128.823c-.075.76-.112 1.14-.232 1.351c-.274.48-.853.669-1.374.448c-.228-.096-.498-.376-1.038-.935z" opacity=".5"/><path fill="currentColor" fill-rule="evenodd" d="M12 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m0-10c-.284 0-.474.34-.854 1.023l-.098.176c-.108.194-.162.29-.246.354c-.085.064-.19.088-.4.135l-.19.044c-.738.167-1.107.25-1.195.532c-.088.283.164.577.667 1.165l.13.152c.143.167.215.25.247.354c.032.104.021.215 0 .438l-.02.203c-.076.785-.114 1.178.115 1.352c.23.174.576.015 1.267-.303l.178-.082c.197-.09.295-.135.399-.135c.104 0 .202.045.399.135l.178.082c.691.319 1.037.477 1.267.303c.23-.174.191-.567.115-1.352l-.02-.203c-.021-.223-.032-.334 0-.438c.032-.103.104-.187.247-.354l.13-.152c.503-.588.755-.882.667-1.165c-.088-.282-.457-.365-1.195-.532l-.19-.044c-.21-.047-.315-.07-.4-.135c-.084-.064-.138-.16-.246-.354l-.098-.176C12.474 6.34 12.284 6 12 6" clip-rule="evenodd"/></svg>
 default:calendar: <svg style="margin-bottom:2px" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M6.94 2c.416 0 .753.324.753.724v1.46c.668-.012 1.417-.012 2.26-.012h4.015c.842 0 1.591 0 2.259.013v-1.46c0-.4.337-.725.753-.725s.753.324.753.724V4.25c1.445.111 2.394.384 3.09 1.055c.698.67.982 1.582 1.097 2.972L22 9H2v-.724c.116-1.39.4-2.302 1.097-2.972c.697-.67 1.645-.944 3.09-1.055V2.724c0-.4.337-.724.753-.724"/><path fill="currentColor" d="M22 14v-2c0-.839-.004-2.335-.017-3H2.01c-.013.665-.01 2.161-.01 3v2c0 3.771 0 5.657 1.172 6.828C4.343 22 6.228 22 10 22h4c3.77 0 5.656 0 6.828-1.172C22 19.658 22 17.772 22 14" opacity=".5"/><path fill="currentColor" d="M18 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0"/></svg>
 default:category: <svg style="margin-bottom:1px" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77c.079.07.154.145.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14z" opacity=".5"/><path fill="currentColor" d="M20 6.238c0-.298-.005-.475-.025-.63a3 3 0 0 0-2.583-2.582C17.197 3 16.965 3 16.5 3H9.988c.116.104.247.234.462.45L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .849.352C14.098 6 14.675 6 15.829 6h.373c1.78 0 2.957 0 3.798.238"/><path fill="currentColor" fill-rule="evenodd" d="M12.25 10a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg>
 
+# 编辑本文
+default:edit: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M11.943 1.25H13.5a.75.75 0 0 1 0 1.5H12c-2.378 0-4.086.002-5.386.176c-1.279.172-2.05.5-2.62 1.069c-.569.57-.896 1.34-1.068 2.619c-.174 1.3-.176 3.008-.176 5.386s.002 4.086.176 5.386c.172 1.279.5 2.05 1.069 2.62c.57.569 1.34.896 2.619 1.068c1.3.174 3.008.176 5.386.176s4.086-.002 5.386-.176c1.279-.172 2.05-.5 2.62-1.069c.569-.57.896-1.34 1.068-2.619c.174-1.3.176-3.008.176-5.386v-1.5a.75.75 0 0 1 1.5 0v1.557c0 2.309 0 4.118-.19 5.53c-.194 1.444-.6 2.584-1.494 3.479c-.895.895-2.035 1.3-3.48 1.494c-1.411.19-3.22.19-5.529.19h-.114c-2.309 0-4.118 0-5.53-.19c-1.444-.194-2.584-.6-3.479-1.494c-.895-.895-1.3-2.035-1.494-3.48c-.19-1.411-.19-3.22-.19-5.529v-.114c0-2.309 0-4.118.19-5.53c.194-1.444.6-2.584 1.494-3.479c.895-.895 2.035-1.3 3.48-1.494c1.411-.19 3.22-.19 5.529-.19m4.827 1.026a3.503 3.503 0 0 1 4.954 4.953l-6.648 6.649c-.371.37-.604.604-.863.806a5.34 5.34 0 0 1-.987.61c-.297.141-.61.245-1.107.411l-2.905.968a1.492 1.492 0 0 1-1.887-1.887l.968-2.905c.166-.498.27-.81.411-1.107c.167-.35.372-.68.61-.987c.202-.26.435-.492.806-.863zm3.893 1.06a2.003 2.003 0 0 0-2.832 0l-.376.377c.022.096.054.21.098.338c.143.413.415.957.927 1.469a3.875 3.875 0 0 0 1.807 1.025l.376-.376a2.003 2.003 0 0 0 0-2.832m-1.558 4.391a5.397 5.397 0 0 1-1.686-1.146a5.395 5.395 0 0 1-1.146-1.686L11.218 9.95c-.417.417-.58.582-.72.76a3.84 3.84 0 0 0-.437.71c-.098.203-.172.423-.359.982l-.431 1.295l1.032 1.033l1.295-.432c.56-.187.779-.261.983-.358c.251-.12.49-.267.71-.439c.177-.139.342-.302.759-.718z" clip-rule="evenodd"/></svg>
+
 github:logo: <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>
 github:repo: <svg aria-hidden="true" role="img" class="color-icon-primary" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" style="user-select:none;overflow:visible"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
 github:star: <svg aria-hidden="true" role="img" class="color-icon-primary" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" style="user-select:none;overflow:visible"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>

_data/widgets.yml

@@ -21,24 +21,34 @@ recent:
   rss: # /atom.xml # npm i hexo-generator-feed
   limit: 10 # Count of posts
 
+# 页面树（与当前页面强关联的上下篇文章列表）
 tree:
   layout: tree
 
-# TOC (valid only in rightbar)
+# 本文目录（当前页面内各级标题列表）
 toc:
   layout: toc
-  list_number: true
+  list_number: false
   min_depth: 1
   max_depth: 6
   collapse: false # true / false / auto
+  # 编辑本文按钮
+  edit_this_page: # 从开头开始匹配替换
+    '_posts/': https://github.com/xaoxuu/xaoxuu.com/blob/main/source/_posts/
+    'wiki/stellar/': https://github.com/xaoxuu/hexo-theme-stellar-docs/blob/main/
 
-# github user info
+# GitHub 用户信息
 ghuser:
   layout: ghuser
-  username: github # your github login username
+  username: # your github login username
   avatar: true # show avatar or not
-  menu: true # show menu or not
 
+# 本文作者组件，需要先配置作者信息: authors.yml
+author:
+  layout: author
+  avatar: true
+
+# 标签云组件
 tagcloud:
   layout: tagcloud
   title: 标签云

languages/en.yml

@@ -10,11 +10,13 @@ btn:
   tag: Tag
   tags: Tags
   archives: Archives
+  all_posts: All Posts
   getting_started: Getting Started
+  edit: Edit This Page
 
 meta:
   recent_update: Recent Update
-  toc: TOC
+  toc: On This Page
   read_next: READ NEXT
   prev: Prev
   next: Next

languages/zh-CN.yml

@@ -10,7 +10,9 @@ btn:
   tag: 标签
   tags: 标签
   archives: 归档
+  all_posts: 所有文章
   getting_started: 开始使用
+  edit: 编辑本文
 
 meta:
   recent_update: 最近更新

languages/zh-TW.yml

@@ -4,13 +4,15 @@ btn:
   wiki: 文檔
   topic: 專欄
   recent_publish: 近期發布
-  all_wiki: 所有 Wiki
+  all_wiki: 所有文檔
   category: 分類
   categories: 分類
   tag: 標籤
   tags: 標籤
   archives: 封存
+  all_posts: 所有網誌
   getting_started: 開始使用
+  edit: 編輯本文
 
 meta:
   recent_update: 最近更新

layout/_partial/main/navbar/article_top_area.ejs

@@ -25,8 +25,6 @@ function layoutDiv() {
   el += partial('dateinfo')
   // end 2.left
   el += `</div>`
-  // 2.right
-  el += partial('ghinfo')
   // end 1.main
   el += `</div>`
   return el

layout/_partial/menubtn.ejs

@@ -1,5 +1,8 @@
-<div class='float-panel mobile-only blur' style='display:none'>
+<div class='float-panel blur'>
-  <button type='button' class='leftbar-toggle mobile' onclick='leftbar.toggle()'>
+  <button type='button' style='display:none' class='laptop-only rightbar-toggle mobile' onclick='sidebar.rightbar()'>
+    <%- icon('default:rightbar') %>
+  </button>
+  <button type='button' style='display:none' class='mobile-only leftbar-toggle mobile' onclick='sidebar.leftbar()'>
     <%- icon('default:leftbar') %>
   </button>
 </div>

layout/_partial/plugins/comments/waline/script.ejs

@@ -32,7 +32,6 @@
     });
   }
   window.addEventListener('DOMContentLoaded', (event) => {
-    console.log('DOM fully loaded and parsed');
     load_comment();
   });
 

layout/_partial/widgets/author.ejs

@@ -0,0 +1,37 @@
+<%
+
+var author = null
+if (theme.authors) {
+  if (page.author?.length > 0 && theme.authors[page.author] != null) {
+    author = theme.authors[page.author]
+  } else {
+    author = theme.default_author
+  }
+}
+
+function layoutDiv() {
+  if (author == null) {
+    return ''
+  }
+  var el = ''
+  el += `<widget class="widget-wrapper${scrollreveal(' ')} user-card author">`
+  // body
+  el += `<div class="widget-body">`
+    if (item.avatar) {
+      el += `<div class="avatar"><img type="img" id="avatar_url" src="${author.avatar}"></div>`
+    }
+    // username
+    el += `<p class="username" ff="title" type="text" id="name">${author.name}</p>`
+    el += `<p class="bio" type="text" id="bio">${author.desc || author.description}</p>`
+
+    // homepage
+    el += `<a class="follow" href="${url_for(author.path)}">`
+    el += icon('solar:documents-bold-duotone')
+    el += __('btn.all_posts')
+    el += `</a>`
+  el += `</div>`
+  el += `</widget>`
+  return el
+}
+%>
+<%- layoutDiv() %>

layout/_partial/widgets/components/edit.ejs

@@ -0,0 +1,24 @@
+<%
+function parseURL() {
+  const source = page.source || ''
+  var url
+  for (let id of Object.keys(map)) {
+    if (source.startsWith(id)) {
+      return source.replace(id, map[id])
+    }
+  }
+}
+function layoutDiv() {
+  const url = parseURL()
+  if (url == null) {
+    return ''
+  }
+  var el = ''
+  el += `<a class="edit" href="${url_for(url)}">`
+  el += icon('default:edit')
+  el += `<span>${__('btn.edit')}</span>`
+  el += `</a>`
+  return el
+}
+%>
+<%- layoutDiv() %>

layout/_partial/widgets/ghuser.ejs

@@ -22,7 +22,7 @@ function layoutDiv() {
     return el;
   }
 
-  el += `<widget class="widget-wrapper${scrollreveal(' ')} ghuser">`
+  el += `<widget class="widget-wrapper${scrollreveal(' ')} user-card ghuser">`
   // body
   el += '<div class="widget-body stellar-ghinfo-api" api="' + theme.api_host.ghapi + '/users/' + item.username + '">';
     if (item.avatar) {

layout/_partial/widgets/related.ejs

@@ -31,7 +31,7 @@ function relatedWiki() {
   if (thisItemObject == null) {
     return ''
   }
-  const relatedItems = thisItemObject.relatedItems
+  const relatedItems = thisItemObject.relatedItems || []
   var el = ''
   for (let relatedItem of relatedItems) {
     el += `<widget class="widget-wrapper${scrollreveal(' ')} post-card">`

layout/_partial/widgets/toc.ejs

@@ -15,11 +15,12 @@ function layoutTocHeader(title) {
   var el = ''
   el += `<div class="widget-header dis-select">`
   el += `<span class="name">${title || __("meta.toc")}</span>`
+  el += `<a class="cap-action" onclick="sidebar.toggleTOC()" >${icon('default:rightbar')}</a>`
   el += `</div>`
   return el
 }
 
-function layoutDiv(fallback) {
+function layoutToc(fallback) {
   const tocBody = layoutTocBody()
   if (tocBody.length == 0) {
     return ''
@@ -34,6 +35,29 @@ function layoutDiv(fallback) {
   return el
 }
 
+function layoutDiv(fallback) {
+  const editBtn = partial('components/edit', {map: item.edit_this_page})
+  const tocBody = layoutTocBody()
+  if (tocBody.length == 0 && editBtn.length == 0) {
+    return ''
+  }
+  var el = ''
+  el += `<widget class="widget-wrapper${scrollreveal(' ')} toc" id="data-toc" collapse="${item.collapse}">`
+  if (tocBody.length > 0) {
+    el += layoutTocHeader()
+    el += `<div class="widget-body">`
+    el += tocBody
+    el += `</div>`
+  }
+  if (editBtn.trim().length > 0) {
+    el += `<div class="widget-footer">`
+    el += editBtn
+    el += `</div>`
+  }
+  el += `</widget>`
+  return el
+}
+
 %>
 
 <%- layoutDiv() %>

layout/layout.ejs

@@ -52,12 +52,12 @@ html += `<html lang="${page.lang}">`
         html += partial('_partial/sidebar/logo', {where: 'main'})
         html += body
         html += partial('_partial/main/footer')
-        html += partial('_partial/menubtn')
+        html += `<div class="main-mask" onclick="sidebar.dismiss()"></div>`
-        html += `<div class="main-mask" onclick="sidebar.toggle()"></div>`
       html += `</div>`
       html += `<aside class="l_right">`
         html += partial('_partial/sidebar/index_rightbar')
       html += `</aside>`
+      html += partial('_partial/menubtn')
     html += `</div>`
     html += `<div class="scripts">`
       html += partial('_partial/scripts/index')

source/css/_common/device.styl

@@ -9,12 +9,15 @@
 
 .float-panel
   position: sticky
+  grid-column-end: span 3
   right: 0
   bottom: 2rem
   float: right
   z-index: 10
   display: flex
-  border-radius: 2rem
+  flex-direction: column
+  border-radius: 0.5rem
+  margin-left: auto
   margin-right: 1rem
   overflow: hidden
   --blur-px: 16px
@@ -27,7 +30,7 @@
     --blur-bg: alpha(#000, .4)
 
 // 侧边栏弹出按钮
-.leftbar-toggle.mobile
+.float-panel button
   cursor: pointer
   color: var(--text)
   background: none
@@ -41,8 +44,16 @@
       trans1 transform
     width: auto
     height: 28px
+
 // 侧边栏弹出后
-.l_body.mobile.leftbar .leftbar-toggle.mobile
+.l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
+  box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -12px $color-theme
+.l_body[leftbar] .float-panel button
+  background: var(--card)
+
+.l_body[leftbar] .float-panel button.leftbar-toggle
+  color: $color-theme
+  border-color: var(--block-border)
   svg g
     fill: currentColor
     fill-opacity: 0.3
@@ -50,8 +61,15 @@
       transform: translateX(2px)
 
 
-.l_body.mobile.leftbar
+.l_body[rightbar] .float-panel button
-  .leftbar-toggle.mobile
+  background: var(--card)
-    background: var(--card)
+
-    color: $color-hover
+.l_body[rightbar] .float-panel button.rightbar-toggle
-    border-color: var(--block-border)
+  color: $color-theme
+  border-color: var(--block-border)
+  svg g
+    fill: currentColor
+    fill-opacity: 0.3
+    path#sep
+      transform: translateX(2px)
+

source/css/_custom.styl

@@ -67,30 +67,32 @@ $border-button = 4px
 
 // 可以动态变化的属性
 :root
-  --width-left: 288px
+  --width-sidebar: 288px
   --width-main: 720px
   --fsp: $fs-body
   --fsh2: 'calc(%s + 11px)' % var(--fsp)
   --fsh3: 'calc(%s + 7px)' % var(--fsp)
   --fsh4: 'calc(%s + 4px)' % var(--fsp)
   
-  --gap-l: 16px
+  --gap-margin: 16px
+  --gap-padding: 16px
+  --gap-max: calc(var(--gap-margin) + var(--gap-padding))
+  
   --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
   --gap-p-compact: 'calc(%s * 0.75)' % $fs-body
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
-    --gap-l: 32px
+    --width-sidebar: 352px
-    --width-left: 352px
     --width-main: 780px
   // desktop 4k or larger
   @media screen and (min-width: $device-4k)
     --width-main: 860px
   // iPad 竖屏
   @media screen and (max-width: $device-tablet)
-    --width-left: 252px
+    --width-sidebar: 252px
   // iPad 竖屏
   @media screen and (max-width: $device-mobile-max)
-    --width-left: 288px
+    --width-sidebar: 288px
 
 // 文章布局风格
 .l_body.story

source/css/_layout/layout.styl

@@ -1,13 +1,13 @@
 .l_body
   display: grid
   grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
-  grid-gap: var(--gap-l)
+  grid-gap: var(--gap-margin)
   margin: auto
   font-size: var(--fsp)
 
 .l_body aside
   z-index: 8
-  width: var(--width-left)
+  width: var(--width-sidebar)
   flex-shrink: 0
   position: sticky
   position: -webkit-sticky
@@ -19,6 +19,29 @@
     height: 100%
     overflow visible
 
+// 平板布局
+@media screen and (max-width: $device-laptop)
+  .laptop-only
+    display: block !important
+  .l_body
+    .l_right
+      position: fixed
+      height: calc(100% - 8px * 2)
+      transform: translateX(320px)
+      transition: transform .38s ease-out
+      margin: 0
+      right: 8px
+      box-shadow: $boxshadow-card-float
+      z-index: 10
+      background: var(--site-bg)
+      overflow: scroll
+  .l_body[rightbar]
+    .l_right
+      transform: translateX(0px)
+    .main-mask
+      opacity 1
+      pointer-events: inherit
+
 // 手机布局
 @media screen and (max-width: $device-mobile-max)
   .mobile-only
@@ -29,16 +52,14 @@
     .l_left
       position: fixed
       transform: translateX(-320px)
+      transition: transform .38s ease-out
       margin: 0
       left: 8px
       box-shadow: $boxshadow-card-float
       z-index: 10
     .l_main
       max-width: 100%
-  .l_body.mobile
+  .l_body[leftbar]
-    .l_left
-      transition: transform .38s ease-out
-  .l_body.mobile.leftbar
     .l_left
       transform: translateX(0px)
     .main-mask

source/css/_layout/main.styl

@@ -1,6 +1,6 @@
 .l_main
   position: relative
-  padding-bottom: "calc(1 * %s)" % var(--gap-l)
+  padding-bottom: var(--gap-max)
   @media screen and (min-width: $device-mobile-max)
     padding-top: 8px
   header

source/css/_layout/sidebar/footer.styl

@@ -1,5 +1,5 @@
 .l_left footer.footer
-  margin: 0.5rem var(--gap-l) 1rem
+  margin: 0.5rem var(--gap-max) 1rem
 
 .social-wrap
   display: grid

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

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

source/css/_layout/sidebar/sidebar.styl

@@ -4,14 +4,24 @@
   border-radius: $border-card-l
   overflow: hidden
   .header
-    margin: var(--gap-l) var(--gap-l) 0
+    margin: var(--gap-max) var(--gap-margin) 0
-    margin-top: "calc(2 * %s)" % var(--gap-l)
   @media screen and (min-width: 1400px)
     margin-left: auto
-    margin-right: "calc(2 * %s)" % var(--gap-l)
+    margin-right: var(--gap-max)
   @media screen and (min-width: $device-mobile-max)
     >.widgets:first-child>.widget-wrapper:first-child
-      margin-top: "calc(2 * %s)" % var(--gap-l)
+      margin-top: "calc(2 * %s)" % var(--gap-max)
+
+.l_right
+  margin: 0 8px 0 0
+  border-radius: $border-card-l
+@media screen and (min-width: 1400px)
+  .l_left
+    margin-left: auto
+    margin-right: var(--gap-max)
+  .l_right
+    margin-left: var(--gap-margin)
+    margin-right: auto
 
 .l_left
   background-size: cover

source/css/_layout/tag-plugins/banner.styl

@@ -129,8 +129,8 @@
 
 @media screen and (min-width: $device-mobile-max)
   .banner.author.top
-    margin-left: var(--gap-l)
+    margin-left: var(--gap-max)
-    margin-right: var(--gap-l)
+    margin-right: var(--gap-max)
   
 @media screen and (max-width: $device-mobile-max)
   .banner.top

source/css/_layout/widgets/ghrepo.styl

@@ -5,7 +5,7 @@
     color: var(--text-p2)
     background: var(--card)
     border-radius: $border-card
-    box-shadow: $boxshadow-card
+    hoverable-card()
     >div+div
       margin-top: 0.5rem
     span

source/css/_layout/widgets/ghuser.styl

@@ -1,19 +1,19 @@
-.widget-wrapper.ghuser
+.widget-wrapper.user-card
   .widget-header+.widget-body
     margin: 0.75rem 0
-.widget-wrapper.ghuser .widget-body
+.widget-wrapper.user-card .widget-body
   text-align: center
   background: var(--card)
   border-radius: $border-card
   padding: 1rem
-  box-shadow: $boxshadow-card
+  hoverable-card()
 
-.widgets .widget-wrapper.ghuser 
+.widgets .widget-wrapper.user-card 
   .avatar
     display: block
     border-radius: 100%
     margin: 1rem auto 1.25rem auto
-    max-width: 75%
+    max-width: 128px
     overflow: hidden
     img
       display: block
@@ -32,6 +32,7 @@
   .follow 
     font-weight: 500
     border-radius: 64px
+    margin: 1rem 0 0
     padding: 0.5rem 1rem
     background: $color-theme
     color: var(--card)
@@ -45,6 +46,8 @@
     trans1: background
     svg
       margin-right: 6px
+      height: 1.5em
+      width: auto
     &:hover
       background: $color-hover
 

source/css/_layout/widgets/timeline.styl

@@ -12,7 +12,7 @@
         border-bottom: 1px solid $color-hover
   .tag-plugin.timeline .timenode
     .header
-      margin: 0.5rem 16px
+      margin: 0.5rem var(--gap-padding)
       txt-ellipsis()
       .user-info
         background: var(--alpha50)
@@ -27,8 +27,6 @@
       color: var(--text-p2)
     .body
       border-radius: $border-card
-      background: var(--alpha50)
-      box-shadow: none
       p,li
         --fsp: $fsp3
       code 
@@ -41,3 +39,8 @@
       
   .tag-plugin.timeline[api] .body .footer
     background: none
+
+
+.l_left .widget-wrapper.timeline .body
+  box-shadow: none
+  background: var(--alpha50)

source/css/_layout/widgets/toc.styl

@@ -1,3 +1,6 @@
+.widget-wrapper.toc
+  background: var(--site-bg)
+  z-index 1
 // 目录基本样式
 .widget-wrapper.toc .toc
   --fsp: $fsp2
@@ -11,7 +14,7 @@
     margin: 2px 0
     list-style: none
   a  
-    padding: 4px var(--gap-l)
+    padding: 4px var(--gap-max)
     color: var(--text-p2)
     display: block
     overflow: hidden
@@ -20,7 +23,7 @@
     position relative
     &:before,&:after
       position: absolute
-      left: 4px
+      left: 'calc(%s * 0.5)' % var(--gap-max)
       width: 8px
       height: 8px
       top: 'calc(%s - 4px)' % 50%
@@ -39,12 +42,19 @@
           opacity 0
     
 // 固定位置
-.l_right .widget-wrapper.toc
+.l_right .widgets .widget-wrapper.toc
   position: sticky
   position: -webkit-sticky
-  top: 32px
+  top: 0
-  max-height: 'calc(90vh - 2 * %s)' % @top
+  margin-top: 0
-  overflow: scroll
+  padding: 16px 0
+  .widget-body .toc
+    max-height: 75vh
+    @media screen and (max-width: $device-laptop)
+      max-height: unset
+    overflow: scroll
+
+
 
 // 各级缩进样式
 .widget-wrapper.toc .toc
@@ -88,3 +98,47 @@
   display: block
 .widget-wrapper.toc[collapse='auto'] ol:has(> .toc-item a.active)
   display: block
+
+// 手动折叠
+.widget-wrapper.toc 
+  .widget-body
+    display: grid
+    grid-template-rows: 1fr
+    trans1 all
+    overflow hidden
+.l_right .widgets .widget-wrapper.toc .widget-header .cap-action:hover
+  background: var(--block-border)
+.l_right .widgets .widget-wrapper.toc.collapse
+  .widget-header .cap-action
+    background: var(--block-border)
+  .widget-body
+    grid-template-rows: 0fr
+
+// 编辑本文按钮
+.widget-wrapper.toc .widget-footer
+  margin-top: 8px
+  color: var(--text-p2)
+  position relative
+  padding-top: 8px
+  &:before 
+    content: ''
+    position absolute
+    background: var(--block-border)
+    top: 0
+    height: 1px
+    left: var(--gap-max)
+    right: var(--gap-max)
+  a
+    display: flex
+    align-items: center
+    color: inherit
+    font-size: $fs-14
+    padding: 8px 16px
+    margin: 0 calc(var(--gap-max) - 16px)
+    border-radius: 4px
+    svg,img
+      height: 16px
+      width: auto
+      margin-right: 8px
+  a:hover
+    background: var(--block-hover)

source/css/_layout/widgets/widgets.styl

@@ -10,11 +10,10 @@
   scrollbar(0, 0)
   z-index: 1
   line-height: 1.2
-  margin: 0 var(--gap-l)
   .widget-wrapper
     .widget-header
-      padding-left: var(--gap-l)
+      padding-left: var(--gap-padding)
-      padding-right: var(--gap-l)
+      padding-right: var(--gap-padding)
       display: flex
       justify-content: space-between
       align-items: baseline
@@ -50,16 +49,33 @@
             fill: $color-hover
 
     .widget-body
-      margin: 0.5rem 0
       color: var(--text-p1)
       p
         margin-top: .5em
         margin-bottom: .5em
         line-height: 1.5
-    .widget-header+.widget-body
-      margin-top: 0
 
 
 .widget-wrapper
   display: block
-  margin: 32px 0
+
+.l_left .widgets
+  margin: 0 var(--gap-margin)
+  .widget-wrapper
+    margin: 32px 0
+  
+.l_right .widgets
+  .widget-wrapper
+    margin-top: 8px
+    .widget-header
+      padding-left: var(--gap-max)
+      padding-right: var(--gap-max)
+    &:not(.toc)
+      margin-left: var(--gap-margin)
+      margin-right: var(--gap-margin)
+  .widget-wrapper+.widget-wrapper
+    margin-top: 32px
+  @media screen and (max-width: $device-laptop)
+    .widget-wrapper
+      margin-top: var(--gap-margin)
+      border-radius: $border-card

source/js/main.js

@@ -1,4 +1,3 @@
-console.log('\n' + '%c Stellar v' + stellar.version + ' %c\n' + stellar.github + '\n', 'color:#e8fafe;background:#03c7fa;padding:8px;border-radius:4px', 'margin-top:8px');
 // utils
 const util = {
 
@@ -76,12 +75,27 @@ const hud = {
 
 const l_body = document.querySelector('.l_body');
 
-const leftbar = {
+const sidebar = {
-  toggle: () => {
+  leftbar: () => {
     if (l_body) {
-      l_body.classList.add('mobile');
+      l_body.toggleAttribute('leftbar');
-      l_body.classList.toggle("leftbar");
+      l_body.removeAttribute('rightbar');
     }
+  },
+  rightbar: () => {
+    if (l_body) {
+      l_body.toggleAttribute('rightbar');
+      l_body.removeAttribute('leftbar');
+    }
+  },
+  dismiss: () => {
+    if (l_body) {
+      l_body.removeAttribute('leftbar');
+      l_body.removeAttribute('rightbar');
+    }
+  },
+  toggleTOC: () => {
+    document.querySelector('#data-toc').classList.toggle('collapse');
   }
 }
 
@@ -91,53 +105,58 @@ const init = {
       const scrollOffset = 32;
       var segs = [];
       $("article.md-text :header").each(function (idx, node) {
-        segs.push(node)
+        segs.push(node);
       });
-      // 定位到激活的目录树（不如pjax体验好）
+      function activeTOC() {
-      // const widgets = document.querySelector('.widgets')
-      // const e1 = document.querySelector('.doc-tree-link.active')
-      // const offsetTop = e1.getBoundingClientRect().top - widgets.getBoundingClientRect().top - 100
-      // if (offsetTop > 0) {
-      //   widgets.scrollBy({top: offsetTop, behavior: 'smooth'})
-      // }
-      // 滚动
-      $(document, window).scroll(function (e) {
         var scrollTop = $(this).scrollTop();
-        var topSeg = null
+        var topSeg = null;
         for (var idx in segs) {
-          var seg = $(segs[idx])
+          var seg = $(segs[idx]);
           if (seg.offset().top > scrollTop + scrollOffset) {
-            continue
+            continue;
           }
           if (!topSeg) {
-            topSeg = seg
+            topSeg = seg;
           } else if (seg.offset().top >= topSeg.offset().top) {
-            topSeg = seg
+            topSeg = seg;
           }
         }
         if (topSeg) {
-          $("#data-toc a.toc-link").removeClass("active")
+          $("#data-toc a.toc-link").removeClass("active");
-          var link = "#" + topSeg.attr("id")
+          var link = "#" + topSeg.attr("id");
           if (link != '#undefined') {
-            const highlightItem = $('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
+            const highlightItem = $('#data-toc a.toc-link[href="' + encodeURI(link) + '"]');
             if (highlightItem.length > 0) {
-              highlightItem.addClass("active")
+              highlightItem.addClass("active");
-              const e0 = document.querySelector('#data-toc')
-              console.log('e0', e0);
-              const e1 = document.querySelector('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
-              const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 200
-              const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64
-              if (offsetTop < 0) {
-                e0.scrollBy(0, offsetTop)
-              } else if (offsetBottom > 0) {
-                e0.scrollBy(0, offsetBottom)
-              }
             }
           } else {
-            $('#data-toc a.toc-link:first').addClass("active")
+            $('#data-toc a.toc-link:first').addClass("active");
           }
         }
-      })
+      }
+      function scrollTOC() {
+        const e0 = document.querySelector('#data-toc .toc');
+        const e1 = document.querySelector('#data-toc .toc a.toc-link.active');
+        if (e0 == null || e1 == null) {
+          return;
+        }
+        const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 100;
+        const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64;
+        if (offsetTop < 0) {
+          e0.scrollBy({top: offsetTop, behavior: "smooth"});
+        } else if (offsetBottom > 0) {
+          e0.scrollBy({top: offsetBottom, behavior: "smooth"});
+        }
+      }
+      
+      var timeout = null;
+      window.addEventListener('scroll', function() {
+        activeTOC();
+        if(timeout !== null) clearTimeout(timeout);
+        timeout = setTimeout(function() {
+          scrollTOC();
+        }.bind(this), 300);
+      });      
     })
   },
   leftbar: () => {