From d0edae963bc21aba8378e5ea58cd75bff905a40e Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 26 Apr 2022 22:20:02 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A2=9E=E9=87=8F=E9=9D=99?= =?UTF-8?q?=E6=80=81=E5=8F=8A404=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/global.js | 2 +- pages/[slug].js | 38 +++++++++++----- pages/article/[slug].js | 53 ++++++++++++----------- themes/example/components/ArticleLock.js | 6 +-- themes/fukasawa/components/ArticleLock.js | 4 +- themes/hexo/components/ArticleLock.js | 4 +- themes/hexo/components/HeaderArticle.js | 2 +- themes/hexo/components/Logo.js | 7 +-- themes/medium/components/ArticleLock.js | 4 +- themes/next/components/ArticleLock.js | 2 +- 10 files changed, 71 insertions(+), 51 deletions(-) diff --git a/lib/global.js b/lib/global.js index ea93caff..6e0c5fee 100644 --- a/lib/global.js +++ b/lib/global.js @@ -49,7 +49,7 @@ export function GlobalContextProvider({ children }) { }, []) return ( - + {children} ) diff --git a/pages/[slug].js b/pages/[slug].js index cabde864..43c98844 100644 --- a/pages/[slug].js +++ b/pages/[slug].js @@ -3,7 +3,8 @@ import { getPostBlocks } from '@/lib/notion' import { getGlobalNotionData } from '@/lib/notion/getNotionData' import { useGlobal } from '@/lib/global' import * as ThemeMap from '@/themes' -import { useEffect, useState } from 'react' +import React from 'react' +import { useRouter } from 'next/router' /** * 根据notion的slug访问页面，针对类型为Page的页面 @@ -11,16 +12,32 @@ import { useEffect, useState } from 'react' * @returns */ const Slug = props => { - const { theme } = useGlobal() + const { theme, changeLoadingState } = useGlobal() const ThemeComponents = ThemeMap[theme] const { post } = props + if (!post) { - return + 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 } + changeLoadingState(false) + // 文章锁🔐 - const [lock, setLock] = useState(post.password && post.password !== '') - useEffect(() => { + const [lock, setLock] = React.useState(post.password && post.password !== '') + React.useEffect(() => { if (post.password && post.password !== '') { setLock(true) } else { @@ -40,12 +57,13 @@ const Slug = props => { const { siteInfo } = props const meta = { - title: `${post.title} | ${siteInfo.title}`, - description: post.summary, + title: `${post?.title} | ${siteInfo?.title}`, + description: post?.summary, type: 'article', - image: post.page_cover, - slug: post.slug, - tags: post.tags + slug: 'article/' + post?.slug, + image: post?.page_cover, + category: post?.category?.[0], + tags: post?.tags } props = { ...props, meta, lock, setLock, validPassword } diff --git a/pages/article/[slug].js b/pages/article/[slug].js index 4dfb0738..66e53de0 100644 --- a/pages/article/[slug].js +++ b/pages/article/[slug].js @@ -3,9 +3,9 @@ import { getPostBlocks } from '@/lib/notion' import { getGlobalNotionData } from '@/lib/notion/getNotionData' import { useGlobal } from '@/lib/global' import * as ThemeMap from '@/themes' -import { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import React from 'react' import { idToUuid } from 'notion-utils' +import { useRouter } from 'next/router' /** * 根据notion的slug访问页面 @@ -13,32 +13,33 @@ import { idToUuid } from 'notion-utils' * @returns */ const Slug = props => { - const { theme } = useGlobal() + const { theme, changeLoadingState } = useGlobal() const ThemeComponents = ThemeMap[theme] const { post } = props if (!post) { + changeLoadingState(true) const router = useRouter() - useEffect(() => { - setTimeout(() => { - if (window) { - const article = typeof document !== 'undefined' && document.getElementById('container') - if (!article) { - router.push('/404').then(() => { - console.warn('找不到页面', router.asPath) - }) - } + setTimeout(() => { + if (typeof document !== 'undefined') { + const article = document.getElementById('container') + if (!article) { + router.push('/404').then(() => { + console.warn('找不到页面', router.asPath) + }) } - }, 3000) - }) + } + }, 5000) const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading` } return } + changeLoadingState(false) + // 文章锁🔐 - const [lock, setLock] = useState(post.password && post.password !== '') - useEffect(() => { - if (post.password && post.password !== '') { + const [lock, setLock] = React.useState(post?.password && post?.password !== '') + React.useEffect(() => { + if (post?.password && post?.password !== '') { setLock(true) } else { setLock(false) @@ -46,9 +47,9 @@ const Slug = props => { }, [post]) /** - * 验证文章密码 - * @param {*} result - */ + * 验证文章密码 + * @param {*} result + */ const validPassword = result => { if (result) { setLock(false) @@ -59,13 +60,13 @@ const Slug = props => { const { siteInfo } = props const meta = { - title: `${props.post.title} | ${siteInfo.title}`, - description: props.post.summary, + title: `${post?.title} | ${siteInfo?.title}`, + description: post?.summary, type: 'article', - slug: 'article/' + props.post.slug, - image: props.post.page_cover, - category: props.post.category?.[0], - tags: props.post.tags + slug: 'article/' + post?.slug, + image: post?.page_cover, + category: post?.category?.[0], + tags: post?.tags } return ( diff --git a/themes/example/components/ArticleLock.js b/themes/example/components/ArticleLock.js index bfdd00ce..1f4ade0e 100644 --- a/themes/example/components/ArticleLock.js +++ b/themes/example/components/ArticleLock.js @@ -24,9 +24,9 @@ export const ArticleLock = props => { } } - return
+ return
-
{locale.COMMON.ARTICLE_LOCK_TIPS}
+
{locale.COMMON.ARTICLE_LOCK_TIPS}
@@ -36,5 +36,5 @@ export const ArticleLock = props => {
-
+
} diff --git a/themes/fukasawa/components/ArticleLock.js b/themes/fukasawa/components/ArticleLock.js index 0d10b513..23112eeb 100644 --- a/themes/fukasawa/components/ArticleLock.js +++ b/themes/fukasawa/components/ArticleLock.js @@ -24,11 +24,11 @@ export const ArticleLock = props => { } } - return (
+ return (
-
{locale.COMMON.ARTICLE_LOCK_TIPS}
+
{locale.COMMON.ARTICLE_LOCK_TIPS}
{ } } - return
+ return
{locale.COMMON.ARTICLE_LOCK_TIPS}
@@ -35,5 +35,5 @@ export const ArticleLock = props => {
-
+
} diff --git a/themes/hexo/components/HeaderArticle.js b/themes/hexo/components/HeaderArticle.js index bd0bea4a..191184cb 100644 --- a/themes/hexo/components/HeaderArticle.js +++ b/themes/hexo/components/HeaderArticle.js @@ -5,7 +5,7 @@ import { useEffect } from 'react' export default function HeaderArticle({ post, siteInfo }) { if (!post) { - return <>loading... + return <> } const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("${siteInfo?.pageCover}")` const { isDarkMode } = useGlobal() diff --git a/themes/hexo/components/Logo.js b/themes/hexo/components/Logo.js index 8844d1ad..e1adeb3d 100644 --- a/themes/hexo/components/Logo.js +++ b/themes/hexo/components/Logo.js @@ -1,12 +1,13 @@ +import BLOG from '@/blog.config' import Link from 'next/link' import React from 'react' const Logo = props => { const { siteInfo } = props return -
-
{siteInfo?.title}
-
+
+
{siteInfo?.title || BLOG.TITLE}
+
} export default Logo diff --git a/themes/medium/components/ArticleLock.js b/themes/medium/components/ArticleLock.js index aba09687..4b969835 100644 --- a/themes/medium/components/ArticleLock.js +++ b/themes/medium/components/ArticleLock.js @@ -24,7 +24,7 @@ export const ArticleLock = props => { } } - return
+ return
{locale.COMMON.ARTICLE_LOCK_TIPS}
@@ -36,5 +36,5 @@ export const ArticleLock = props => {
-
+
} diff --git a/themes/next/components/ArticleLock.js b/themes/next/components/ArticleLock.js index b8132316..4bb2ef65 100644 --- a/themes/next/components/ArticleLock.js +++ b/themes/next/components/ArticleLock.js @@ -25,7 +25,7 @@ export const ArticleLock = props => { } return ( -
+
{locale.COMMON.ARTICLE_LOCK_TIPS}