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

feature:

Browse Source 
简化层级
This commit is contained in:
tangly
2021-12-04 16:39:45 +08:00
parent 79cf4d6fea
commit bca62365d3
7 changed files with 34 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/DarkModeButton.js
View File

@@ -12,7 +12,7 @@ const DarkModeButton = () => {
changeTheme(newTheme)
}
return <div className='z-10 duration-200 text-xl cursor-pointer'>
<FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='fa mx-2.5 my-2 hover:scale-125 transform duration-200'
<FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='mx-2 my-2 hover:scale-125 transform duration-200'
onClick={handleChangeDarkMode} />
</div>
}

2
components/JumpToTopButton.js
View File

@@ -41,7 +41,7 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
<div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowUp} />
</div>
{showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent} </div>)}
{showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
</div>
</div>
</div>)

14
components/SideBar.js
View File

@@ -26,20 +26,16 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
const { locale } = useGlobal()
return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
<section>
<InfoCard />
</section>
<InfoCard />
<div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>
<section>
{/* <hr className='dark:border-gray-700' /> */}
<MenuButtonGroup allowCollapse={true} />
<section className='p-5'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch} />
</section>
<hr className='dark:border-gray-700' />
</section>
{/* 最新文章 */}
{posts && (
@@ -85,17 +81,15 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
</div>
{post && (
<section id='left-toc' className='sticky top-0 bg-white dark:bg-gray-800'>
<div
className='border-b text-2xl bg-white font-bold text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
<section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-800'>
<div className='border-b text-2xl bg-white font-bold text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<Toc toc={post.toc} />
</section>
)}
<section id='blank' className='bg-white dark:bg-gray-900 py-20' />
{/* <section id='blank' className='bg-white dark:bg-gray-900 py-20' /> */}
</aside>
}

6
components/SideBarDrawer.js
View File

@@ -18,14 +18,14 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
const switchSideDrawerVisible = () => {
changeHiddenStatus(!isHidden)
}
return <div>
return <>
<div className={(isHidden ? '-ml-72' : 'shadow-2xl') + ' flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'}>
<SideBar tags={tags} post={post} posts={posts} categories={categories} currentCategory={currentCategory} />
</div>
{/* 背景蒙版 */}
<div id='drawer-background'
<div id='sidebar-drawer-background'
className={(isHidden ? 'hidden' : 'block') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'}
onClick={switchSideDrawerVisible} />
</div>
</>
}
export default SideBarDrawer

10
components/TopNav.js
View File

@@ -1,14 +1,14 @@
import { useRef } from 'react'
import DarkModeButton from '@/components/DarkModeButton'
import SearchInput from '@/components/SearchInput'
import SideBarDrawer from '@/components/SideBarDrawer'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars } from '@fortawesome/free-solid-svg-icons'
import BLOG from '@/blog.config'
const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, currentCategory }) => {
const drawer = useRef()
return (<>
return (<div id='top-nav' className='block lg:hidden'>
{/* 侧面抽屉 */}
<SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
@@ -18,7 +18,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
{/* 左侧LOGO */}
<div className='flex ml-12'>
<div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
className='fixed top-3 left-0 z-30 py-1 px-5 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
className='fixed top-3 left-0 z-30 ml-5 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
<FontAwesomeIcon icon={faBars} className='hover:scale-125 transform duration-200'
/>
</div>
@@ -26,7 +26,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
{/* 中间搜索框 */}
<div className='w-96'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch}/>
<span className='text-lg dark:text-gray-200'>{BLOG.title}</span> | <span className='dark:text-gray-300'>{BLOG.description}</span>
</div>
{/* 右侧功能 */}
@@ -36,7 +36,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
</div>
</div>
</>)
</div>)
}
export default TopNav

20
layouts/BaseLayout.js
View File

@@ -69,27 +69,25 @@ const BaseLayout = ({
<CommonHead meta={meta} />
{/* 顶部导航栏 */}
<div className='block lg:hidden'>
<TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories}
currentCategory={currentCategory} />
</div>
<TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories} currentCategory={currentCategory} />
{/* Middle Wrapper */}
<main className='flex dark:bg-black'>
<div className='flex dark:bg-black'>
<div className='hidden lg:block z-10'>
<SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
</div>
<div className='flex flex-grow' ref={targetRef}>
{children}
</div>
<JumpToTopButton targetRef={targetRef} showPercent={true} />
<div className='hidden lg:block fixed right-1 bottom-52 p-1
bg-white text-black shadow-card dark:border-gray-500 dark:bg-gray-700 dark:text-white'>
<DarkModeButton />
</div>
</main>
</div>
<Footer />
<JumpToTopButton targetRef={targetRef} showPercent={true} />
<div className='hidden lg:block fixed right-1 bottom-52 py-1 px-1.5
bg-white text-black shadow-card dark:border-gray-500 dark:bg-gray-700 dark:text-white'>
<DarkModeButton />
</div>
</div>
)
}

22
pages/article/[slug].js
View File

@@ -51,20 +51,20 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={allPosts} categories={categories}>
<Progress targetRef={targetRef} />
<article id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black pt-16 bg-gray-200'>
<div id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black bg-gray-200'>
<div className='max-w-5xl mx-auto'>
<div className='w-screen md:w-full pt-10 '>
{post.type && !post.type.includes('Page') && (<div className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0'>
<div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full '>
{post.type && !post.type.includes('Page') && (<>
<header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0'>
<Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='lazy' objectFit='cover' layout='fill' alt={post.title} />
</div>)}
</div>
</header>
</>)}
<div className='animate__fadeIn animate__animated subpixel-antialiased w-screen md:w-full lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
<article className='animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
{/* 文章Title */}
<h1 className='font-bold text-3xl pt-5 text-black dark:text-white italic'> {post.title}</h1>
<hr className='mt-4' />
<div className='flex-nowrap flex mt-1 dark:text-white'>
<section className='flex-nowrap flex mt-1 dark:text-white'>
<Link href={`/category/${post.category}`} passHref>
<div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
<FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
@@ -86,7 +86,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
<FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2' />
&nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 leading-6'></span>
</div>
</div>
</section>
{/* Notion文章主体 */}
{blockMap && (
@@ -127,7 +127,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
</div>
</section>
</div>
</article>
<div className='w-screen md:w-full px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
<div className='py-10'>
@@ -154,7 +154,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
<Comment frontMatter={post} />
</div>
</div>
</article>
</div>
{/* 悬浮目录按钮 */}
<div className='block lg:hidden'>