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 }) {
const { tocVisible, changeTocVisible } = useMediumGlobal()
const showTocBotton = post?.toc?.length > 0
const showTocButton = post?.toc?.length > 0
const toggleToc = () => {
changeTocVisible(!tocVisible)
@@ -18,13 +18,13 @@ export default function BottomMenuBar ({ post, className }) {
<i className='fas fa-search'/>
</div>
</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/>
</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 ' />
</div>}
{ !showTocBotton && <Link href='/' passHref legacyBehavior>
{ !showTocButton && <Link href='/' passHref legacyBehavior>
<div className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-home' />
</div>

View File

@@ -51,12 +51,20 @@ const LayoutBase = props => {
const router = useRouter()
const [tocVisible, changeTocVisible] = useState(false)
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} />
return (
@@ -178,7 +186,7 @@ const LayoutSlug = props => {
}, [post])
return (
<div showInfoCard={true} slotRight={slotRight} {...props} >
<div {...props} >
{/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />}