animation-loading

pages/404.js

@@ -1,6 +1,15 @@
 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
@@ -10,8 +19,20 @@ import dynamic from 'next/dynamic'
 const NoFound = props => {
   const { theme, siteInfo } = useGlobal()
   const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
-  const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`))
-  return <Layout404 {...props} meta={meta}/>
+  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>
 }
 
 export async function getStaticProps () {

pages/[...slug].js

@@ -12,10 +12,12 @@ 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}/LayoutSlug`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 根据notion的slug访问页面
@@ -31,7 +33,8 @@ const Slug = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSlug`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])

pages/archive/index.js

@@ -3,13 +3,14 @@ import React, { Suspense, useEffect, useState } 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}/LayoutArchive`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const ArchiveIndex = props => {
   const { siteInfo } = props
@@ -18,7 +19,8 @@ const ArchiveIndex = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutArchive`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])

pages/category/[category]/index.js

@@ -3,13 +3,13 @@ import React, { Suspense, useEffect, useState } 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}/LayoutCategory`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 分类页
@@ -20,10 +20,12 @@ export default function Category(props) {
   const { siteInfo } = props
   const { locale, theme } = useGlobal()
   const [Layout, setLayout] = useState(DefaultLayout)
+
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategory`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])

pages/category/[category]/page/[page].js

@@ -3,13 +3,14 @@ import React, { Suspense, useEffect, useState } 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}/LayoutCategory`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 分类页
@@ -20,12 +21,12 @@ export default function Category(props) {
   const { theme } = useGlobal()
   const { siteInfo } = props
   const { locale } = useGlobal()
-
   const [Layout, setLayout] = useState(DefaultLayout)
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategory`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])

pages/category/index.js

@@ -3,13 +3,14 @@ import React, { Suspense, useEffect, useState } 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}/LayoutCategoryIndex`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 分类首页
@@ -25,7 +26,8 @@ export default function Category(props) {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])

pages/index.js

@@ -8,10 +8,12 @@ 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}/LayoutIndex`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 首页布局
@@ -21,17 +23,19 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutIndex`)
 const Index = props => {
   // 动态切换主题
   const { theme } = useGlobal()
-  const [Layout, setLayoutIndex] = useState(DefaultLayout)
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayoutIndex(dynamic(() => import(`@/themes/${theme}/LayoutIndex`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Suspense fallback={<Loading />}>
+        <Layout {...props} />
+    </Suspense>
 }
 
 /**

pages/page/[page].js

@@ -5,10 +5,13 @@ 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}/LayoutPage`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 文章列表分页
@@ -22,7 +25,8 @@ const Page = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutPage`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
@@ -37,9 +41,9 @@ const Page = props => {
 
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Suspense fallback={<Loading />}>
+        <Layout {...props} />
+    </Suspense>
 }
 
 export async function getStaticPaths() {

pages/search/[keyword]/index.js

@@ -6,10 +6,11 @@ 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}/LayoutSearch`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Index = props => {
   const { keyword, siteInfo } = props
@@ -18,7 +19,8 @@ const Index = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])

pages/search/[keyword]/page/[page].js

@@ -6,10 +6,11 @@ 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}/LayoutSearch`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Index = props => {
   const { keyword, siteInfo } = props
@@ -18,10 +19,12 @@ const Index = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
+
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
     description: siteInfo?.title,

pages/search/index.js

@@ -5,27 +5,29 @@ 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}/LayoutSearch`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Search = props => {
   const { posts, siteInfo } = props
-  const { theme } = useGlobal()
+  const { theme, locale } = useGlobal()
   const [Layout, setLayout] = useState(DefaultLayout)
+  const router = useRouter()
+  const keyword = getSearchKey(router)
 
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
 
-  const router = useRouter()
   let filteredPosts
-  const keyword = getSearchKey(router)
   // 静态过滤
   if (keyword) {
     filteredPosts = posts.filter(post => {
@@ -39,7 +41,6 @@ const Search = props => {
     filteredPosts = []
   }
 
-  const { locale } = useGlobal()
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
     description: siteInfo?.description,
@@ -50,9 +51,9 @@ const Search = props => {
 
   props = { ...props, meta, posts: { filteredPosts } }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Suspense fallback={<Loading />}>
+        <Layout {...props} />
+    </Suspense>
 }
 
 /**

pages/tag/[tag]/index.js

@@ -4,11 +4,11 @@ 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}/LayoutTag`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Tag = props => {
   const { theme } = useGlobal()
@@ -19,7 +19,8 @@ const Tag = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTag`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])

pages/tag/[tag]/page/[page].js

@@ -5,10 +5,11 @@ 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}/LayoutTag`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Tag = props => {
   const { theme } = useGlobal()
@@ -18,7 +19,8 @@ const Tag = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTag`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])

pages/tag/index.js

@@ -4,10 +4,11 @@ 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}/LayoutTagIndex`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 标签首页
@@ -22,7 +23,8 @@ const TagIndex = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])