hexo-theme-stellar 1.18.1 → 1.18.2

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.18.1'
+  version: '1.18.2'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   cdn_css: # Use cdn links instead of /css/main.css
@@ -197,9 +197,10 @@ footer:
 
 ######## Tag Plugins ########
 tag_plugins:
-  # {% note text %}
+  # {% ablock %} / {% note %}
   note:
     default_color: '' # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
+    border: true # true / false
   # {% checkbox %}
   checkbox:
     interactive: false # enable interactive for user
@@ -319,12 +320,22 @@ plugins:
 style:
   darkmode: auto # auto / always / false
   smooth_scroll: true # true / false
-  font-size: 16px
+  font-size:
+    root: 16px
+    body: .9375rem # 15px
+    code: 85% # 14px
+    codeblock: 0.8125rem # 13px
   font-family:
     logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
     body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
     code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
+    codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
   text-align: left
+  border-radius:
+    card: 12px
+    block: 12px
+    bar: 6px
+    image: 6px
   color:
     # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
     background: 'hsl(212 16% 98%)' # 浅色背景颜色
@@ -346,6 +357,9 @@ style:
   loading:
     loading: 正在加载
     error: 加载失败，请稍后重试。
+  gradient: # https://webgradients.com/
+    start: 'linear-gradient(to right, #92fe9d 0%, #00c9ff 50%, #92fe9d 100%)'
+    search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
 
 default:
   avatar: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg

package/layout/404.ejs

@@ -16,6 +16,6 @@ page.robots = 'none';
     <%- __('page.error.why') %>
   </p>
   <br><br>
-  <a class='button theme' id='back' href="<%- config.root %>"><%- __('page.error.action') %></a>
+  <a class='button' id='back' href="<%- config.root %>"><%- __('page.error.action') %></a>
 </article>
 <%- partial('_partial/plugins/comments/layout') %>

package/layout/_partial/cover/wiki_cover.ejs

@@ -39,7 +39,7 @@ function layoutWikiCover() {
     el += '<div class="description">' + desc + '</div>';
   }
   el += '<div class="start-wrap">';
-  el += '<a class="button theme start" href="#start">' + (proj.start || __('btn.getting_started')) + '</a>';
+  el += '<a class="button start gradient" href="#start">' + (proj.start || __('btn.getting_started')) + '</a>';
   el += '</div>';
   el += '</article>';
   el += '</div>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.18.1",
+  "version": "1.18.2",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/tags/lib/tabs.js

@@ -39,11 +39,11 @@ module.exports = ctx => function(args, content = '') {
     const abbr = tabName + ' ' + ++tabId
     const href = abbr.toLowerCase().split(' ').join('-')
     const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
-    tabNav += `<li class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></li>`
+    tabNav += `<div class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></div>`
     tabContent += `<div class="tab-pane${isActive}" id="${href}">${content}</div>`
   })
 
-  tabNav = `<ul class="nav-tabs">${tabNav}</ul>`
+  tabNav = `<div class="nav-tabs">${tabNav}</div>`
   tabContent = `<div class="tab-content">${tabContent}</div>`
 
   var el = ''

package/source/css/_common/base.styl

@@ -1,6 +1,6 @@
 pre
-  font-family: $ff-code
-  font-size: $fs-code
+  font-family: $ff-codeblock
+  font-size: $fs-codeblock
   tab-size: 4
   -moz-tab-size: 4
   -o-tab-size: 4

package/source/css/_common/blockquote.styl

@@ -2,9 +2,9 @@ blockquote
   display: block
   margin-left: 0
   margin-right: 0
-  padding: 0.5rem 0.75rem
+  padding: 0.25rem 0.75rem
   background: var(--block)
   $bd-left = 4px
   border-left: $bd-left solid var(--text-meta)
-  border-radius: $bd-left $border-block $border-block $bd-left
+  border-radius: $bd-left $border-bar $border-bar $bd-left
   color: var(--text-p2)

package/source/css/_common/button.styl

@@ -9,14 +9,50 @@ a.button
   font-weight: 500
   line-height: 1
   padding: 0.75rem 2rem
-  border-radius: 3px
-  trans1: background
+  border-radius: $border-button
   font-size: $fs-15
