fix(toc): fixed an empty toc error

source/css/common/code-block/code-block-tools.styl

@@ -105,8 +105,8 @@
 
       .copy {
         position absolute
-        right 0.5rem
         top 3rem
+        right 0.5rem
         padding 0 0.1rem
         opacity 0
         transition-t("opacity", "0", "0.2", "ease-in-out")

source/css/layout/_partial/toc.styl

@@ -3,8 +3,8 @@
   box-sizing border-box
   width 100%
   height 100%
-  font-size 0.92rem
   overflow-y auto
+  font-size 0.92rem
 
   &::-webkit-scrollbar-thumb {
     background rgba(100, 100, 100, 0.1)

source/css/layout/article-content.styl

@@ -7,11 +7,11 @@ $toc-container-width = 16rem
 
 .post-page-container {
   position relative
-  width 100%
-  height 100%
-  box-sizing border-box
   display flex
   justify-content space-between
+  box-sizing border-box
+  width 100%
+  height 100%
 
 
   &.show-toc {
@@ -38,9 +38,9 @@ $toc-container-width = 16rem
 
   .article-content-container {
     position relative
+    box-sizing border-box
     width 100%
     height 100%
-    box-sizing border-box
     keep-container(false, 0, 0, 2rem, 2rem)
 
     +keep-mobile() {
@@ -262,10 +262,10 @@ $toc-container-width = 16rem
   .toc-content-container {
     position sticky
     top $header-height + $component-spacing-value
+    display none
+    box-sizing border-box
     width $toc-container-width
     max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
-    box-sizing border-box
-    display none
     padding-left 2rem
     transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
 
@@ -274,6 +274,5 @@ $toc-container-width = 16rem
       max-height 'calc(100vh - %s)' % ($header-shrink-height + $component-spacing-value)
     }
   }
-
 }
 

source/css/layout/page.styl

@@ -11,8 +11,8 @@
 
 
   .page-main-content {
-    box-sizing border-box
     position relative
+    box-sizing border-box
     padding-top $header-height
 
     &.home {

source/js/toc.js

@@ -2,8 +2,8 @@
 
 function initTOC() {
   const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li')
-  const postPageContainerDom = document.querySelectorAll('.post-page-container')
+  const postPageContainerDom = document.querySelector('.post-page-container')
-  const tocContentContainer = document.querySelectorAll('.toc-content-container')
+  const tocContentContainer = document.querySelector('.toc-content-container')
 
   if (tocNavDoms.length > 0) {
     KEEP.utils = {
@@ -101,7 +101,9 @@ function initTOC() {
     KEEP.utils.handleShowWhenHasToc()
     KEEP.utils.registerSidebarTOC()
   } else {
-    tocContentContainer && postPageContainerDom.removeChild(tocContentContainer)
+    if (tocContentContainer && postPageContainerDom) {
+      postPageContainerDom.removeChild(tocContentContainer)
+    }
   }
 }
 

source/js/toggle-show-toc.js

@@ -9,12 +9,12 @@ function initToggleShowToc() {
 
     initToggle() {
       this.toggleShowTocBtnDom &&
-      this.toggleShowTocBtnDom.addEventListener('click', () => {
+        this.toggleShowTocBtnDom.addEventListener('click', () => {
-        this.isShowToc = !this.isShowToc
+          this.isShowToc = !this.isShowToc
-        KEEP.styleStatus.isShowToc = this.isShowToc
+          KEEP.styleStatus.isShowToc = this.isShowToc
-        KEEP.setStyleStatus()
+          KEEP.setStyleStatus()
-        this.handleToggle(this.isShowToc)
+          this.handleToggle(this.isShowToc)
-      })
+        })
     },
 
     handleToggle(isOpen) {