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

gitbook 布局交互优化

Browse Source
This commit is contained in:
tangly1024.com
2024-06-03 18:02:23 +08:00
parent 1f5b77406a
commit 71106860bd
14 changed files with 195 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
themes/gitbook/components/CatalogDrawerWrapper.js Normal file
View File

@@ -0,0 +1,60 @@
import { useGlobal } from '@/lib/global'
import { useGitBookGlobal } from '@/themes/gitbook'
import Catalog from './Catalog'
/**
* 悬浮抽屉目录
* @param toc
* @param post
* @returns {JSX.Element}
* @constructor
*/
const CatalogDrawerWrapper = ({ post, cRef }) => {
const { tocVisible, changeTocVisible } = useGitBookGlobal()
const { locale } = useGlobal()
const switchVisible = () => {
changeTocVisible(!tocVisible)
}
return (
<>
<div
id='gitbook-toc-float'
className='fixed top-0 right-0 z-40 md:hidden'>
{/* 侧边菜单 */}
<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-hexo-black-gray'
}>
{post && (
<>
<div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
<span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
<i
className='fas fa-times p-1 cursor-pointer'
onClick={() => {
changeTocVisible(false)
}}></i>
</div>
<div className='dark:text-gray-400 text-gray-600 px-3'>
<Catalog post={post} />
</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}
/>
</>
)
}
export default CatalogDrawerWrapper

25
themes/gitbook/components/FloatTocButton.js
View File

@@ -1,25 +0,0 @@
import { useGitBookGlobal } from '@/themes/gitbook'
/**
* 移动端悬浮目录按钮
*/
export default function FloatTocButton () {
const { tocVisible, changeTocVisible } = useGitBookGlobal()
const toggleToc = () => {
changeTocVisible(!tocVisible)
}
return (
<div
onClick={toggleToc}
className={ 'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
}
>
<a
id="toc-button"
className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
/>
</div>
)
}

2
themes/gitbook/components/Header.js
View File

@@ -90,7 +90,7 @@ export default function Header(props) {
{isOpen ? (
<i className='fas fa-times' />
) : (
<i className='fa-solid fa-ellipsis-vertical' />
<i className='fa-solid fa-bars' />
)}
</div>
</div>

24
themes/gitbook/components/JumpToTopButton.js
View File

@@ -1,4 +1,3 @@
/**
* 跳转到网页顶部
* 当屏幕下滑500像素后会出现该控件
@@ -9,15 +8,20 @@
*/
const JumpToTopButton = ({ showPercent = false, percent, className }) => {
return (
<div
id="jump-to-top"
data-aos="fade-up"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchor-placement="top-center"
className='fixed xl:right-80 right-2 mr-10 bottom-24 z-20'>
<i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
</div>
<div
id='jump-to-top'
data-aos='fade-up'
data-aos-duration='300'
data-aos-once='false'
data-aos-anchor-placement='top-center'
className='fixed xl:right-80 right-2 bottom-24 z-20'>
<i
className='shadow fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
onClick={() => {
window.scrollTo({ top: 0, behavior: 'smooth' })
}}
/>
</div>
)
}

12
themes/gitbook/components/LogoBar.js
View File

@@ -1,6 +1,5 @@
import LazyImage from '@/components/LazyImage'
import { siteConfig } from '@/lib/config'
import { useGitBookGlobal } from '@/themes/gitbook'
import Link from 'next/link'
import CONFIG from '../config'
@@ -11,19 +10,8 @@ import CONFIG from '../config'
*/
export default function LogoBar(props) {
const { siteInfo } = props
const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
const togglePageNavVisible = () => {
changePageNavVisible(!pageNavVisible)
}
return (
<div id='top-wrapper' className='w-full flex items-center'>
<div
onClick={togglePageNavVisible}
className='cursor-pointer md:hidden text-xl pr-3 hover:scale-110 duration-150'>
<i
className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
</div>
<Link
href={`/${siteConfig('GITBOOK_INDEX_PAGE', '', CONFIG)}`}
className='flex text-md md:text-xl dark:text-gray-200'>

27
themes/gitbook/components/MobileButtonCatalog.js Normal file
View File

@@ -0,0 +1,27 @@
import { useGitBookGlobal } from '@/themes/gitbook'
/**
* 移动端目录按钮
*/
export default function MobileButtonCatalog() {
const { tocVisible, changeTocVisible } = useGitBookGlobal()
const toggleToc = () => {
changeTocVisible(!tocVisible)
}
return (
<div
onClick={toggleToc}
className={
'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
}>
<a
id='toc-button'
className={
'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'
}
/>
</div>
)
}

27
themes/gitbook/components/MobileButtonPageNav.js Normal file
View File

@@ -0,0 +1,27 @@
import { useGitBookGlobal } from '@/themes/gitbook'
/**
* 移动端文章导航按钮
*/
export default function MobileButtonPageNav() {
const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
const togglePageNavVisible = () => {
changePageNavVisible(!pageNavVisible)
}
return (
<div
onClick={togglePageNavVisible}
className={
'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
}>
<a
id='toc-button'
className={
'fa-book cursor-pointer fas hover:scale-150 transform duration-200'
}
/>
</div>
)
}

12
themes/gitbook/components/PageNavDrawer.js
View File

@@ -1,3 +1,4 @@
import { useGlobal } from '@/lib/global'
import { useGitBookGlobal } from '@/themes/gitbook'
import NavPostList from './NavPostList'
@@ -11,6 +12,7 @@ import NavPostList from './NavPostList'
const PageNavDrawer = props => {
const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
const { filteredNavPages } = props
const { locale } = useGlobal()
const switchVisible = () => {
changePageNavVisible(!pageNavVisible)
@@ -24,7 +26,15 @@ const PageNavDrawer = props => {
{/* 侧边菜单 */}
<div
className={`${pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft'}
overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
<div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
<span>{locale.COMMON.ARTICLE}</span>
<i
className='fas fa-times p-1 cursor-pointer'
onClick={() => {
changePageNavVisible(false)
}}></i>
</div>
{/* 所有文章列表 */}
<div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
<NavPostList filteredNavPages={filteredNavPages} />

34
themes/gitbook/components/TocDrawer.js
View File

@@ -1,34 +0,0 @@
import { useGitBookGlobal } from '@/themes/gitbook'
import Catalog from './Catalog'
/**
* 悬浮抽屉目录
* @param toc
* @param post
* @returns {JSX.Element}
* @constructor
*/
const TocDrawer = ({ post, cRef }) => {
const { tocVisible, changeTocVisible } = useGitBookGlobal()
const switchVisible = () => {
changeTocVisible(!tocVisible)
}
return <>
<div id='gitbook-toc-float' className='fixed top-0 right-0 z-40 md:hidden'>
{/* 侧边菜单 */}
<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-hexo-black-gray'}>
{post && <>
<div className='dark:text-gray-400 text-gray-600 h-96 p-3'>
<Catalog post={post}/>
</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} />
</>
}
export default TocDrawer