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

feature:

Browse Source 
404页面检测文章加载；
Page类型排版微调
This commit is contained in:
tangly1024
2021-12-01 13:23:03 +08:00
parent 2b2ac12ce3
commit 3d02abf98e
4 changed files with 66 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -35,6 +35,7 @@
- 评论、搜索、标签、分类 - 评论、搜索、标签、分类
- 订阅、网站统计 - 订阅、网站统计
- 本地化多语言 - 本地化多语言
- 服务端渲染、优秀的SEO
**🎨  美观，轻松自定义** **🎨  美观，轻松自定义**

5
components/RewardButton.js
View File

@@ -5,9 +5,8 @@ import React from 'react'
* @returns {JSX.Element} * @returns {JSX.Element}
* @constructor * @constructor
*/ */
const RewardButton = () => { const RewardButton = () => {
const [popoverShow, setPopoverShow] = React.useState(false) const [popoverShow, setPopoverShow] = React.useState(false)
const btnRef = React.createRef()
const openPopover = () => { const openPopover = () => {
setPopoverShow(true) setPopoverShow(true)
@@ -16,7 +15,7 @@ const RewardButton = () => {
setPopoverShow(false) setPopoverShow(false)
} }
return ( return (
<div onMouseEnter={openPopover} onMouseLeave={closePopover}> <div onMouseEnter={openPopover} onMouseLeave={closePopover} className='justify-center py-10'>
<div className='bg-red-500 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'> <div className='bg-red-500 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
<span className='fa fa-qrcode mr-2' /> <span className='fa fa-qrcode mr-2' />
<span>打赏一杯咖啡</span> <span>打赏一杯咖啡</span>

8
pages/404.js
View File

@@ -11,8 +11,14 @@ import { useRouter } from 'next/router'
export default function Custom404 () { export default function Custom404 () {
const router = useRouter() const router = useRouter()
useEffect(() => { useEffect(() => {
// 延时3秒如果加载失败就返回首页
setTimeout(() => { setTimeout(() => {
router.push('/') if (window) {
const article = document.getElementById('article-wrapper')
if (!article) {
router.push('/')
}
}
}, 3000) }, 3000)
}) })

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

@@ -47,75 +47,71 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} categories={categories}> return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} categories={categories}>
<Progress targetRef={targetRef} /> <Progress targetRef={targetRef} />
<div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black'> <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black pt-16'>
{/* 中央区域 wrapper */} {/* 中央区域 wrapper */}
<header {post.type && !post.type.includes('Page') && (<>
className='hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mt-16 mb-2 lg:mt-32 md:flex-shrink-0 animate__fadeIn animate__animated'> <header
{/* 封面图 */} className='hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mb-2 md:flex-shrink-0 animate__fadeIn animate__animated'>
{post.page_cover && post.page_cover.length > 1 && ( {/* 封面图 */}
<img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }} loading='lazy' {post.page_cover && post.page_cover.length > 1 && (
src={post.page_cover} alt={post.title} /> <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }} loading='lazy'
)} src={post.page_cover} alt={post.title} />
</header> )}
</header>
</>)}
<article <article
className='hover:shadow-2xl duration-200 shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 pt-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'> className='hover:shadow-2xl duration-200 shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 pt-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
{/* 文章标题 */}
<h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
{post.title}
</h1>
<h2 className='text-gray-500 text-xs my-5 dark:text-gray-400 animate__animated animate__fadeIn'> {post.type && !post.type.includes('Page') && (<>
{post.summary} {/* 文章信息 */}
</h2> <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'> {post.title}</h1>
<h2 className='text-gray-500 text-xs my-5 dark:text-gray-400 animate__animated animate__fadeIn'>{post.summary}</h2>
<div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'>
<div className='flex-nowrap flex'>
<div className='py-2 opacity-50'>
{locale.COMMON.CATEGORY}：
</div>
<Link href={`/category/${post.category}`} passHref>
<div className='cursor-pointer text-md py-2 mx-3 hover:underline'><i
className='fa fa-folder-open-o mr-1' />{post.category}</div>
</Link>
{/* 文章作者等关联信息 */} {post.type[0] !== 'Page' && (
<div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'> <div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
<div className='flex-nowrap flex'> {formatDate(
<div className='py-2 opacity-50'> post?.date?.start_date || post.createdTime,
{locale.COMMON.CATEGORY}： BLOG.lang
</div> )}
<Link href={`/category/${post.category}`} passHref> </div>
<div className='cursor-pointer text-md py-2 mx-3 hover:underline'><i
className='fa fa-folder-open-o mr-1' />{post.category}</div>
</Link>
{post.type[0] !== 'Page' && (
<div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
{formatDate(
post?.date?.start_date || post.createdTime,
BLOG.lang
)} )}
</div> </div>
)}
</div>
{/* 不蒜子 */} {/* 不蒜子 */}
<div id='busuanzi_container_page_pv' className='hidden'> <div id='busuanzi_container_page_pv' className='hidden'>
<div className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'> <div className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
&nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span> &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
</div>
</div>
</div> </div>
</div> </>)}
</div>
<div className='mb-10'> {/* Notion文章主体 */}
{/* Notion文章主体 */} {blockMap && (
{blockMap && ( <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
<NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl} components={{
components={{ equation: Equation,
equation: Equation, code: Code,
code: Code, collectionRow: CollectionRow,
collectionRow: CollectionRow, collection: Collection
collection: Collection }}
}} />
/> )}
)}
</div>
<div className='flex justify-center pb-10'> {/* 赞赏按钮 */}
<RewardButton /> <RewardButton />
</div>
{/* 推荐文章 */}
<RecommendPosts currentPost={post} totalPosts={posts} /> <RecommendPosts currentPost={post} totalPosts={posts} />
{/* 版权声明 */} {/* 版权声明 */}
@@ -128,8 +124,8 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
</ul> </ul>
</section> </section>
{/* 标签列表 */}
<section className='md:flex md:justify-between'> <section className='md:flex md:justify-between'>
{post.tagItems && ( {post.tagItems && (
<div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'> <div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
<div className='hidden md:block dark:text-gray-300'>{locale.COMMON.TAGS}：</div> <div className='hidden md:block dark:text-gray-300'>{locale.COMMON.TAGS}：</div>
@@ -138,13 +134,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
))} ))}
</div> </div>
)} )}
<div> <div>
<ShareBar post={post} /> <ShareBar post={post} />
</div> </div>
</section> </section>
{/* 上一篇下一篇文章 */}
<div className='text-gray-800 my-5 dark:text-gray-300'> <div className='text-gray-800 my-5 dark:text-gray-300'>
<hr /> <hr />
<div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'> <div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
@@ -168,6 +163,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
</div> </div>
{/* 悬浮目录按钮 */}
<div className='block lg:hidden'> <div className='block lg:hidden'>
<TocDrawerButton onClick={() => { <TocDrawerButton onClick={() => {
drawerRight.current.handleSwitchVisible() drawerRight.current.handleSwitchVisible()
@@ -183,7 +179,6 @@ export async function getStaticPaths () {
let posts = [] let posts = []
if (BLOG.isProd) { if (BLOG.isProd) {
posts = await getAllPosts({ from: 'slug - paths', includePage: true }) posts = await getAllPosts({ from: 'slug - paths', includePage: true })
posts = posts.filter(post => post.status[0] === 'Published')
} }
return { return {
paths: posts.map(row => `${BLOG.path}/article/${row.slug}`), paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
@@ -192,8 +187,7 @@ export async function getStaticPaths () {
} }
export async function getStaticProps ({ params: { slug } }) { export async function getStaticProps ({ params: { slug } }) {
let posts = await getAllPosts({ from: 'slug-props' }) let posts = await getAllPosts({ from: 'slug-props', includePage: true })
posts = posts.filter(post => post.status[0] === 'Published')
const post = posts.find(t => t.slug === slug) const post = posts.find(t => t.slug === slug)
if (!post) { if (!post) {
return { return {