d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-01 15:10:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #207 from tangly1024/preview

Browse Source 
优化增量静态及404处理
This commit is contained in:
tangly1024
2022-04-26 22:25:27 +08:00
committed by GitHub
parent 5a884f9a73 d0edae963b
commit 2b638eee00
10 changed files with 71 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/global.js
View File

@@ -49,7 +49,7 @@ export function GlobalContextProvider({ children }) {
}, []) }, [])
return ( return (
<GlobalContext.Provider value={{ onLoading, locale, updateLocale, isDarkMode, updateDarkMode, theme, setTheme, switchTheme, changeTheme }}> <GlobalContext.Provider value={{ onLoading, changeLoadingState, locale, updateLocale, isDarkMode, updateDarkMode, theme, setTheme, switchTheme, changeTheme }}>
{children} {children}
</GlobalContext.Provider> </GlobalContext.Provider>
) )

38
pages/[slug].js
View File

@@ -3,7 +3,8 @@ import { getPostBlocks } from '@/lib/notion'
import { getGlobalNotionData } from '@/lib/notion/getNotionData' import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import * as ThemeMap from '@/themes' import * as ThemeMap from '@/themes'
import { useEffect, useState } from 'react' import React from 'react'
import { useRouter } from 'next/router'
/** /**
* 根据notion的slug访问页面，针对类型为Page的页面 * 根据notion的slug访问页面，针对类型为Page的页面
@@ -11,16 +12,32 @@ import { useEffect, useState } from 'react'
* @returns * @returns
*/ */
const Slug = props => { const Slug = props => {
const { theme } = useGlobal() const { theme, changeLoadingState } = useGlobal()
const ThemeComponents = ThemeMap[theme] const ThemeComponents = ThemeMap[theme]
const { post } = props const { post } = props
if (!post) { if (!post) {
return <ThemeComponents.Layout404 {...props} /> changeLoadingState(true)
const router = useRouter()
setTimeout(() => {
if (typeof document !== 'undefined') {
const article = document.getElementById('container')
if (!article) {
router.push('/404').then(() => {
console.warn('找不到页面', router.asPath)
})
}
}
}, 5000)
const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading` }
return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
} }
changeLoadingState(false)
// 文章锁🔐 // 文章锁🔐
const [lock, setLock] = useState(post.password && post.password !== '') const [lock, setLock] = React.useState(post.password && post.password !== '')
useEffect(() => { React.useEffect(() => {
if (post.password && post.password !== '') { if (post.password && post.password !== '') {
setLock(true) setLock(true)
} else { } else {
@@ -40,12 +57,13 @@ const Slug = props => {
const { siteInfo } = props const { siteInfo } = props
const meta = { const meta = {
title: `${post.title} | ${siteInfo.title}`, title: `${post?.title} | ${siteInfo?.title}`,
description: post.summary, description: post?.summary,
type: 'article', type: 'article',
image: post.page_cover, slug: 'article/' + post?.slug,
slug: post.slug, image: post?.page_cover,
tags: post.tags category: post?.category?.[0],
tags: post?.tags
} }
props = { ...props, meta, lock, setLock, validPassword } props = { ...props, meta, lock, setLock, validPassword }

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

@@ -3,9 +3,9 @@ import { getPostBlocks } from '@/lib/notion'
import { getGlobalNotionData } from '@/lib/notion/getNotionData' import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import * as ThemeMap from '@/themes' import * as ThemeMap from '@/themes'
import { useEffect, useState } from 'react' import React from 'react'
import { useRouter } from 'next/router'
import { idToUuid } from 'notion-utils' import { idToUuid } from 'notion-utils'
import { useRouter } from 'next/router'
/** /**
* 根据notion的slug访问页面 * 根据notion的slug访问页面
@@ -13,32 +13,33 @@ import { idToUuid } from 'notion-utils'
* @returns * @returns
*/ */
const Slug = props => { const Slug = props => {
const { theme } = useGlobal() const { theme, changeLoadingState } = useGlobal()
const ThemeComponents = ThemeMap[theme] const ThemeComponents = ThemeMap[theme]
const { post } = props const { post } = props
if (!post) { if (!post) {
changeLoadingState(true)
const router = useRouter() const router = useRouter()
useEffect(() => { setTimeout(() => {
setTimeout(() => { if (typeof document !== 'undefined') {
if (window) { const article = document.getElementById('container')
const article = typeof document !== 'undefined' && document.getElementById('container') if (!article) {
if (!article) { router.push('/404').then(() => {
router.push('/404').then(() => { console.warn('找不到页面', router.asPath)
console.warn('找不到页面', router.asPath) })
})
}
} }
}, 3000) }
}) }, 5000)
const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading` } const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading` }
return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} /> return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
} }
changeLoadingState(false)
// 文章锁🔐 // 文章锁🔐
const [lock, setLock] = useState(post.password && post.password !== '') const [lock, setLock] = React.useState(post?.password && post?.password !== '')
useEffect(() => { React.useEffect(() => {
if (post.password && post.password !== '') { if (post?.password && post?.password !== '') {
setLock(true) setLock(true)
} else { } else {
setLock(false) setLock(false)
@@ -46,9 +47,9 @@ const Slug = props => {
}, [post]) }, [post])
/** /**
* 验证文章密码 * 验证文章密码
* @param {*} result * @param {*} result
*/ */
const validPassword = result => { const validPassword = result => {
if (result) { if (result) {
setLock(false) setLock(false)
@@ -59,13 +60,13 @@ const Slug = props => {
const { siteInfo } = props const { siteInfo } = props
const meta = { const meta = {
title: `${props.post.title} | ${siteInfo.title}`, title: `${post?.title} | ${siteInfo?.title}`,
description: props.post.summary, description: post?.summary,
type: 'article', type: 'article',
slug: 'article/' + props.post.slug, slug: 'article/' + post?.slug,
image: props.post.page_cover, image: post?.page_cover,
category: props.post.category?.[0], category: post?.category?.[0],
tags: props.post.tags tags: post?.tags
} }
return ( return (

6
themes/example/components/ArticleLock.js
View File

@@ -24,9 +24,9 @@ export const ArticleLock = props => {
} }
} }
return <div className='w-full flex justify-center items-center h-96 font-sans'> return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex'> <div className='flex'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lgfont-light leading-10 text-black bg-white dark:bg-gray-500'></input> <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lgfont-light leading-10 text-black bg-white dark:bg-gray-500'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" > <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
@@ -36,5 +36,5 @@ export const ArticleLock = props => {
<div id='tips'> <div id='tips'>
</div> </div>
</div> </div>
</div> </div>
} }

4
themes/fukasawa/components/ArticleLock.js
View File

@@ -24,11 +24,11 @@ export const ArticleLock = props => {
} }
} }
return (<div className="flex justify-center"> return (<div id='container' className="flex justify-center">
<div className="shadow md:hover:shadow-2xl overflow-x-auto max-w-5xl w-screen md:w-full py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200 subpixel-antialiased"> <div className="shadow md:hover:shadow-2xl overflow-x-auto max-w-5xl w-screen md:w-full py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200 subpixel-antialiased">
<div className="w-full flex justify-center items-center h-96 font-sans"> <div className="w-full flex justify-center items-center h-96 font-sans">
<div className="text-center space-y-3"> <div className="text-center space-y-3">
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className="flex"> <div className="flex">
<input <input
id="password" type='password' id="password" type='password'

4
themes/hexo/components/ArticleLock.js
View File

@@ -23,7 +23,7 @@ export const ArticleLock = props => {
} }
} }
return <div className='w-full flex justify-center items-center h-96 font-sans'> return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex'> <div className='flex'>
@@ -35,5 +35,5 @@ export const ArticleLock = props => {
<div id='tips'> <div id='tips'>
</div> </div>
</div> </div>
</div> </div>
} }

2
themes/hexo/components/HeaderArticle.js
View File

@@ -5,7 +5,7 @@ import { useEffect } from 'react'
export default function HeaderArticle({ post, siteInfo }) { export default function HeaderArticle({ post, siteInfo }) {
if (!post) { if (!post) {
return <>loading...</> return <></>
} }
const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("${siteInfo?.pageCover}")` const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("${siteInfo?.pageCover}")`
const { isDarkMode } = useGlobal() const { isDarkMode } = useGlobal()

7
themes/hexo/components/Logo.js
View File

@@ -1,12 +1,13 @@
import BLOG from '@/blog.config'
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
const Logo = props => { const Logo = props => {
const { siteInfo } = props const { siteInfo } = props
return <Link href='/' passHref> return <Link href='/' passHref>
<div className='flex flex-col justify-center items-center cursor-pointer space-y-3'> <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
<div className='font-sans text-lg p-1.5 rounded bg-black text-white dark:border-white border-black border'> {siteInfo?.title}</div> <div className='font-sans text-lg p-1.5 rounded bg-black text-white dark:border-white border-black border'> {siteInfo?.title || BLOG.TITLE}</div>
</div> </div>
</Link> </Link>
} }
export default Logo export default Logo

4
themes/medium/components/ArticleLock.js
View File

@@ -24,7 +24,7 @@ export const ArticleLock = props => {
} }
} }
return <div className='w-full flex justify-center items-center h-96 font-sans'> return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex'> <div className='flex'>
@@ -36,5 +36,5 @@ export const ArticleLock = props => {
<div id='tips'> <div id='tips'>
</div> </div>
</div> </div>
</div> </div>
} }

2
themes/next/components/ArticleLock.js
View File

@@ -25,7 +25,7 @@ export const ArticleLock = props => {
} }
return ( return (
<div className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200"> <div id='container' className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200">
<div className="w-full flex justify-center items-center h-96 font-sans"> <div className="w-full flex justify-center items-center h-96 font-sans">
<div className="text-center space-y-3"> <div className="text-center space-y-3">
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>