[opt] sidebar -> leftbar

_config.yml

@@ -62,12 +62,12 @@ site_tree:
   # -- 列表类页面 -- #
   # 主页配置
   home:
-    sidebar: welcome, recent, timeline
+    leftbar: welcome, recent, timeline
   # 博客列表页配置
   index_blog:
     base_dir: blog # 只影响自动生成的页面路径
     menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
-    sidebar: welcome, recent, timeline # for categories/tags/archives
+    leftbar: welcome, recent, timeline # for categories/tags/archives
     nav_tabs:  # 近期发布 分类 标签 专栏 归档 and ...
       # '朋友文章': /friends/rss/
   # 博客专栏列表页配置
@@ -78,34 +78,34 @@ site_tree:
   index_wiki:
     base_dir: wiki # 只影响自动生成的页面路径
     menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
-    sidebar: toc, ghissues, related, recent # for wiki
+    leftbar: toc, ghissues, related, recent # for wiki
     nav_tabs:
       # 'more': https://github.com/xaoxuu
   # -- 内容类页面 -- #
   # 博客文章内页配置
   post:
     menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
-    sidebar: toc, related, ghrepo, ghissues, recent # for pages using 'layout:post'
+    leftbar: toc, related, ghrepo, ghissues, recent # for pages using 'layout:post'
   # 博客专栏文章内页配置
   topic:
     menu_id: post
   # 文档内页配置
   wiki:
     menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
-    sidebar: toc, ghissues, related, recent # for wiki
+    leftbar: toc, ghissues, related, recent # for wiki
   # 作者信息配置
   author: 
     base_dir: author # 只影响自动生成的页面路径
     menu_id: post
-    sidebar: recent, timeline
+    leftbar: recent, timeline
   # 错误页配置
   error_page:
     menu_id: post
     '404': '/404.html'
-    sidebar: recent, timeline
+    leftbar: recent, timeline
   # 其它自定义页面配置 layout: page
   page:
-    sidebar: toc, recent, timeline
+    leftbar: toc, recent, timeline
 
 
 
@@ -521,11 +521,9 @@ style:
   gradient: # https://webgradients.com/
     start: 'linear-gradient(to right, hsl(215, 95%, 64%), hsl(195, 95%, 60%), hsl(165, 95%, 56%), hsl(165, 95%, 56%), hsl(195 95% 60%), hsl(215, 95%, 64%))'
     search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
-  sidebar:
+  leftbar:
-    sticky: false # true/false 屏幕足够宽时，侧边栏是否吸附在正文区域旁边
     # 可以设置：纯色/渐变色/图片作为背景
-    # background: var(--sidebar-bg)
+    # background: var(--leftbar-bg)
-    # background-image: 'linear-gradient(to bottom, var(--sidebar-bg), var(--sidebar-bg))'
     background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)
     blur-px: 100px
     blur-bg: var(--alpha60)

_data/icons.yml

@@ -21,7 +21,7 @@ default:rss: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" view
 default:bookmark.active: <svg class="active-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M21 11.098v4.993c0 3.096 0 4.645-.734 5.321c-.35.323-.792.526-1.263.58c-.987.113-2.14-.907-4.445-2.946c-1.02-.901-1.529-1.352-2.118-1.47a2.225 2.225 0 0 0-.88 0c-.59.118-1.099.569-2.118 1.47c-2.305 2.039-3.458 3.059-4.445 2.945a2.238 2.238 0 0 1-1.263-.579C3 20.736 3 19.188 3 16.091v-4.994C3 6.81 3 4.666 4.318 3.333C5.636 2 7.758 2 12 2c4.243 0 6.364 0 7.682 1.332C21 4.665 21 6.81 21 11.098" opacity=".5"/><path fill="currentColor" d="M9 5.25a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5z"/></svg>
 
 # 侧边栏弹出按钮
-default:sidebar: <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: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: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>

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()'>
+  <button type='button' class='leftbar-toggle mobile' onclick='sidebar.toggle()'>
-    <%- icon('default:sidebar') %>
+    <%- icon('default:leftbar') %>
   </button>
 </div>

layout/_partial/sidebar/index.ejs

@@ -3,49 +3,49 @@
 const wiki = theme.wiki.tree[page.wiki]
 const topic = theme.topic.tree[page.topic]
 