+  user-select: none
   &.theme
     background: $color-theme
     color: var(--card)
     &:hover
       background: $color-hover
+  &.start
+    border-radius: 100px
+    background: var(--text-p1)
+    color: var(--card)
 
 a[onclick]:hover
   cursor: pointer
+
+a.button.start.gradient
+  transition: 0.38s ease-out
+  position relative
+  z-index: 0
+  background: convert(hexo-config('style.gradient.start'))
+  background-size: 1000%
+  color: white
+  animation: glow 60s linear infinite
+  @keyframes glow {
+    from {
+      background-position: 0%
+    }
+    to {
+      background-position: 1000%
+    }
+  }
+  &:after
+    content: ''
+    position absolute
+    left: 0
+    right: 0
+    top: 0
+    bottom: 0
+    border-radius: 100px
+    background: inherit
+    z-index -1
+    filter: blur(36px)
+    transition: 0.38s ease-out
+    opacity 0
+  &:hover:after
+    opacity 1

package/source/css/_common/highlight.styl

@@ -4,7 +4,7 @@ code
   font-family: $ff-code
 
 p>code:not([class]),li>code:not([class])
-  font-size: 85%
+  font-size: $fs-code
   background: var(--block)
   padding: .2em
   border-radius: 4px
@@ -16,7 +16,7 @@ p>code:not([class]),li>code:not([class])
   overflow: hidden
   background: var(--block)
   line-height: 1.5
-  font-family: $ff-code
+  font-family: $ff-codeblock
   box-sizing: border-box
   @media screen and (min-width: $device-mobile)
     min-width: 180px
@@ -27,15 +27,16 @@ p>code:not([class]),li>code:not([class])
   display: block
   figcaption
     color: var(--text-p2)
-    font-size: $fs-code
-    padding: 4px 0.5rem
-    position: sticky
-    left: 0
-    background: var(--block-hover)
-    border-top-left-radius: "calc(%s - 1px)" % $border-block
-    border-top-right-radius: "calc(%s - 1px)" % $border-block
+    font-size: $fs-codeblock
+    font-weight: 500
+    margin-left: 0.5rem
+    display: inline-block
     span
-      margin-right: 4px
+      padding: 4px 0.5rem
+      display: block
+      border-bottom-left-radius: $border-bar
+      border-bottom-right-radius: $border-bar
+      background: var(--block-hover)
   >table
     overflow: auto
     display: block

package/source/css/_custom.styl

@@ -20,7 +20,8 @@ $color-text = convert(hexo-config('style.color.text'))
 //   font-style: normal
 
 $ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
-$ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
+$ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
+$ff-code = $ff-codeblock
 $ff-logo = $ff-body
 
 if hexo-config('style.font-family.body')
@@ -29,12 +30,15 @@ if hexo-config('style.font-family.body')
 if hexo-config('style.font-family.code')
   $ff-code = convert(hexo-config('style.font-family.code'))
 
+if hexo-config('style.font-family.codeblock')
+  $ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
+
 if hexo-config('style.font-family.logo')
   $ff-logo = convert(hexo-config('style.font-family.logo'))
 
 
 // font size
-$fs-root = convert(hexo-config('style.font-size'))
+$fs-root = convert(hexo-config('style.font-size.root'))
 $fs-15 = .9375rem
 $fs-14 = .875rem
 $fs-13 = .8125rem
@@ -46,19 +50,24 @@ $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
 $fs-h5   = $fs-15
 $fs-h6   = $fs-12
-$fs-p    = $fs-15
-$fs-code = $fs-13
+$fs-p    = convert(hexo-config('style.font-size.body'))
+$fs-code = convert(hexo-config('style.font-size.code'))
+$fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
+
 
-$border-card = 12px
-$border-block = 6px
-$border-image = 6px
+$border-card = convert(hexo-config('style.border-radius.card'))
+$border-block = convert(hexo-config('style.border-radius.block'))
+$border-bar = convert(hexo-config('style.border-radius.bar'))
+$border-image = convert(hexo-config('style.border-radius.image'))
+$border-button = 4px
 
 // 可以动态变化的属性
 :root
   --width-left: 288px
   --width-main: 720px
   --gap-l: 16px
-  --gap-p: .75rem // gap for paragraph
+  --gap-p: 1rem // gap for paragraph
+  --gap-p-compact: 0.75rem
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px

