hexo-theme-stellar 1.42.1 → 1.43.0

package/source/css/_components/widgets/toc.styl

@@ -5,8 +5,8 @@
     &:before
       content: ''
       position absolute
-      top: 6px
-      bottom: 6px
+      top: 8px
+      bottom: 8px
       left: 0
       width: 4px
       background: var(--block)
@@ -16,13 +16,14 @@
     @media screen and (min-width: $device-laptop)
       background: var(--background)
 
-.l_left .widget-wrapper.toc
+[data-ui-surface='glass'] .widget-wrapper.toc,
+[data-ui-surface='card'] .widget-wrapper.toc
   @media screen and (min-width: $device-laptop)
     background: none
 
 // 目录基本样式
 .widget-wrapper.toc .toc
-  --fsp: $fsp2
+  --fs-content: $fs-content-2
   padding: 0
   margin: 0
   position relative
@@ -35,7 +36,7 @@
     --padding-offset: calc(0 - var(--padding))
     padding: 4px var(--padding)
     margin: 0 var(--padding)
-    color: var(--text-p3)
+    color: var(--ui-item-muted)
     display: block
     position relative
     border-radius: $border-bar
@@ -43,18 +44,19 @@
     &.active:before
       content: ''
       position absolute
-      top: 6px
-      bottom: 6px
+      top: 4px
+      bottom: 4px
       left: -8px
       width: 4px
       background: var(--theme)
       border-radius: 4px
     &:hover
-      background: var(--block-border)
-      color: var(--text)
+      background: var(--ui-adapter-bg-hover)
+      box-shadow: var(--ui-adapter-shadow-hover)
+      color: var(--ui-item-title)
     
 // 固定位置
-.l_right .widgets .widget-wrapper.toc
+[data-ui-surface='sidebar'] .widgets .widget-wrapper.toc
   margin-top: 1rem
   position: sticky
   position: -webkit-sticky
@@ -78,22 +80,22 @@
 .widget-wrapper.toc .toc
   .toc-item
     font-weight: 500
-    --fsp: $fsp1
+    --fs-content: $fs-content-1
   .toc-item .toc-item
     font-weight: 400
-    --fsp: $fsp2
+    --fs-content: $fs-content-2
   ol
     padding-left: 0
   .toc-child .toc-link
-    padding-left: 1.5rem
+    padding-left: calc(var(--gap-base) * 1)
   .toc-child .toc-child .toc-link
-    padding-left: 2.5rem
+    padding-left: calc(var(--gap-base) * 2)
   .toc-child .toc-child .toc-child .toc-link
-    padding-left: 3.5rem
+    padding-left: calc(var(--gap-base) * 3)
   .toc-child .toc-child .toc-child .toc-child .toc-link
-    padding-left: 4.5rem
+    padding-left: calc(var(--gap-base) * 4)
   .toc-child .toc-child .toc-child .toc-child .toc-child .toc-link
-    padding-left: 5rem
+    padding-left: calc(var(--gap-base) * 5)
 
 // 高亮样式
 .widget-wrapper.toc .toc a.toc-link.active
@@ -133,9 +135,9 @@
     grid-template-rows: 1fr
     trans1 all
     overflow hidden
-.l_right .widgets .widget-wrapper.toc .widget-header .cap-action:hover
+[data-ui-surface='sidebar'] .widgets .widget-wrapper.toc .widget-header .cap-action:hover
   sidebar-light(var(--bg-a50))
-.l_right .widgets .widget-wrapper.toc.collapse
+[data-ui-surface='sidebar'] .widgets .widget-wrapper.toc.collapse
   .widget-header .cap-action
     sidebar-light(var(--bg-a50))
   .widget-body
@@ -181,7 +183,7 @@
   padding-top: 32px
 
 @media screen and (max-width: $device-laptop)
-  .l_right
+  [data-ui-surface='sidebar']
     blur-effect()
     .widgets
       .widget-wrapper.toc

package/source/css/_components/widgets/widgets.styl

@@ -44,7 +44,8 @@
           fill: var(--text-p2)
         &:hover
           color: var(--accent)
-          sidebar-light(var(--bg-a50))
+          background: var(--ui-item-bg-hover)
+          box-shadow: var(--ui-item-shadow-hover)
           opacity 1
           svg
             fill: var(--accent)
