Merge pull request #2348 from Femoon/fix/page_refresh_catalog_miss

fix: medium theme page refresh causing the catalog loss
This commit is contained in:
tangly1024
2024-04-29 10:28:11 +08:00
committed by GitHub
2 changed files with 18 additions and 10 deletions

View File

@@ -4,7 +4,7 @@ import JumpToTopButton from './JumpToTopButton'
export default function BottomMenuBar ({ post, className }) { export default function BottomMenuBar ({ post, className }) {
const { tocVisible, changeTocVisible } = useMediumGlobal() const { tocVisible, changeTocVisible } = useMediumGlobal()
const showTocBotton = post?.toc?.length > 0 const showTocButton = post?.toc?.length > 0
const toggleToc = () => { const toggleToc = () => {
changeTocVisible(!tocVisible) changeTocVisible(!tocVisible)
@@ -18,13 +18,13 @@ export default function BottomMenuBar ({ post, className }) {
<i className='fas fa-search'/> <i className='fas fa-search'/>
</div> </div>
</Link> </Link>
<div className='flex w-full items-center justify-center cursor-pointer'> <div className='flex w-full items-center justify-center cursor-pointer z-20'>
<JumpToTopButton/> <JumpToTopButton/>
</div> </div>
{showTocBotton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer'> {showTocButton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer z-30'>
<i className='fas fa-list-ol ' /> <i className='fas fa-list-ol ' />
</div>} </div>}
{ !showTocBotton && <Link href='/' passHref legacyBehavior> { !showTocButton && <Link href='/' passHref legacyBehavior>
<div className='flex w-full items-center justify-center cursor-pointer'> <div className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-home' /> <i className='fas fa-home' />
</div> </div>

View File

@@ -51,12 +51,20 @@ const LayoutBase = props => {
const router = useRouter() const router = useRouter()
const [tocVisible, changeTocVisible] = useState(false) const [tocVisible, changeTocVisible] = useState(false)
const { onLoading, fullWidth } = useGlobal() const { onLoading, fullWidth } = useGlobal()
const [slotRight, setSlotRight] = useState(null);
useEffect(()=> {
if (post?.toc?.length > 0) {
setSlotRight(
<div key={locale.COMMON.TABLE_OF_CONTENTS}>
<Catalog toc={post?.toc} />
</div>
);
} else {
setSlotRight(null);
}
},[post])
const slotRight = post?.toc?.length > 0 && (
<div key={locale.COMMON.TABLE_OF_CONTENTS} >
<Catalog toc={post?.toc} />
</div>
)
const slotTop = <BlogPostBar {...props} /> const slotTop = <BlogPostBar {...props} />
return ( return (
@@ -178,7 +186,7 @@ const LayoutSlug = props => {
}, [post]) }, [post])
return ( return (
<div showInfoCard={true} slotRight={slotRight} {...props} > <div {...props} >
{/* 文章锁 */} {/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />} {lock && <ArticleLock validPassword={validPassword} />}