package/source/css/_defines/func.styl

@@ -83,7 +83,7 @@ scrollbar-codeblock($height = 4px)
   &::-webkit-scrollbar-thumb
     background: transparent
     cursor: pointer
-    border-radius: $border-block
+    border-radius: $border-bar
   &:hover
     &::-webkit-scrollbar-thumb
       background: var(--text-meta)

package/source/css/_defines/theme.styl

@@ -38,7 +38,6 @@ set_text_light()
   --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)
-  --block-lighten: hsl($color-block-h, $color-block-s, 100)
   set_text_dark()
   --theme-bg2: $color-theme
   --theme-link: $color-link
@@ -46,11 +45,10 @@ set_text_light()
 set_darkmode()
   :root
     --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
-    --card: hsl($color-block-h, $color-block-s * 1.5, 24)
+    --card: hsl($color-block-h, $color-block-s * 1.2, 24)
     --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)
-    --block-lighten: hsl($color-block-h, $color-block-s, 32)
     set_text_light()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black

package/source/css/_layout/list.styl

@@ -55,7 +55,6 @@
 
 .post-list .post-card:hover
   box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
-  transform: translateY(-1px)
   img 
     transform: scale(1.02)
     filter: brightness(80%)

package/source/css/_layout/md.styl

@@ -36,8 +36,6 @@ h1.article-title
     margin-top: 0
   h1:not(:first-child)
     margin-top: 2em
-  h2:first-child
-    margin-top: 0
   h2
     margin-bottom: 1rem
   h3,h4,h5,h6
@@ -62,9 +60,13 @@ h1.article-title
     p,ul,ol
       font-size: $fs-14
       line-height: 1.5
+      code 
+        font-size: inherit
+        padding: 0
+        background: none
   p,blockquote,.tag-plugin,ul,ol,.highlight,table
     *
-      --gap-p: .5rem
+      --gap-p: var(--gap-p-compact)
   p,ul,ol
     margin-top: 'calc(%s - 4px)' % var(--gap-p)
     margin-bottom: 'calc(%s - 4px)' % var(--gap-p)

package/source/css/_layout/pages/archives.styl

@@ -47,7 +47,7 @@
     &.child
       padding-left: 2rem
     padding: .5em 1rem
-    border-radius: $border-block
+    border-radius: $border-bar
     color: var(--text-p2)
     align-items: center
     justify-content: space-between

package/source/css/_layout/pages/error.styl

@@ -17,7 +17,6 @@
     display: inline-block
     background: #FDB62F
     color: black
-    border-radius: 4px
     border: 2px solid black
 
 @media screen and (max-width: $device-tablet)

package/source/css/_layout/partial/related.styl

@@ -14,7 +14,7 @@
 
   a.more
     padding: 0.25rem 0.5rem
-    border-radius: $border-block
+    border-radius: $border-bar
     color: var(--text-p1)
 
 article.md-text.content+.related-wrap

package/source/css/_layout/sidebar/header.styl

@@ -28,7 +28,7 @@ nav.menu
     text-align: center
     &.active, &:hover
       color: var(--text-p1)
-      background: var(--block-lighten)
+      background: var(--card)
       box-shadow: $boxshadow-button
 
 .l_left .menu a.nav-item

package/source/css/_layout/sidebar/sidebar.styl

@@ -23,7 +23,8 @@
     margin-bottom: 6rem
 
 
-.l_left .widgets .widget-wrapper.logo-wrap.wiki
+.l_left .widgets .widget-wrapper.logo-wrap.wiki .widget-body
+  display: flex
   margin-bottom: 1.5rem
   flex-direction: column
   align-items: flex-start

package/source/css/_layout/tag-plugins/checkbox.styl

@@ -1,8 +1,9 @@
-.md-text .checkbox
+.md-text .tag-plugin.checkbox
   display: flex
+  align-items: center
   font-size: $fs-15
   line-height: 1.2
-  --gap-p: .25rem
+  --gap-p: 'calc(%s / 2)' % var(--gap-p-compact)
   input
     -webkit-appearance: none
     -moz-appearance: none
@@ -20,8 +21,6 @@
     margin-right: 8px
     if hexo-config('tag_plugins.checkbox.interactive') != true
       pointer-events: none
-  span
-    margin-top: 1px
   /* Checkbox */
   input[type=checkbox]
     &:before, &:after

package/source/css/_layout/tag-plugins/common.styl

@@ -16,8 +16,8 @@ set_dynamic_color($theme)
   --theme-bg1: hsl(hue($theme), 90, 90)
   --theme-bg2: hsl(hue($theme), 80, 95)
   --theme-border: hsl(hue($theme), 50, 80)
-  --text-p0: hsl(hue($theme), 60, 16)
-  --text-p1: hsl(hue($theme), 50, 24)
+  --text-p0: hsl(hue($theme), 55, 16)
+  --text-p1: hsl(hue($theme), 55, 20)
   --text-p2: hsl(hue($theme), 90, 24)
 
 .tag-plugin
@@ -69,11 +69,11 @@ set_dynamic_color($theme)
 set_darkmode_tags()
   set_dynamic_color($theme)
     --theme: $theme
-    --theme-bg1: hsl(hue($theme), 80, 20)
-    --theme-bg2: hsl(hue($theme), 16, 16)
+    --theme-bg1: hsl(hue($theme), 50, 16)
+    --theme-bg2: hsl(hue($theme), 32, 16)
     --theme-border: hsl(hue($theme), 50, 24)
-    --text-p0: hsl(hue($theme), 80, 80)
-    --text-p1: hsl(hue($theme), 64, 80)
+    --text-p0: hsl(hue($theme), 100, 85)
+    --text-p1: hsl(hue($theme), 50, 75)
     --text-p2: hsl(hue($theme), 80, 72)
   .tag-plugin.tag
     set_dynamic_color($color-theme)

package/source/css/_layout/tag-plugins/copy.styl

@@ -3,7 +3,7 @@
   justify-content: space-between
   box-sizing: border-box
   background: var(--block)
-  border-radius: $border-block
+  border-radius: $border-bar
   border: 1px solid var(--block-border)
   overflow: hidden
   width: 320px

package/source/css/_layout/tag-plugins/folders.styl

@@ -1,7 +1,7 @@
 .tag-plugin.folders
   display: block
   margin: 1rem 0
-  border-radius: $border-block
+  border-radius: $border-bar
   font-size: $fs-14
   border: 1px solid var(--theme-border)
   overflow: hidden

package/source/css/_layout/tag-plugins/folding.styl

@@ -2,7 +2,7 @@ details.folding
   display: block
   padding: 1rem
   margin: 1rem 0
-  border-radius: $border-block
+  border-radius: $border-bar
   font-size: $fs-14
   background: var(--theme-bg2)
   border: 1px solid var(--theme-border)
@@ -10,7 +10,7 @@ details.folding
     cursor: pointer
     padding: .75rem 1rem
     margin: 0 - 1rem
-    border-radius: $border-block
+    border-radius: $border-bar
     color: var(--text-p2)
     font-weight: 500
     position: relative
@@ -29,6 +29,7 @@ details.folding
       top: 50%
       transform: translateY(-50%)
       right: 1rem
+      line-height: 1
 
 
 details.folding[open]
@@ -47,8 +48,8 @@ details.folding[open]
     margin: 0 - 1rem
     margin-top: 0
     background: var(--card)
-    border-bottom-left-radius: 'calc(%s - 1px)' % $border-block
-    border-bottom-right-radius: 'calc(%s - 1px)' % $border-block
+    border-bottom-left-radius: 'calc(%s - 1px)' % $border-bar
+    border-bottom-right-radius: 'calc(%s - 1px)' % $border-bar
     font-size: $fs-15
     >:first-child
       margin-top: 0

package/source/css/_layout/tag-plugins/grid.styl

@@ -17,7 +17,10 @@
       margin-top: -0.25em
     p:last-child
       margin-bottom: -0.25em
-    
+
+.md-text .tag-plugin.grid
+  margin-top: -0.5rem
+  margin-bottom: -0.5rem 
 
 .tag-plugin.grid
   @media screen and (max-width: $device-tablet)

package/source/css/_layout/tag-plugins/link.styl

@@ -18,7 +18,7 @@
   @media screen and (max-width: $device-mobile-375)
     width: 100%
   box-shadow: $boxshadow-card
