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

🐻 简化层级，减少DOM

Browse Source
This commit is contained in:
tangly1024
2021-09-29 14:59:27 +08:00
parent 791af3a1af
commit 5012d6d9a2
9 changed files with 42 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/CommonHead.js
View File

@@ -7,6 +7,7 @@ const CommonHead = ({ meta }) => {
return <Head>
<title>{meta.title}</title>
<meta content={BLOG.darkBackground} name='theme-color' />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name='robots' content='follow, index' />
<meta charSet='UTF-8' />
{BLOG.seo.googleSiteVerification && (

13
components/Footer.js
View File

@@ -7,25 +7,20 @@ const Footer = ({ fullWidth = true }) => {
const from = +BLOG.since
return (
<footer
className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400'
className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 text-sm text-gray-400'
>
<div className='text-sm text-gray-400'>
<hr className='py-2'/>
<span className='fa fa-shield leading-6'><a href='https://beian.miit.gov.cn/'
className='ml-1'>闽ICP备20010331号</a></span>
<span className='fa fa-shield leading-6'> <a href='https://beian.miit.gov.cn/' className='ml-1'>闽ICP备20010331号</a></span>
<br />
<span className='fa fa-copyright leading-6'> {from === y || !from ? y : `${from} - ${y}`} {BLOG.author} </span>
<br />
<span id='busuanzi_container_site_pv' className='hidden'>
<a href='https://www.cnzz.com/stat/website.php?web_id=1279970751' target='_blank'
id='busuanzi_container_site_pv'
<a id='busuanzi_container_site_pv' href='https://www.cnzz.com/stat/website.php?web_id=1279970751' target='_blank'
className='fa fa-user' rel='noreferrer'> pv <span id='busuanzi_value_site_pv'></span></a>
</span>
<span id='busuanzi_container_site_uv' className='hidden'><span className='s'> | </span>
<a href='http://tongji.baidu.com/web/10000363165/overview/index?siteId=16809429' target='_blank'
className='fa fa-eye' rel='noreferrer'> uv <span id='busuanzi_value_site_uv'></span></a>
<a href='http://tongji.baidu.com/web/10000363165/overview/index?siteId=16809429' target='_blank' className='fa fa-eye' rel='noreferrer'> uv <span id='busuanzi_value_site_uv'></span></a>
</span>
</div>
</footer>
)
}

10
components/Progress.js
View File

@@ -21,15 +21,9 @@ const Progress = ({ targetRef }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
return (
<>
{/* 顶部进度条 */}
<div className='h-1.5 fixed top-0 w-full shadow-2xl z-40'>
return (<div className='h-1.5 fixed top-0 w-full shadow-2xl z-40'>
<div className='h-1 bg-blue-500 fixed top-0 w-1 duration-200' style={{ width: `${percent}%` }}/>
{/* <div className='debug'>{percent}</div> */}
</div>
</>
)
</div>)
}
export default Progress

12
components/RewardButton.js
View File

@@ -32,10 +32,8 @@ const RewardButton = () => {
<div
ref={btnRef}
className='bg-red-500 text-white hover:bg-green-400 hover:shadow-2xl duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
<div>
<span className='fa fa-qrcode mr-2' />
<span>打赏</span>
</div>
</div>
</div>
@@ -46,15 +44,13 @@ const RewardButton = () => {
}
ref={popoverRef}
>
<div>
<div
className='border animate__animated animate__fadeIn hover:shadow-2xl duration-200 my-5 px-5 py-6 w-96 grid justify-center bg-white dark:bg-black dark:text-gray-200'>
<div
className='border animate__animated animate__fadeIn hover:shadow-2xl duration-200 my-5 px-5 py-6 w-96 grid justify-center bg-white dark:bg-black dark:text-gray-200'>
<span>
<img className='md:w-72 m-auto' src='/reward_code.jpg' />
</span>
<br />
<span className='text-center text-gray-500'>微信赞赏码或支付宝tlyong@126.com赞助</span>
</div>
<br />
<span className='text-center text-gray-500'>微信赞赏码或支付宝tlyong@126.com赞助</span>
</div>
</div>
</div>

11
components/SideBar.js
View File

@@ -41,8 +41,7 @@ const SideBar = ({ tags, currentTag, toc }) => {
return <aside className='z-10'>
<div
className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
<div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
{/* Logo */}
<section className='mx-5 pt-6 pb-2'>
@@ -90,10 +89,8 @@ const SideBar = ({ tags, currentTag, toc }) => {
</nav>
{/* 标签云 */}
<section className=''>
<div>
<section>
<strong className='text-xl text-gray-600 dark:text-gray-400'>标签</strong>
</div>
<Tags tags={tags} currentTag={currentTag} />
</section>
@@ -119,9 +116,9 @@ const SideBar = ({ tags, currentTag, toc }) => {
{/* 顶部菜单按钮 */}
<div
className={(collapse ? 'left-0' : 'left-72') + ' fixed flex flex-nowrap md:flex-col top-0 pl-4 py-1 duration-500 ease-in-out'}>
className={(collapse ? 'left-0' : 'left-72') + ' z-30 fixed flex flex-nowrap md:flex-col top-0 pl-4 py-1 duration-500 ease-in-out'}>
{/* 菜单折叠 */}
<div className='z-30 p-1 border hover:shadow-xl duration-200 dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
<div className='p-1 border hover:shadow-xl duration-200 dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
dark:hover:bg-gray-100 text-xl cursor-pointer mr-2 my-2 dark:text-gray-300 dark:hover:text-black'>
<i className='fa fa-bars p-2.5 hover:scale-125 transform duration-200'
onClick={() => changeCollapse(!collapse)} />

2
components/TocBar.js
View File

@@ -47,7 +47,7 @@ const TocBar = ({ toc }) => {
setActiveSection(currentSectionId)
}, throttleMs)
return <div className='bg-white dark:bg-gray-800'>
return <div className='bg-white dark:bg-gray-800 pb-10'>
<div className='text-center text-2xl font-bold text-black dark:text-white py-6 '>
文章目录
</div>

65
layouts/ArticleLayout.js
View File

@@ -88,8 +88,9 @@ const ArticleLayout = ({
)}
{frontMatter.slug !== 'about' && (<>
<a className='flex-nowrap flex hover:bg-blue-500 hover:text-white duration-200 px-1 mx-1'
href='/article/about'>
<a
className='flex-nowrap flex hidden md:block hover:bg-blue-500 hover:text-white duration-200 px-1 mx-1'
href='/article/about'>
<Image href='https://www.baidu.com' alt={BLOG.author} width={20} height={20} src='/avatar.svg'
className='rounded-full' />
<div className='mx-2 leading-6 my-1 md:block'>{BLOG.author}</div>
@@ -98,12 +99,10 @@ const ArticleLayout = ({
{frontMatter.type[0] !== 'Page' && (
<div className='flex items-start text-gray-500 dark:text-gray-400 text-sm leading-8 pr-3'>
<div>
{formatDate(
frontMatter?.date?.start_date || frontMatter.createdTime,
BLOG.lang
)}
</div>
{formatDate(
frontMatter?.date?.start_date || frontMatter.createdTime,
BLOG.lang
)}
</div>
)}
</div>
@@ -117,22 +116,16 @@ const ArticleLayout = ({
</div>
</div>
<div>{children}</div>
{/* Notion文章主体 */}
{blockMap && (
<div>
<NotionRenderer
recordMap={blockMap}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
mapPageUrl={mapPageUrl}
/>
</div>
<NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
/>
)}
<div className='flex justify-center pt-5'>
@@ -143,7 +136,8 @@ const ArticleLayout = ({
</p>
{/* 版权声明 */}
<section className='dark:bg-gray-700 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
<section
className='dark:bg-gray-700 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
<ul>
<li><strong>本文作者：</strong>{BLOG.author}</li>
<li><strong>本文链接：</strong> <a href={url}>{url}</a> 《{frontMatter.title}》</li>
@@ -154,14 +148,8 @@ const ArticleLayout = ({
<div className='text-gray-800 my-5 dark:text-gray-300'>
<div className='mt-4 my-2 font-bold'>继续阅读</div>
<div className='flex flex-wrap lg:flex-nowrap lg:space-x-3 justify-between py-2'>
{/* <Link href={prev.slug}> */}
{/* <div>上一篇:<a className='py-1 underline cursor-pointer ml-1'>{prev.title}</a></div> */}
{/* </Link> */}
<BlogPostMini post={prev} />
<BlogPostMini post={next} />
{/* <Link href={next.slug}> */}
{/* <div>下一篇:<a className='py-1 underline cursor-pointer ml-1'>{next.title}</a></div> */}
{/* </Link> */}
</div>
</div>
{/* 评论互动 */}
@@ -171,18 +159,15 @@ const ArticleLayout = ({
</main>
<div>
{/* 下方菜单组 */}
<div
className='right-0 space-x-2 fixed flex bottom-20 px-5 py-1 duration-500'>
<div className='flex-wrap'>
{/* 分享按钮 */}
<ShareButton post={frontMatter} />
{/* 跳回顶部 */}
<TopJumper />
</div>
{/* 下方菜单组 */}
<div
className='right-0 space-x-2 fixed flex bottom-20 px-5 py-1 duration-500'>
<div className='flex-wrap'>
{/* 分享按钮 */}
<ShareButton post={frontMatter} />
{/* 跳回顶部 */}
<TopJumper />
</div>
</div>
</div>

6
layouts/DefaultLayout.js
View File

@@ -78,12 +78,9 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
return (
<div id='wrapper' className={theme}>
<CommonHead meta={meta}/>
{/* <TopNav tags={tags} currentTag={currentTag} /> */}
{/* <Header navBarTitle={meta.title} fullWidth={true}/> */}
<div className={`${BLOG.font} flex bg-gray-100 dark:bg-black min-h-screen`}>
{/* 侧边菜单 */}
<SideBar tags={tags} currentTag={currentTag} />
<main className='md:px-24 p-5 flex-grow'>
{(!page || page === 1) && (
<div className='py-5' />
@@ -128,7 +125,6 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
</main>
</div>
{/* <Footer /> */}
</div>
)
}

1
pages/_document.js
View File

@@ -12,7 +12,6 @@ class MyDocument extends Document {
return (
<Html lang={BLOG.lang}>
<Head>
<title>{BLOG.title}</title>
<link rel='icon' href='/favicon.ico' />
<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
<ThirdPartyScript />