d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

medium主题微调

Browse Source
This commit is contained in:
tangly1024.com
2024-09-12 19:14:41 +08:00
parent 8e2b1c06ac
commit d31acf80b3
2 changed files with 53 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
themes/medium/components/BottomMenuBar.js
View File

@@ -1,8 +1,8 @@
import Link from 'next/link'
import { useMediumGlobal } from '@/themes/medium'
import { useMediumGlobal } from '..'
import JumpToTopButton from './JumpToTopButton'
export default function BottomMenuBar ({ post, className }) {
export default function BottomMenuBar({ post, className }) {
const { tocVisible, changeTocVisible } = useMediumGlobal()
const showTocButton = post?.toc?.length > 0
@@ -11,24 +11,34 @@ export default function BottomMenuBar ({ post, className }) {
}
return (
<div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
<div
className={
'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' +
className
}>
<div className='flex justify-between h-full shadow-card'>
<Link href='/search' passHref legacyBehavior>
<div className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-search'/>
<i className='fas fa-search' />
</div>
</Link>
<div className='flex w-full items-center justify-center cursor-pointer z-20'>
<JumpToTopButton/>
<JumpToTopButton />
</div>
{showTocButton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer z-30'>
<i className='fas fa-list-ol ' />
</div>}
{ !showTocButton && <Link href='/' passHref legacyBehavior>
<div className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-home' />
{showTocButton && (
<div
onClick={toggleToc}
className='flex w-full items-center justify-center cursor-pointer z-30'>
<i className='fas fa-list-ol ' />
</div>
</Link>}
)}
{!showTocButton && (
<Link href='/' passHref legacyBehavior>
<div className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-home' />
</div>
</Link>
)}
</div>
</div>
)

48
themes/medium/components/TocDrawer.js
View File

@@ -1,5 +1,5 @@
import { useMediumGlobal } from '..'
import Catalog from './Catalog'
import { useMediumGlobal } from '@/themes/medium'
/**
* 悬浮抽屉目录
@@ -13,22 +13,36 @@ const TocDrawer = ({ post, cRef }) => {
const switchVisible = () => {
changeTocVisible(!tocVisible)
}
return <>
<div id='medium-toc-float' className='fixed top-0 right-0 z-40'>
{/* 侧边菜单 */}
<div
className={(tocVisible ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-gray-600'}>
{post && <>
<div className='dark:text-gray-400 text-gray-600 h-56'>
<Catalog toc={post.toc}/>
</div>
</>}
return (
<>
<div id='medium-toc-float' className='fixed top-0 right-0 z-40'>
{/* 侧边菜单 */}
<div
className={
(tocVisible
? 'animate__slideInRight '
: ' -mr-72 animate__slideOutRight') +
' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-gray-600'
}>
{post && (
<>
<div className='dark:text-gray-400 text-gray-600 h-56'>
<Catalog toc={post.toc} />
</div>
</>
)}
</div>
</div>
</div>
{/* 背景蒙版 */}
<div id='right-drawer-background' className={(tocVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
onClick={switchVisible} />
</>
{/* 背景蒙版 */}
<div
id='right-drawer-background'
className={
(tocVisible ? 'block' : 'hidden') +
' fixed top-0 left-0 z-30 w-full h-full'
}
onClick={switchVisible}
/>
</>
)
}
export default TocDrawer