-  border-radius: $border-block
+  border-radius: $border-bar
   trans2: box-shadow transform
   &:hover
     box-shadow: $boxshadow-card-float

package/source/css/_layout/tag-plugins/note.styl

@@ -1,26 +1,26 @@
 .md-text .tag-plugin.note
   position: relative
-  margin-top: 1rem
-  margin-bottom: 1rem
-  padding: 0 1rem
+  padding: 0.25rem 1rem
   border-radius: $border-block
   background: var(--theme-bg2)
-  border: 1px solid var(--theme-border)
+  overflow: hidden
+  if hexo-config('tag_plugins.note.border') == true
+    border: 1px solid var(--theme-border)
   color: var(--text-p1)
   >.title
     font-size: $fs-15
-    line-height: 1.2
-    margin-top: 1rem
+    line-height: 1.5
+    margin-top: var(--gap-p-compact)
     font-weight: 500
     color: var(--text-p0)
   >.body
     &,p
       font-size: $fs-14
       line-height: 1.5
-    margin-top: .5rem
-    margin-bottom: 1rem
+    margin-top: var(--gap-p-compact)
+    margin-bottom: var(--gap-p-compact)
   >.body:only-child
-    margin: 1rem 0
+    margin: 'calc(%s - 0.25rem)' % var(--gap-p) 0
 
 
 .md-text .tag-plugin.note[color]
@@ -47,7 +47,6 @@
       margin-top: .5rem
 
 .md-text .tag-plugin.note[child=iframe]
-  overflow: hidden
   padding: 0
   >.body
     margin: 0

package/source/css/_layout/tag-plugins/quot.styl

@@ -20,7 +20,7 @@
   max-width 400px
   position: relative
 // override
-.tag-plugin.quot
+.md-text.content .tag-plugin.quot
   h1
     font-size: $fs-h1
     font-weight: 900
@@ -29,6 +29,8 @@
       padding: 20px 24px 12px
   h2,h3,h4,h5,h6
     font-size: $fs-h3
+    margin-top: 1em
+    margin-bottom: 0
   p
     font-size: $fs-h4
     color: var(--text-p0)

package/source/css/_layout/tag-plugins/tabs.styl

@@ -16,7 +16,7 @@
       align-self: flex-end
 
 .tag-plugin.tabs
-  ul.nav-tabs
+  .nav-tabs
     display: flex
     align-self: center
     overflow: scroll visible
@@ -36,7 +36,7 @@
       bottom: 0
       left: 0
       border-radius: 2px
-    li.tab
+    .tab
       list-style-type: none
       a
         display: block

package/source/css/_layout/tag-plugins/timeline.styl

@@ -99,15 +99,11 @@
 
 .tag-plugin.timeline .body
   background: var(--card)
-  border-radius: 12px
+  border-radius: $border-card
   border-top-left-radius: 2px
   padding: 0.5rem 1rem
   margin-top: 4px
   box-shadow: $boxshadow-block
-  trans2: transform box-shadow
-  &:hover
-    transform: translateY(-1px)
-    box-shadow: $boxshadow-card-float
   p
     font-size: $fs-14
     img  

package/source/css/_layout/tag-plugins/toc.styl

@@ -1,7 +1,7 @@
 details.toc
   background: var(--block)
   border: 1px solid var(--block-border)
-  border-radius: $border-block
+  border-radius: $border-bar
   overflow: hidden
   color: var(--text-p2)
   summary

package/source/css/_layout/widgets/search.styl

@@ -10,23 +10,36 @@
     display: flex
     flex-direction: row
     align-items: center
+    transition: 0.38s ease-out
+    z-index: 0
+    &:after
+      content: ''
+      position absolute
+      left: 0
+      right: 0
+      bottom: 0
+      height: 2px
+      border-radius: 4px
+      background: convert(hexo-config('style.gradient.search'))
+      background-size: 200%
+      animation: glow 10s linear infinite
+      @keyframes glow {
+        from {
+          background-position: 0%
+        }
+        to {
+          background-position: 200%
+        }
+      }
   .search-input
     width: 100%
-    padding: 0.5rem
+    padding: 0.5rem 0
     line-height: 1
     box-sizing: border-box
     font-family: $ff-body