-if (page.sidebar == null) {
+if (page.leftbar == null) {
   const { site_tree } = theme
   var sidebar
   if (is_home()) {
-    sidebar = site_tree.home.sidebar
+    sidebar = site_tree.home.leftbar
   } else if (is_category() || is_tag() || is_archive() || ['categories', 'tags', 'archives'].includes(page.layout)) {
-    sidebar = site_tree.index_blog.sidebar
+    sidebar = site_tree.index_blog.leftbar
   } else if (page.layout === 'index_topic') {
     // 专栏列表页等同于博客列表页
-    sidebar = site_tree.index_blog.sidebar
+    sidebar = site_tree.index_blog.leftbar
   } else if (page.topic?.length > 0) {
     // 专栏文章内页等同于普通文章内页
-    sidebar = site_tree.post.sidebar
+    sidebar = site_tree.post.leftbar
   } else if (page.layout === 'index_wiki') {
-    sidebar = site_tree.index_wiki.sidebar
+    sidebar = site_tree.index_wiki.leftbar
   } else if (page.wiki?.length > 0) {
-    sidebar = site_tree.wiki.sidebar
+    sidebar = site_tree.wiki.leftbar
   } else if (page.layout === '404') {
-    sidebar = site_tree.error_page.sidebar
+    sidebar = site_tree.error_page.leftbar
   } else if (page.layout === 'page') {
-    sidebar = site_tree.page.sidebar
+    sidebar = site_tree.page.leftbar
   } else if (page.layout === 'post') {
-    sidebar = site_tree.post.sidebar
+    sidebar = site_tree.post.leftbar
   } else if (page.layout == null) {
-    sidebar = site_tree.page.sidebar
+    sidebar = site_tree.page.leftbar
   } else {
     sidebar = []
   }
 
-  if (topic?.sidebar) {
+  if (topic?.leftbar) {
-    sidebar = topic.sidebar
+    sidebar = topic.leftbar
   }
-  if (wiki?.sidebar) {
+  if (wiki?.leftbar) {
-    sidebar = wiki.sidebar
+    sidebar = wiki.leftbar
   }
 
-  page.sidebar = sidebar
+  page.leftbar = sidebar
 }
 
 
 // parse array string
-if (typeof page.sidebar == 'string') {
+if (typeof page.leftbar == 'string') {
-  page.sidebar = page.sidebar.replace(/ /g, '').split(',');
+  page.leftbar = page.leftbar.replace(/ /g, '').split(',');
 }
 function layoutTitle(main, url, sub) {
   var el = '';
@@ -66,8 +66,8 @@ function layoutTitle(main, url, sub) {
 function layoutWidgets() {
   var el = '';
   el += '<div class="widgets">';
-  if (page.sidebar) {
+  if (page.leftbar) {
-    page.sidebar.forEach((w, i) => {
+    page.leftbar.forEach((w, i) => {
       let name = ''
       let widget = {}
       if (typeof w == 'string') {

layout/layout.ejs

@@ -44,7 +44,7 @@ html += `<html lang="${page.lang}">`
     html += partial('_partial/cover/index')
     html += `<div class="l_body ${page_type} ${article_type}" id="start" layout="${page.layout}" ${indent ? 'text-indent' : ''}>`
       html += `<aside class="l_left">`
-        html += `<div class="sidebar-container${theme.style.sidebar?.blur ? ' sidebar-blur' : ''}">`
+        html += `<div class="leftbar-container${theme.style.leftbar?.blur ? ' leftbar-blur' : ''}">`
           html += partial('_partial/sidebar/index')
         html += `</div>`
       html += `</aside>`

scripts/generators/author.js

@@ -16,7 +16,7 @@ hexo.extend.generator.register('author', function (locals) {
       layout: ['archive'],
       data: {
         author: author,
-        sidebar: site_tree.author.sidebar,
+        leftbar: site_tree.author.leftbar,
         menu_id: site_tree.author.menu_id
       }
     })

source/css/_common/device.styl

@@ -27,7 +27,7 @@
     --blur-bg: alpha(#000, .4)
 
 // 侧边栏弹出按钮
-.sidebar-toggle.mobile
+.leftbar-toggle.mobile
   cursor: pointer
   color: var(--text)
   background: none
@@ -42,7 +42,7 @@
     width: auto
     height: 28px
 // 侧边栏弹出后
-.l_body.mobile.sidebar .sidebar-toggle.mobile
+.l_body.mobile.leftbar .leftbar-toggle.mobile
   svg g
     fill: currentColor
     fill-opacity: 0.3
@@ -50,8 +50,8 @@
       transform: translateX(2px)
 
 
-.l_body.mobile.sidebar
+.l_body.mobile.leftbar
-  .sidebar-toggle.mobile
+  .leftbar-toggle.mobile
     background: var(--card)
     color: $color-hover
     border-color: var(--block-border)

source/css/_defines/theme.styl

@@ -40,7 +40,7 @@ set_text_light()
   --alpha60: rgba(white, 0.6)
   --alpha75: rgba(white, 0.75)
   --alpha100: white
-  --sidebar-bg: hsl($color-block-h, $color-block-s, 90)
+  --leftbar-bg: hsl($color-block-h, $color-block-s, 90)
   --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)
@@ -60,7 +60,7 @@ set_darkmode()
     --alpha60: rgba(black, 0.6)
     --alpha75: rgba(black, 0.75)
     --alpha100: black
-    --sidebar-bg: hsl($color-block-h, $color-block-s, 24)
+    --leftbar-bg: hsl($color-block-h, $color-block-s, 24)
     set_text_light()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black

source/css/_layout/layout.styl

@@ -1,8 +1,8 @@
 .l_body
   display: grid
   grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
+  grid-gap: var(--gap-l)
   margin: auto
-  padding: 0 var(--gap-l)
   font-size: var(--fsp)
 
 .l_body .l_left
@@ -19,7 +19,7 @@
     display: block !important
   .l_body
     padding: 0
-    grid-template-columns: 1fr
+    display: block
     .l_left
       position: fixed
       transform: translateX(-320px)
@@ -32,7 +32,7 @@
   .l_body.mobile
     .l_left
       transition: transform .38s ease-out
-  .l_body.mobile.sidebar
+  .l_body.mobile.leftbar
     .l_left
       transform: translateX(0px)
     .main-mask

source/css/_layout/sidebar/sidebar.styl

@@ -1,36 +1,35 @@
 .l_left
-  margin: 8px 8px 8px 0
+  margin: 8px 0 8px 8px
   height: 'calc(%s - 16px)' % 100vh
   border-radius: $border-card-l
   overflow: hidden
   .header
     margin: var(--gap-l) var(--gap-l) 0
     margin-top: "calc(2 * %s)" % var(--gap-l)
-  if hexo-config('style.sidebar') && hexo-config('style.sidebar.sticky')
+  @media screen and (min-width: 1400px)
-    @media screen and (min-width: 1400px)
+    margin-left: auto
-      margin-left: auto
+    margin-right: "calc(2 * %s)" % var(--gap-l)
-      margin-right: "calc(2 * %s)" % var(--gap-l)
   @media screen and (min-width: $device-mobile-max)
     >.widgets:first-child>.widget-wrapper:first-child
       margin-top: "calc(2 * %s)" % var(--gap-l)
   
 .l_left
   background-size: cover
-  if hexo-config('style.sidebar') && hexo-config('style.sidebar.background-image')
+  if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
-    background-image: convert(hexo-config('style.sidebar.background-image'))
+    background-image: convert(hexo-config('style.leftbar.background-image'))
-  else if hexo-config('style.sidebar') && hexo-config('style.sidebar.background')
+  else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background')
-    background: convert(hexo-config('style.sidebar.background'))
+    background: convert(hexo-config('style.leftbar.background'))
-  .sidebar-container
+  .leftbar-container
     height: 100%
     display: flex
     flex-direction: column
     word-break: break-all
     text-align: justify
-    if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-px')
+    if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-px')
-      --blur-px: convert(hexo-config('style.sidebar.blur-px'))
+      --blur-px: convert(hexo-config('style.leftbar.blur-px'))
       @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
         background: var(--blur-bg)
         backdrop-filter: saturate(240%) blur(var(--blur-px))
         -webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))
-    if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-bg')
+    if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-bg')
-      --blur-bg: convert(hexo-config('style.sidebar.blur-bg'))
+      --blur-bg: convert(hexo-config('style.leftbar.blur-bg'))

source/js/main.js

@@ -76,11 +76,11 @@ const hud = {
 
 const l_body = document.querySelector('.l_body');
 
-const sidebar = {
+const leftbar = {
   toggle: () => {
     if (l_body) {
       l_body.classList.add('mobile');
-      l_body.classList.toggle("sidebar");
+      l_body.classList.toggle("leftbar");
     }
   }
 }
@@ -139,10 +139,10 @@ const init = {
       })
     })
   },
-  sidebar: () => {
+  leftbar: () => {
     stellar.jQuery(() => {
       $("#data-toc a.toc-link").click(function (e) {
-        l_body.classList.remove("sidebar");
+        l_body.classList.remove("leftbar");
       });
     })
   },
@@ -190,7 +190,7 @@ const init = {
 
 // init
 init.toc()
-init.sidebar()
+init.leftbar()
 init.relativeDate(document.querySelectorAll('#post-meta time'))
 init.registerTabsTag()