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

feat/theme-switch

Browse Source
This commit is contained in:
tangly1024.com
2023-06-19 19:03:09 +08:00
parent 133fdd7c77
commit a042dc859a
28 changed files with 353 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
pages/404.js
View File

@@ -1,15 +1,5 @@
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import Loading from '@/components/Loading'
import { Suspense, useEffect, useState } from 'react'
import BLOG from '@/blog.config'
const layout = 'Layout404'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 404
@@ -17,22 +7,13 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
* @returns
*/
const NoFound = props => {
const { theme, siteInfo } = useGlobal()
const { Layout } = props
const { siteInfo } = useGlobal()
const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
const [Layout, setLayout] = useState(DefaultLayout)
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
export async function getStaticProps () {

23
pages/[...slug].js
View File

@@ -1,7 +1,6 @@
import BLOG from '@/blog.config'
import { getPostBlocks } from '@/lib/notion'
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global'
import { Suspense, useEffect, useState } from 'react'
import { idToUuid } from 'notion-utils'
import { useRouter } from 'next/router'
@@ -9,35 +8,16 @@ import { isBrowser } from '@/lib/utils'
import { getNotion } from '@/lib/notion/getNotion'
import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
import md5 from 'js-md5'
import dynamic from 'next/dynamic'
import Loading from '@/components/Loading'
const layout = 'LayoutSlug'
/**
* 懒加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 根据notion的slug访问页面
* @param {*} props
* @returns
*/
const Slug = props => {
const { theme, setOnLoading } = useGlobal()
const { post, siteInfo } = props
const { post, siteInfo, Layout } = props
const router = useRouter()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
// 文章锁🔐
const [lock, setLock] = useState(post?.password && post?.password !== '')
@@ -57,7 +37,6 @@ const Slug = props => {
// 文章加载
useEffect(() => {
setOnLoading(false)
// 404
if (!post) {
setTimeout(() => {

11
pages/_app.js
View File

@@ -19,6 +19,8 @@ import dynamic from 'next/dynamic'
// 自定义样式css和js引入
import ExternalScript from '@/components/ExternalScript'
import { useRouter } from 'next/router'
import { getLayoutByTheme } from '@/lib/theme'
// 各种扩展插件 动画等
const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))
@@ -31,11 +33,14 @@ const MyApp = ({ Component, pageProps }) => {
}
}, [])
// 根据页面路径加载不同Layout文件
const Layout = getLayoutByTheme(useRouter())
return (
<GlobalContextProvider>
<Component {...pageProps} />
<ExternalPlugins {...pageProps}/>
<ExternalScript/>
<Component {...pageProps} Layout={Layout} />
<ExternalPlugins {...pageProps} />
<ExternalScript />
</GlobalContextProvider>
)
}

28
pages/archive/index.js
View File

@@ -1,29 +1,11 @@
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import React, { Suspense, useEffect, useState } from 'react'
import React from 'react'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import BLOG from '@/blog.config'
import Loading from '@/components/Loading'
const layout = 'LayoutArchive'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const ArchiveIndex = props => {
const { siteInfo } = props
const { theme, locale } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const { siteInfo, Layout } = props
const { locale } = useGlobal()
const meta = {
title: `${locale.NAV.ARCHIVE} | ${siteInfo?.title}`,
@@ -35,9 +17,7 @@ const ArchiveIndex = props => {
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
export async function getStaticProps() {

28
pages/category/[category]/index.js
View File

@@ -1,15 +1,7 @@
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import React, { Suspense, useEffect, useState } from 'react'
import React from 'react'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import BLOG from '@/blog.config'
import Loading from '@/components/Loading'
const layout = 'LayoutCategory'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 分类页
@@ -17,18 +9,8 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
* @returns
*/
export default function Category(props) {
const { siteInfo } = props
const { locale, theme } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const { siteInfo, Layout } = props
const { locale } = useGlobal()
const meta = {
title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
@@ -42,9 +24,7 @@ export default function Category(props) {
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
export async function getStaticProps({ params: { category } }) {

27
pages/category/[category]/page/[page].js
View File

@@ -1,16 +1,7 @@
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import React, { Suspense, useEffect, useState } from 'react'
import React from 'react'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import BLOG from '@/blog.config'
import Loading from '@/components/Loading'
const layout = 'LayoutCategory'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 分类页
@@ -18,18 +9,8 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
* @returns
*/
export default function Category(props) {
const { theme } = useGlobal()
const { siteInfo } = props
const { siteInfo, Layout } = props
const { locale } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const meta = {
title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
@@ -43,9 +24,7 @@ export default function Category(props) {
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
export async function getStaticProps({ params: { category, page } }) {

28
pages/category/index.js
View File

@@ -1,16 +1,7 @@
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import React, { Suspense, useEffect, useState } from 'react'
import React from 'react'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import BLOG from '@/blog.config'
import Loading from '@/components/Loading'
const layout = 'LayoutCategoryIndex'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 分类首页
@@ -18,19 +9,8 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
* @returns
*/
export default function Category(props) {
const { theme } = useGlobal()
const { locale } = useGlobal()
const { siteInfo } = props
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const { siteInfo, Layout } = props
const meta = {
title: `${locale.COMMON.CATEGORY} | ${siteInfo?.title}`,
@@ -41,9 +21,7 @@ export default function Category(props) {
}
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
export async function getStaticProps() {

28
pages/index.js
View File

@@ -1,19 +1,8 @@
import BLOG from '@/blog.config'
import { getPostBlocks } from '@/lib/notion'
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global'
import { generateRss } from '@/lib/rss'
import { generateRobotsTxt } from '@/lib/robots.txt'
import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutIndex'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 首页布局
@@ -21,21 +10,8 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
* @returns
*/
const Index = props => {
// 动态切换主题
const { theme } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
return <Suspense fallback={<Loading />}>
<Layout {...props} />
</Suspense>
const { Layout } = props
return <Layout {...props} />
}
/**

28
pages/page/[page].js
View File

@@ -1,17 +1,6 @@
import BLOG from '@/blog.config'
import { getPostBlocks } from '@/lib/notion'
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutPage'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 文章列表分页
@@ -19,18 +8,7 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
* @returns
*/
const Page = props => {
const { theme } = useGlobal()
const { siteInfo } = props
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const { siteInfo, Layout } = props
const meta = {
title: `${props?.page} | Page | ${siteInfo?.title}`,
description: siteInfo?.description,
@@ -41,9 +19,7 @@ const Page = props => {
props = { ...props, meta }
return <Suspense fallback={<Loading />}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
export async function getStaticPaths() {

26
pages/search/[keyword]/index.js
View File

@@ -2,28 +2,10 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global'
import { getDataFromCache } from '@/lib/cache/cache_manager'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutSearch'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Index = props => {
const { keyword, siteInfo } = props
const { locale, theme } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const { keyword, siteInfo, Layout } = props
const { locale } = useGlobal()
const meta = {
title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
@@ -35,9 +17,7 @@ const Index = props => {
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
/**

26
pages/search/[keyword]/page/[page].js
View File

@@ -1,29 +1,11 @@
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global'
import { getDataFromCache } from '@/lib/cache/cache_manager'
import dynamic from 'next/dynamic'
import BLOG from '@/blog.config'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutSearch'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Index = props => {
const { keyword, siteInfo } = props
const { locale, theme } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const { keyword, siteInfo, Layout } = props
const { locale } = useGlobal()
const meta = {
title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
@@ -35,9 +17,7 @@ const Index = props => {
props = { ...props, meta, currentSearch: keyword }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
/**

27
pages/search/index.js
View File

@@ -2,31 +2,14 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutSearch'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Search = props => {
const { posts, siteInfo } = props
const { theme, locale } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
const { posts, siteInfo, Layout } = props
const { locale } = useGlobal()
const router = useRouter()
const keyword = getSearchKey(router)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
let filteredPosts
// 静态过滤
if (keyword) {
@@ -51,9 +34,7 @@ const Search = props => {
props = { ...props, meta, posts: filteredPosts }
return <Suspense fallback={<Loading />}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
/**

28
pages/tag/[tag]/index.js
View File

@@ -1,29 +1,15 @@
import { useGlobal } from '@/lib/global'
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutTag'
/**
* 加载默认主题
* 标签下的文章列表
* @param {*} props
* @returns
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Tag = props => {
const { theme } = useGlobal()
const { locale } = useGlobal()
const { tag, siteInfo } = props
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const { tag, siteInfo, Layout } = props
const meta = {
title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
@@ -34,9 +20,7 @@ const Tag = props => {
}
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
export async function getStaticProps({ params: { tag } }) {

25
pages/tag/[tag]/page/[page].js
View File

@@ -1,29 +1,10 @@
import { useGlobal } from '@/lib/global'
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutTag'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Tag = props => {
const { theme } = useGlobal()
const { locale } = useGlobal()
const { tag, siteInfo } = props
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const { tag, siteInfo, Layout } = props
const meta = {
title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
@@ -34,9 +15,7 @@ const Tag = props => {
}
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
export async function getStaticProps({ params: { tag, page } }) {

24
pages/tag/index.js
View File

@@ -1,14 +1,6 @@
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { Suspense, useEffect, useState } from 'react'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import Loading from '@/components/Loading'
const layout = 'LayoutTagIndex'
/**
* 默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 标签首页
@@ -17,17 +9,7 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
*/
const TagIndex = props => {
const { locale } = useGlobal()
const { siteInfo } = props
const { theme } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const { siteInfo, Layout } = props
const meta = {
title: `${locale.COMMON.TAGS} | ${siteInfo?.title}`,
@@ -38,9 +20,7 @@ const TagIndex = props => {
}
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Layout {...props} />
}
export async function getStaticProps() {