@@ -55,11 +56,22 @@
         margin-top: .5em
         margin-bottom: .5em
         line-height: 1.5
+      >.ui-collection,
+      >.widget-section>.ui-collection
+        min-width: 0
 
 
 .widget-wrapper
   display: block
   margin-top: 32px
+  .widget-section+.widget-section
+    margin-top: 24px
+
+.widget-wrapper.markdown
+  --ui-item-bg: var(--block)
+
+[data-ui-surface='glass'] .widget-wrapper.markdown
+  --ui-item-bg: var(--bg-a10)
 
 .l_left .widgets
   padding-bottom: 64px

package/source/css/_components/wiki-card.styl

@@ -0,0 +1,209 @@
+// Wiki 列表卡片独立组件：不复用文章 Hero 的 .cover 或 cover-overlay()。
+.post-list.wiki
+  display: grid
+  // Nested min() in minmax() is dropped by older WebKit, which leaves only
+  // the grid's implicit single column.
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
+  gap: 1rem
+  .post-card-wrap
+    width: 100%
+    margin: 0
+    border-radius: $border-card-l
+    box-shadow: $boxshadow-card
+  @media screen and (max-width: $device-mobile)
+    grid-template-columns: minmax(0, 1fr)
+
+.post-list.wiki .wiki-card
+  display: block
+  position: relative
+  z-index: 0
+  overflow: hidden
+  border-radius: $border-card-l
+  background: var(--card)
+  --wiki-img-br: 100%
+  --wiki-img-sat: 100%
+  --wiki-blur-sat: 150%
+  --wiki-overlay-color: var(--theme, #4f7cff)
+  // 边框与底部蒙版同源，但额外提高 20 个明度点，悬浮反馈更清晰。
+  --wiki-border-color: var(--theme, #4f7cff)
+  &.no-cover
+    --wiki-border-color: var(--block-border)
+  @supports not (corner-shape: superellipse(1))
+    clip-path: 'inset(0 round %s)' % $border-card-l
+  &:after
+    content: ''
+    position: absolute
+    inset: 0
+    z-index: 3
+    border: 2px solid transparent
+    border-radius: inherit
+    corner-shape: $corner-shape
+    pointer-events: none
+    transition: border-color .2s ease-out
+  &:hover
+    --wiki-img-br: 75%
+    --wiki-img-sat: 120%
+    --wiki-blur-sat: 200%
+    &:after
+      border-color: var(--wiki-border-color)
+    .wiki-card-cover > img
+      transform: scale(1.05)
+    .wiki-card-cover:before
+      transform: translateZ(0) scale(1.05)
+
+.wiki-card-content
+  padding: 0
+
+.wiki-card-cover
+  position: relative
+  min-height: 240px
+  overflow: hidden
+  aspect-ratio: 3 / 4
+  background-image: var(--cover-url)
+  background-size: cover
+  background-position: center
+  // Today 内容层：同图模糊覆盖下半部，主题色从中部开始渐显，到最底部才完全不透明。
+  > img
+    position: absolute
+    inset: 0
+    z-index: 0
+    width: 100%
+    height: 100%
+    object-fit: cover
+    filter: brightness(var(--wiki-img-br)) saturate(var(--wiki-img-sat))
+    transform: translateZ(0)
+    transition: all .2s ease-out, transform 1.5s ease-out
+  &:before
+    content: ''
+    position: absolute
+    inset: 0
+    z-index: 1
+    background-image: var(--cover-url)
+    background-size: cover
+    background-position: center
+    filter: brightness(var(--wiki-img-br)) saturate(var(--wiki-img-sat)) blur(1.5rem) saturate(var(--wiki-blur-sat))
+    mask: linear-gradient(to top, black, rgba(black, .75) 26%, transparent 52%)
+    -webkit-mask: linear-gradient(to top, black, rgba(black, .75) 26%, transparent 52%)
+    transform: translateZ(0)
+    pointer-events: none
+    opacity: 0
+    transition: opacity .2s ease-out, filter .2s ease-out, transform .5s ease-out
+  &:after
+    content: ''
+    position: absolute
+    inset: 0
+    z-index: 1
+    pointer-events: none
+    background-image: linear-gradient(to bottom, transparent 50%, var(--wiki-overlay-color) 100%)
+    opacity: 0
+    transition: opacity .2s ease-out
+  &.no-cover
+    background: var(--card)
+    &:before, &:after
+      display: none
+    &.cover-error > img
+      display: none
+
+.post-list.wiki .wiki-card.cover-loaded .wiki-card-cover:not(.no-cover)
+  &:before, &:after
+    opacity: 1
+
+.wiki-card-info
+  display: flex
+  position: absolute
+  z-index: 2
+  right: 0
+  bottom: 0
+  left: 0
+  flex-direction: column
+  justify-content: flex-end
+  box-sizing: border-box
+  color: var(--text-banner, white)
+  @media screen and (max-width: $device-mobile)
+    .wiki-card-summary
+      padding: .75rem
+
+.wiki-card-cover.no-cover .wiki-card-info
+  color: var(--text)
+  .wiki-meta, .project-subtitle
+    color: var(--text-p2)
+
+.wiki-card-info
+  .wiki-card-summary
+    padding: 1rem
+  .headline
+    margin: .5rem 0
+    font-weight: 700
+    line-height: 1.2
+    color: inherit
+  @media screen and (max-width: $device-mobile)
+    .headline
+      margin: .375rem 0
+  .wiki-meta
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    gap: .5rem 1rem
+    min-height: 1.25rem
+    color: var(--text-banner-theme, inherit)
+    font-size: $fs-13
+    line-height: 1.2
+  .wiki-available
+    display: inline-flex
+    flex-wrap: wrap
+    align-items: center
+    gap: 4px
+  .wiki-available, .wiki-stars
+    svg
+      flex: none
+      width: 1em
+      height: 1em
+      vertical-align: middle
+  .wiki-stars
+    display: none
+    align-items: center
+    gap: 4px
+    &.loaded
+      display: inline-flex
+  .wiki-project
+    display: flex
+    align-items: center
+    gap: 10px
+    margin-top: auto
+    padding: .75rem 1rem 1rem
+    background: rgba(black, .1)
+    line-height: 1.2
+    @media screen and (max-width: $device-mobile)
+      padding: .625rem .75rem .75rem
+  .project-icon
+    display: flex
+    flex: none
+    align-items: center
+    justify-content: center
+    width: 2.5rem
+    height: 2.5rem
+    overflow: hidden
+    border-radius: 30%
+    background: var(--block)
+    color: var(--text-p2)
+    img
+      width: 100%
+      height: 100%
+      object-fit: cover
+    svg
+      width: 1.5rem
+      height: 1.5rem
+  .project-text
+    min-width: 0
+    flex: 1
+  .project-name, .project-subtitle
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+  .project-name
+    font-size: $fs-14
+    font-weight: 600
+  .project-subtitle
+    margin-top: 3px
+    color: var(--text-banner-theme, inherit)
+    font-size: $fs-13

package/source/css/_custom.styl

@@ -8,25 +8,24 @@ $ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
 
 // font size
 $fs-root = convert(hexo-config('style.font-size.root'))
-$fs-15 = .9375rem
-$fs-14 = .875rem
-$fs-13 = .8125rem
-$fs-12 = .75rem
+$fs-15 = 'calc(%s - 1px)' % var(--fs-content-base)
+$fs-14 = 'calc(%s - 2px)' % var(--fs-content-base)
+$fs-13 = 'calc(%s - 3px)' % var(--fs-content-base)
+$fs-12 = 'calc(%s - 4px)' % var(--fs-content-base)
 
-$fs-body = 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'))
 
-$fsh1 = 'calc(%s + 9px)' % $fs-body
-$fsh2 = 'calc(%s + 11px)' % $fs-body
-$fsh3 = 'calc(%s + 7px)' % $fs-body
-$fsh4 = 'calc(%s + 4px)' % $fs-body
-$fsh5 = 'calc(%s + 2px)' % $fs-body
+$fsh1 = 'calc(%s + 9px)' % var(--fs-content-base)
+$fsh2 = 'calc(%s + 11px)' % var(--fs-content-base)
+$fsh3 = 'calc(%s + 7px)' % var(--fs-content-base)
+$fsh4 = 'calc(%s + 4px)' % var(--fs-content-base)
+$fsh5 = 'calc(%s + 2px)' % var(--fs-content-base)
 
-$fsp0 = 'calc(%s - 0px)' % $fs-body
-$fsp1 = 'calc(%s - 1px)' % $fs-body
-$fsp2 = 'calc(%s - 2px)' % $fs-body
-$fsp3 = 'calc(%s - 3px)' % $fs-body
+$fs-content-0 = 'calc(%s - 0px)' % var(--fs-content-base)
+$fs-content-1 = 'calc(%s - 1px)' % var(--fs-content-base)
+$fs-content-2 = 'calc(%s - 2px)' % var(--fs-content-base)
+$fs-content-3 = 'calc(%s - 3px)' % var(--fs-content-base)
 
 // site main
 $site-background-image = hexo-config('style.site.background-image')
@@ -56,11 +55,13 @@ $corner-shape = convert(hexo-config('style.corner-shape'))
 
 // 可以动态变化的属性
 :root
+  --fs-root: $fs-root
+  --fs-content-base: var(--fs-root)
+  --fs-content: var(--fs-content-base)
   --width-main: 720px
-  --fsp: $fs-body
-  --fsh2: 'calc(%s + 11px)' % var(--fsp)
-  --fsh3: 'calc(%s + 7px)' % var(--fsp)
-  --fsh4: 'calc(%s + 4px)' % var(--fsp)
+  --fsh2: 'calc(%s + 11px)' % var(--fs-content)
+  --fsh3: 'calc(%s + 7px)' % var(--fs-content)
+  --fsh4: 'calc(%s + 4px)' % var(--fs-content)
   
   // 侧边栏文字内容宽度
   --side-content-width: 224px
@@ -73,8 +74,8 @@ $corner-shape = convert(hexo-config('style.corner-shape'))
   // 右栏宽度增量（在 --width-sidebar 基础上加宽）
   --rightbar-width-extra: calc(var(--gap-base) * 2)
   
-  --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
-  --gap-p-compact: 'calc(%s * 0.75)' % $fs-body
+  --gap-p: 'calc(%s + 4px)' % var(--fs-content-base) // gap for paragraph
+  --gap-p-compact: 'calc(%s * 0.75)' % var(--fs-content-base)
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --width-main: 780px
@@ -85,6 +86,7 @@ $corner-shape = convert(hexo-config('style.corner-shape'))
   @media screen and (max-width: $device-tablet)
     --side-content-width: 188px
   @media screen and (max-width: $device-mobile-max)
+    --fs-root: 'calc(%s + 2px)' % $fs-root
     --side-content-width: 224px
 
 // shadow

package/source/css/_plugins/lazyload.styl

@@ -18,18 +18,21 @@ img:not([src])
     min-height: 4rem
 
 // 加载占位动画
-img.lazy.loading + .lazy-icon
-  position: absolute
+.lazy-icon
   width: $loadingImageSize
   height: $loadingImageSize
   max-width: 100%
   max-height: 100%
+  // 蒙版上色：SVG 作为 mask（只取形状），颜色由 background-color 提供，
+  // 避免 currentColor 在 SVG-as-image 场景（Safari）退化为黑色
+  background-color: var(--theme)
+  svg-mask-icon(var(--icon-loading, url("https://api.iconify.design/eos-icons:three-dots-loading.svg?color=%231cd0fd")))
+
+img.lazy.loading + .lazy-icon
+  position: absolute
   top: 50%
   left: 50%
   transform: translateX(-50%) translateY(-50%)
-  background-size: contain
-  background-repeat: no-repeat
-  background-position: center
 
 // 加载完成
 img.lazy.loaded + .lazy-icon,

package/source/css/comments/utterances.styl

@@ -2,5 +2,5 @@
   margin: 0 -4px
   width: 'calc(100% + %s)' % 8px
 
-.related-wrap#comments .cmt-body svg.loading
-  top: 62px
+.related-wrap#comments .cmt-body .lazy-icon
+  top: 62px

package/source/css/plugins/mermaid.styl

@@ -7,17 +7,36 @@ pre.mermaid
   justify-content: center;
   font-family: $ff-body
 
-.mermaid span,text
+.mermaid span,
+.mermaid text
   font-family: $ff-body
 
 .mermaid .edgeLabel
   padding: 4px
   background-color: var(--background) !important
+  color: var(--text-p1) !important
+
+.mermaid .edgeLabel text,
+.mermaid .label text,
+.mermaid .nodeLabel,
+.mermaid .cluster-label text,
+.mermaid .cluster-label span
+  fill: var(--text-p1) !important
+  color: var(--text-p1) !important
 
 .mermaid rect.basic.label-container
   stroke: var(--block-border) !important
   fill: var(--block) !important
 
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .node polygon,
+.mermaid .node path,
+.mermaid .cluster rect
+  stroke: var(--block-border) !important
+  fill: var(--block) !important
+
 _dark_mermaid()
   .mermaid
     fill: #ccc !important
@@ -42,21 +61,21 @@ _dark_mermaid()
 
 
   .mermaid .label
-    color: #ccc !important
+    color: var(--text-p1) !important
 
 
   .mermaid .cluster-label text
-    fill: #F9FFFE !important
+    fill: var(--text-p1) !important
 
 
   .mermaid .cluster-label span
-    color: #F9FFFE !important
+    color: var(--text-p1) !important
 
 
   .mermaid .label text,
   .mermaid span
-    fill: #ccc !important
-    color: #ccc !important
+    fill: var(--text-p1) !important
+    color: var(--text-p1) !important
 
 
   .mermaid .node rect,
@@ -64,8 +83,8 @@ _dark_mermaid()
   .mermaid .node ellipse,
   .mermaid .node polygon,
   .mermaid .node path
-    fill: #1f2020 !important
-    stroke: #81B1DB !important
+    fill: var(--block) !important
+    stroke: var(--block-border) !important
 
 
   .mermaid .arrowheadPath
@@ -90,16 +109,16 @@ _dark_mermaid()
 
 
   .mermaid .cluster rect
-    fill: hsl(180, 1.5873015873%, 28.3529411765%) !important
-    stroke: rgba(255, 255, 255, 0.25) !important
+    fill: var(--block) !important
+    stroke: var(--block-border) !important
 
 
   .mermaid .cluster text
-    fill: #F9FFFE !important
+    fill: var(--text-p1) !important
 
 
   .mermaid .cluster span
-    color: #F9FFFE !important
+    color: var(--text-p1) !important
 
 
   .mermaid div.mermaidTooltip

package/source/js/icons.js

@@ -4,7 +4,7 @@
  * 服务端 icon() 对非首屏 SVG 图标输出 <svg class="icon" data-icon="ns:key"> 占位符，
  * 本脚本按命名空间拉取构建期生成的 js/icons/{ns}.json，成功后原位替换为完整内联 SVG，
  * 最终 DOM 与全量内联一致，现有 CSS 钩子（搜索三态、菜单渐变、chat 着色等）不受影响。
- * 首屏关键图标（搜索、菜单、leftbar/rightbar、goback）由模板内联，不经过本脚本。
+ * 首屏关键图标（搜索、菜单、leftbar/rightbar、arrow-left）由模板内联，不经过本脚本。
  */
 (function () {
   'use strict';

package/source/js/main.js

@@ -177,7 +177,7 @@ function rebuildToc(scope) {
     return;
   }
   const ol = document.createElement('ol');
-  ol.className = 'toc';
+  ol.className = 'toc ui-collection-adapter';
   const stack = [];
   headings.forEach(function (h) {
     const id = h.id;
@@ -372,6 +372,56 @@ const init = {
       }
     });
   },
+  wikiCover: () => {
+    document.querySelectorAll('.wiki-cover-terminal').forEach(function (terminal) {
+      const code = terminal.querySelector('pre code');
+      const tabs = terminal.querySelectorAll('[role="tab"]');
+      function renderCodes(value) {
+        const lines = value.split(/\r?\n/).filter(function (line) {
+          return line.trim().length > 0;
+        });
+        terminal.dataset.codes = lines.join('\n');
+        code.innerHTML = '';
+        lines.forEach(function (line) {
+          const row = document.createElement('span');
+          row.textContent = line;
+          code.appendChild(row);
+        });
+      }
+      if (tabs.length > 0) {
+        renderCodes(tabs[0].getAttribute('data-codes') || '');
+      }
+      tabs.forEach(function (tab) {
+        tab.addEventListener('click', function () {
+          tabs.forEach(function (item) {
+            const active = item === tab;
+            item.classList.toggle('active', active);
+            item.setAttribute('aria-selected', active ? 'true' : 'false');
+          });
+          renderCodes(tab.getAttribute('data-codes') || '');
+        });
+      });
+      const copy = terminal.querySelector('.wiki-cover-copy');
+      if (copy) {
+        copy.addEventListener('click', function () {
+          const value = terminal.dataset.codes || '';
+          if (!value || !navigator.clipboard) return;
+          navigator.clipboard.writeText(value).then(function () {
+            hud.toast(copy.getAttribute('data-copy-message') || 'Copied', 2500);
+          }).catch(function () {});
+        });
+      }
+    });
+
+    const galaxyCanvases = document.querySelectorAll('.wiki-cover-background.galaxy canvas');
+    const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduceMotion || galaxyCanvases.length === 0) return;
+    utils.js('/js/plugins/galaxy.js').then(function () {
+      if (stellar.galaxy && typeof stellar.galaxy.mountAll === 'function') {
+        stellar.galaxy.mountAll(galaxyCanvases);
+      }
+    }).catch(function () {});
+  },
   leftbarScroll: () => {
     const container = document.querySelector('.l_left .widgets');
     if (container == null) {
@@ -380,7 +430,7 @@ const init = {
     const PREFIX = 'Stellar.leftbarScroll.';
     const encode = (s) => encodeURIComponent(String(s || ''));
     function scope() {
-      const wikiEl = document.querySelector('.doc-tree[data-wiki]');
+      const wikiEl = document.querySelector('.doc-tree-widget[data-wiki]');
       if (wikiEl != null) {
         return 'wiki:' + encode(wikiEl.getAttribute('data-wiki'));
       }
@@ -409,7 +459,7 @@ const init = {
         return;
       }
       container.scrollTop = parseInt(value, 10) || 0;
-      const link = container.querySelector('a.link.active');
+      const link = container.querySelector('.ui-collection__item.is-active');
       if (link == null) {
         return;
       }
@@ -426,22 +476,27 @@ const init = {
     } catch (e) {}
   },
   navbarPin: () => {
-    // 列表页 navbar top 背景条状态切换：未吸顶为卡片样式（var(--card) + 文章卡片同款阴影），
-    // 吸顶后恢复玻璃效果。在吸顶边界切换 .pinned 类，视觉由 CSS 控制。
+    // 列表页 navbar top 背景条状态切换：未滚动/未吸顶为卡片样式（var(--card) + 文章卡片同款阴影），
+    // 页面滚动达到阈值且吸顶后恢复玻璃效果。在吸顶边界切换 .pinned 类，视觉由 CSS 控制。
     // 吸顶判定直接测 navbar 的实际视口位置，而非用 scrollY 推算：
     // 移动端浏览器顶栏伸缩会改变 scrollY（展开顶栏时 scrollY 减小），
     // 即使 navbar 仍吸顶也可能跌破阈值，导致玻璃效果误消失。
+    // 无轮播区页面（如 wiki）的 navbar 在页面顶部即已吸顶，需额外要求页面实际滚动达到阈值，
+    // 否则默认保持卡片样式；回到顶部（滚动小于阈值）恢复卡片。
     const navbars = document.querySelectorAll('.navbar.top');
     if (navbars.length === 0) {
       return;
     }
     // 视口顶部允许的偏差（px），吸收亚像素/取整误差
     const TOLERANCE = 2;
+    // 页面滚动阈值（px）：未滚动时保持卡片样式，滚动达到该值后才切换玻璃效果
+    const SCROLL_THRESHOLD = 2;
     let states = [];
     function update() {
+      const scrolled = window.scrollY >= SCROLL_THRESHOLD;
       states.forEach((state) => {
         const top = state.navbar.getBoundingClientRect().top;
-        state.bar.classList.toggle('pinned', top <= state.stickyTop + TOLERANCE);
+        state.bar.classList.toggle('pinned', scrolled && top <= state.stickyTop + TOLERANCE);
       });
     }
     function measure() {
@@ -621,6 +676,7 @@ stellar.initPage = function () {
   init.toc();
   init.sidebar();
   init.wikiStart();
+  init.wikiCover();
   init.leftbarScroll();
   init.navbarPin();
   init.relativeDate(document.querySelectorAll('#post-meta time'));