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

进度条、回顶键调整

Browse Source
This commit is contained in:
tangly1024
2021-10-18 14:50:35 +08:00
parent 880505b9d1
commit 7480cef805
4 changed files with 27 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/JumpToTop.js
View File

@@ -34,23 +34,14 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
return (
<div className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
<div className='flex-wrap'>
<div className='flex-wrap transform hover:scale-125 duration-200 '>
<div
className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' rounded-full animate__animated animate__faster shadow-xl'}>
<div
style={{ backgroundColor: 'rgb(56, 144, 255)' }}
className='rounded-full dark:bg-gray-600 bg-white cursor-pointer '
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
{showPercent && (
<div style={{ backgroundColor: 'rgb(56, 144, 255)' }}
className='text-gray-100 absolute rounded-full dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
<span>{percent}%</span>
</div>
)}
<div className='text-2xl'>
<a className='text-gray-100 fa fa-arrow-up p-3 transform hover:scale-125 duration-200 '
title={locale.POST.TOP} />
</div>
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
style={{ backgroundColor: 'rgb(56, 144, 255)' }}
className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' p-1 cursor-pointer rounded-full animate__animated animate__faster shadow-xl'}>
<div className='text-center'>
<div className='w-10 text-xl text-gray-100' title={locale.POST.TOP} ><i className='fa fa-arrow-up'/> </div>
{showPercent && (<div className='w-10 text-xs text-gray-100 dark:text-gray-200 text-center'>{percent}%</div>)}
</div>
</div>
</div>

4
components/Progress.js
View File

@@ -24,8 +24,8 @@ const Progress = ({ targetRef }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
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}%` }}/>
return (<div className='h-1.5 fixed left-0 top-0 w-full shadow-2xl z-40'>
<div className='h-1 bg-blue-500 fixed left-0 top-0 duration-200' style={{ width: `${percent}%` }}/>
</div>)
}

2
layouts/BaseLayout.js
View File

@@ -52,7 +52,7 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
<SideBar tags={tags} post={post} />
<div className='flex flex-grow' ref={targetRef}>
{children}
<JumpToTop targetRef={targetRef} showPercent={false} />
<JumpToTop targetRef={targetRef} showPercent={true} />
</div>
</main>

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

@@ -19,7 +19,7 @@ import { useRef } from 'react'
const mapPageUrl = id => {
return 'https://www.notion.so/' + id.replace(/-/g, '')
}
const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
const BlogPost = ({ post, blockMap, tags, prev, next }) => {
if (!post) {
return <BaseLayout meta={{ title: `${BLOG.title} | 加载中` }}>
<div className='w-full h-full flex justify-center mx-auto dark:bg-gray-800'>
@@ -40,7 +40,8 @@ const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
return <BaseLayout meta={meta} tags={tags} post={post}>
{/* 阅读进度条 */}
<Progress targetRef={targetRef} />
<div id='article-wrapper' className='flex-grow bg-gray-100 dark:bg-gray-800'>
<div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-100 dark:bg-gray-800'>
{/* 中央区域 wrapper */}
<header
className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 animate__fadeIn animate__animated'>
@@ -52,7 +53,7 @@ const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
</header>
<article
className='w-screen overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
className='w-screen md:w-full overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
{/* 文章标题 */}
<h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
{post.title}
@@ -163,19 +164,19 @@ const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
}
export async function getStaticPaths () {
if (BLOG.isProd) {
let posts = await getAllPosts()
posts = posts.filter(post => post.status[0] === 'Published')
return {
paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
fallback: true
}
} else {
return {
paths: [],
fallback: true
}
// if (BLOG.isProd) {
let posts = await getAllPosts()
posts = posts.filter(post => post.status[0] === 'Published')
return {
paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
fallback: true
}
// } else {
// return {
// paths: [],
// fallback: true
// }
// }
}
export async function getStaticProps ({ params: { slug } }) {
@@ -190,7 +191,6 @@ export async function getStaticProps ({ params: { slug } }) {
}
const blockMap = await getPostBlocks(post.id)
const emailHash = createHash('md5').update(BLOG.email).digest('hex')
post.toc = getPageTableOfContents(post, blockMap)
posts = posts.filter(post => post.type[0] === 'Post')
const tags = await getAllTags(posts)
@@ -200,7 +200,7 @@ export async function getStaticProps ({ params: { slug } }) {
const next = posts.slice(index + 1, index + 2)[0] ?? posts[0]
return {
props: { post, blockMap, emailHash, tags, prev, next },
props: { post, blockMap, tags, prev, next },
revalidate: 1
}
}