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 { .copy {
position absolute position absolute
right 0.5rem
top 3rem top 3rem
right 0.5rem
padding 0 0.1rem padding 0 0.1rem
opacity 0 opacity 0
transition-t("opacity", "0", "0.2", "ease-in-out") transition-t("opacity", "0", "0.2", "ease-in-out")

View File

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

View File

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

View File

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

View File

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