fix(toc): fixed an empty toc error

This commit is contained in:
XPoet 2022-10-11 12:42:11 +08:00
parent e7ed06748e
commit 3361fd4c99
6 changed files with 20 additions and 19 deletions

View File

@ -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")

View File

@ -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)

View File

@ -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)
}
}
}

View File

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

View File

@ -2,8 +2,8 @@
function initTOC() {
const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li')
const postPageContainerDom = document.querySelectorAll('.post-page-container')
const tocContentContainer = document.querySelectorAll('.toc-content-container')
const postPageContainerDom = document.querySelector('.post-page-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)
}
}
}

View File

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