-    border-radius: $border-block
-    background-color: var(--card)
     color: var(--text-p0)
-    border: 1px solid var(--block-border)
-    &:focus
-      trans1 border-color
   
-  &.noresult 
-    .search-input
-      &:focus
-        border: 1px solid $c-red
+  &.noresult
     .search-icon
       color: $c-red
 
@@ -38,7 +51,7 @@
     font-size: $fs-14
     padding: 2rem
     background: var(--block)
-    border-radius: $border-block
+    border-radius: $border-bar
 
   #search-result
     ul.search-result-list
@@ -84,20 +97,16 @@
     top: 0
     background: var(--site-bg)
   .search-input
-    margin-top: 1rem
-    margin-bottom: -1rem
-    padding-left: 1.75rem
+    padding-left: 1.5rem
   .search-icon 
-    margin-top: 1rem
-    margin-bottom: -1rem
     position: absolute
-    margin-left: 0.5rem
+    margin-left: 0.25rem
     left: 0
     pointer-events: none
     color: var(--text-p2)
     
   #search-result,.search-no-result
-    margin-top: 2rem
+    margin-top: 1rem
 
 .widget-wrapper:not(:first-child)
   .search-wrapper

package/source/css/_layout/widgets/toc_wiki.styl

@@ -5,7 +5,7 @@
 
 // 其它分页链接
 .widget-wrapper.toc.multi .doc-tree
-  border-radius: $border-block
+  border-radius: $border-bar
   background: var(--block)
   overflow: hidden
   border: 1px solid var(--block-border)

package/source/css/_plugins/swiper.styl

@@ -35,15 +35,22 @@ div.swiper-slide
   max-width: 75%
 
 .swiper-button-prev,.swiper-button-next
-  padding: 1rem 0.5rem
+  padding: 1rem 0.25rem
   margin-top: -2rem !important
-  border-radius: 4px
+  border-radius: 40px
   background: alpha(white, 0.25)
   trans1 background
-  --swiper-theme-color: black !important
+  --swiper-theme-color: var(--text-p0) !important
   &:after
     font-size: 1.2rem !important
     font-weight: 700 !important
+    color: var(--swiper-theme-color)
   &:hover
     background: white !important
     --swiper-theme-color: $color-hover !important
+
+.swiper-button-prev:after
+  transform: translateX(-1px)
+
+.swiper-button-next:after
+  transform: translateX(1px)

package/source/js/main.js

@@ -95,6 +95,13 @@ const init = {
       $("article.md-text :header").each(function (idx, node) {
         segs.push(node)
       });
+      // 定位到激活的目录树（不如pjax体验好）
+      // 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();
@@ -114,7 +121,19 @@ const init = {
           $("#data-toc a.toc-link").removeClass("active")
           var link = "#" + topSeg.attr("id")
           if (link != '#undefined') {
-            $('#data-toc a.toc-link[href="' + encodeURI(link) + '"]').addClass("active")
+            const highlightItem = $('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
+            if (highlightItem.length > 0) {
+              highlightItem.addClass("active")
+              const e0 = document.querySelector('.widgets')
+              const e1 = document.querySelector('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
+              const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 100
+              const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 80
+              if (offsetTop < 0) {
+                e0.scrollBy(0, offsetTop)
+              } else if (offsetBottom > 0) {
+                e0.scrollBy(0, offsetBottom)
+              }
+            }
           } else {
             $('#data-toc a.toc-link:first').addClass("active")
           }
@@ -144,7 +163,7 @@ const init = {
    */
   registerTabsTag: function () {
     // Binding `nav-tabs` & `tab-content` by real time permalink changing.
-    document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
+    document.querySelectorAll('.tabs .nav-tabs .tab').forEach(element => {
       element.addEventListener('click', event => {
         event.preventDefault();
         // Prevent selected tab to select again.
@@ -309,6 +328,9 @@ if (stellar.search.service) {
     stellar.jQuery(() => {
       stellar.loadScript('/js/search/local-search.js', { defer: true }).then(function () {
         var $inputArea = $("input#search-input");
+        if ($inputArea.length == 0) {
+          return;
+        }
         var $resultArea = document.querySelector("div#search-result");
         $inputArea.focus(function() {
           var path = stellar.search[stellar.search.service]?.path || '/search.json';