修复「网址#标题」URL定位被导航栏遮盖的问题

_config.yml

@@ -4,8 +4,8 @@ info:
   version: '2.1.3'
   docs: https://volantis.js.org/
   cdn: # To use CDN, write 'use_cdn: true' in 'blog/_config.yml'.
-    css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.1.3/css/style.css
-    js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.1.3/js/app.js
+    # css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.1.3/css/style.css
+    # js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.1.3/js/app.js
 
 
 ############################### Style ###############################
@@ -28,9 +28,9 @@ style:
       h4: left
       p: justify
   gap:
-    h2: 2.5em # Spacing above H2
-    h3: 1.5em # Spacing above H3
-    h4: 1em # Spacing above H4
+    h2: 48px # Spacing above H2 (only px unit)
+    h3: 32px # Spacing above H3 (only px unit)
+    h4: 16px # Spacing above H4 (only px unit)
     line: 1rem # Paragraph spacing
     inline: .5rem # Paragraph spacing within a block
   border_radius:

source/css/_defines/layout.styl

@@ -18,9 +18,9 @@ $navbar-height = convert(hexo-config('style.navbar.height')) || 64px
 
 // gap
 $gap = convert(hexo-config('style.gap.base')) || 16px
-$gap-h2 = convert(hexo-config('style.gap.h2')) || 2.5em
-$gap-h3 = convert(hexo-config('style.gap.h3')) || 1.5em
-$gap-h4 = convert(hexo-config('style.gap.h4')) || 1em
+$gap-h2 = convert(hexo-config('style.gap.h2')) || 48px
+$gap-h3 = convert(hexo-config('style.gap.h3')) || 32px
+$gap-h4 = convert(hexo-config('style.gap.h4')) || 16px
 $gap-line = convert(hexo-config('style.gap.line')) || 1rem      // 段落间距
 $gap-inline = convert(hexo-config('style.gap.inline')) || .5rem   // 块内行间距
 $gap-card = $gap

source/css/_layout/article.styl

@@ -96,6 +96,11 @@
 
   h1,h2,h3,h4,h5,h6
     position: relative
+    &:before
+      content: ''
+      display: block
+      height: $navbar-height + 2 * $gap
+      margin-top: 0 - $navbar-height - 2 * $gap
     &:first-child
       margin-top: 0
       padding-top: 0
@@ -104,7 +109,8 @@
       &:before
         content: none
   h1,h2
-    margin-top: $gap-h2
+    &:before
+      margin-top: $gap-h2 - $navbar-height - 2 * $gap
     padding-bottom: .2em
     border-bottom: 1px solid alpha($color-text, 10%)
   h1
@@ -114,11 +120,13 @@
     text-align: $textalign-h2
     color: $color-h2
   h3
-    margin-top: $gap-h3
+    &:before
+      margin-top: $gap-h3 - $navbar-height - 2 * $gap
     text-align: $textalign-h3
     color: $color-h3
   h4
-    padding-top:$gap-h4
+    &:before
+      margin-top: $gap-h4 - $navbar-height - 2 * $gap
     text-align: $textalign-h4
     margin-bottom: $gap-line
     color: $color-h4

source/js/app.js

@@ -228,9 +228,9 @@ var customSearch;
 			e.preventDefault();
 			e.stopPropagation();
 			if (e.target.tagName === 'A') {
-				scrolltoElement(e.target);
+				scrolltoElement(e.target, 0);
 			} else if (e.target.tagName === 'SPAN') {
-				scrolltoElement(e.target.parentElement);
+				scrolltoElement(e.target.parentElement, 0);
 			}
 			$toc.removeClass('active');
 			const $tocBtn = $('.s-toc');