重构优化主题异步加载

2026-06-06 23:16:52 +00:00 · 2023-06-07 15:39:41 +08:00
parent 9247c4d308
commit 00d32c81e0
107 changed files with 467 additions and 338 deletions
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,7 +1,6 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
-import Loading from '@/components/Loading'

 /**
 * 404
@@ -11,7 +10,7 @@ import Loading from '@/components/Loading'
 const NoFound = props => {
  const { theme, siteInfo } = useGlobal()
  const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
-  const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
+  const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`))
  return <Layout404 {...props} meta={meta}/>
 }

--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
-import { useEffect, useState } from 'react'
+import { Suspense, useEffect, useState } from 'react'
 import { idToUuid } from 'notion-utils'
 import { useRouter } from 'next/router'
 import { isBrowser } from '@/lib/utils'
@@ -12,6 +12,11 @@ import md5 from 'js-md5'
 import dynamic from 'next/dynamic'
 import Loading from '@/components/Loading'

+/**
+ * 懒加载默认主题
+ */
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSlug`), { ssr: true })
+
 /**
 * 根据notion的slug访问页面
 * @param {*} props
@@ -21,10 +26,18 @@ const Slug = props => {
  const { theme, setOnLoading } = useGlobal()
  const { post, siteInfo } = props
  const router = useRouter()
+  const [Layout, setLayout] = useState(DefaultLayout)
+
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSlug`)))
+    }
+    loadLayout()
+  }, [theme])

  // 文章锁🔐
  const [lock, setLock] = useState(post?.password && post?.password !== '')
-  const LayoutSlug = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSlug }), { ssr: true, loading: () => <Loading /> })

  /**
     * 验证文章密码
@@ -39,9 +52,24 @@ const Slug = props => {
    return false
  }

+  // 文章加载
  useEffect(() => {
    setOnLoading(false)
+    // 404
+    if (!post) {
+      setTimeout(() => {
+        if (isBrowser()) {
+          const article = document.getElementById('notion-article')
+          if (!article) {
+            router.push('/404').then(() => {
+              console.warn('找不到页面', router.asPath)
+            })
+          }
+        }
+      }, 8 * 1000) // 404时长 8秒
+    }

+    // 文章加密
    if (post?.password && post?.password !== '') {
      setLock(true)
    } else {
@@ -56,37 +84,20 @@ const Slug = props => {
    })
  }, [post])

-  if (!post) {
-    setTimeout(() => {
-      if (isBrowser()) {
-        const article = document.getElementById('notion-article')
-        if (!article) {
-          router.push('/404').then(() => {
-            console.warn('找不到页面', router.asPath)
-          })
-        }
-      }
-    }, 8 * 1000) // 404时长 8秒
-    const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading`, image: siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE }
-
-    return <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
-  }
-
-  props = { ...props, lock, setLock, validPassword }
-
  const meta = {
-    title: `${post?.title} | ${siteInfo?.title}`,
+    title: post ? `${post?.title} | ${siteInfo?.title}` : `${props?.siteInfo?.title || BLOG.TITLE} | loading`,
    description: post?.summary,
    type: post?.type,
    slug: post?.slug,
-    image: post?.page_cover,
+    image: post?.page_cover || (siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE),
    category: post?.category?.[0],
    tags: post?.tags
  }
+  props = { ...props, lock, meta, setLock, validPassword }

-  return (
-      <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
-  )
+  return <Suspense fallback={<Loading />}>
+        <Layout {...props} />
+    </Suspense>
 }

 export async function getStaticPaths() {
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -1,13 +1,28 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React from 'react'
+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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutArchive`), { ssr: true })
+
 const ArchiveIndex = props => {
-  const { theme, locale } = useGlobal()
  const { siteInfo } = props
+  const { theme, locale } = useGlobal()
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutArchive`)))
+    }
+    loadLayout()
+  }, [theme])
+
  const meta = {
    title: `${locale.NAV.ARCHIVE} | ${siteInfo?.title}`,
    description: siteInfo?.description,
@@ -16,8 +31,11 @@ const ArchiveIndex = props => {
    type: 'website'
  }

-  const LayoutArchive = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutArchive }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutArchive {...props} meta={meta} />
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 export async function getStaticProps() {
--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -1,23 +1,33 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React from 'react'
+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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutCategory`), { ssr: true })
+
 /**
 * 分类页
 * @param {*} props
 * @returns
 */
 export default function Category(props) {
-  const { theme } = useGlobal()
-  const { siteInfo, posts } = props
-  const { locale } = useGlobal()
-  if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
-    return <Layout404 {...props} />
-  }
+  const { siteInfo } = props
+  const { locale, theme } = useGlobal()
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategory`)))
+    }
+    loadLayout()
+  }, [theme])
+
  const meta = {
    title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
      siteInfo?.title || ''
@@ -28,8 +38,11 @@ export default function Category(props) {
    type: 'website'
  }

-  const LayoutCategory = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutCategory {...props} meta={meta} />
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 export async function getStaticProps({ params: { category } }) {
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -1,10 +1,16 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React from 'react'
+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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutCategory`), { ssr: true })
+
 /**
 * 分类页
 * @param {*} props
@@ -12,12 +18,18 @@ import Loading from '@/components/Loading'
 */
 export default function Category(props) {
  const { theme } = useGlobal()
-  const { siteInfo, posts } = props
+  const { siteInfo } = props
  const { locale } = useGlobal()
-  if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
-    return <Layout404 {...props} />
-  }
+
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategory`)))
+    }
+    loadLayout()
+  }, [theme])
+
  const meta = {
    title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
      siteInfo?.title || ''
@@ -28,8 +40,11 @@ export default function Category(props) {
    type: 'website'
  }

-  const LayoutCategory = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutCategory {...props} meta={meta} />
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 export async function getStaticProps({ params: { category, page } }) {
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -1,9 +1,16 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React from 'react'
+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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutCategoryIndex`), { ssr: true })
+
 /**
 * 分类首页
 * @param {*} props
@@ -13,6 +20,16 @@ export default function Category(props) {
  const { theme } = useGlobal()
  const { locale } = useGlobal()
  const { siteInfo } = props
+  const [Layout, setLayout] = useState(DefaultLayout)
+
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`)))
+    }
+    loadLayout()
+  }, [theme])
+
  const meta = {
    title: `${locale.COMMON.CATEGORY} | ${siteInfo?.title}`,
    description: siteInfo?.description,
@@ -20,8 +37,11 @@ export default function Category(props) {
    slug: 'category',
    type: 'website'
  }
-  const LayoutCategoryIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategoryIndex }), { ssr: false })
-  return <LayoutCategoryIndex {...props} meta={meta} />
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 export async function getStaticProps() {
--- a/pages/index.js
+++ b/pages/index.js
@@ -11,9 +11,7 @@ import Loading from '@/components/Loading'
 /**
 * 懒加载默认主题
 */
-const DefaultLayoutIndex = dynamic(() => import(`@/themes/${BLOG.THEME}`).then(async (m) => {
-  return m.LayoutIndex
-}), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutIndex`), { ssr: true })

 /**
 * 首页布局
@@ -22,31 +20,19 @@ const DefaultLayoutIndex = dynamic(() => import(`@/themes/${BLOG.THEME}`).then(a
 */
 const Index = props => {
  // 动态切换主题
-  const { theme, setOnReading } = useGlobal()
-  const [LayoutIndex, setLayoutIndex] = useState(DefaultLayoutIndex)
-
+  const { theme } = useGlobal()
+  const [Layout, setLayoutIndex] = useState(DefaultLayout)
  useEffect(() => {
    const loadLayout = async () => {
-      try {
-        const NewLayoutIndex = await dynamic(() => import(`@/themes/${theme}`).then(async (m) => {
-          setOnReading(false)
-          return m.LayoutIndex
-        }))
-
-        setLayoutIndex(NewLayoutIndex)
-      } catch (error) {
-        console.error('Error while loading layout:', error)
-      }
+      setLayoutIndex(dynamic(() => import(`@/themes/${theme}/LayoutIndex`)))
    }
-
-    loadLayout()
+    console.log(loadLayout)
+    // loadLayout()
  }, [theme])

-  return (
-      <Suspense fallback={<Loading/>}>
-        <LayoutIndex {...props} />
-      </Suspense>
-  )
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 /**
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -3,24 +3,43 @@ 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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutPage`), { ssr: true })

+/**
+ * 文章列表分页
+ * @param {*} props
+ * @returns
+ */
 const Page = props => {
  const { theme } = useGlobal()
  const { siteInfo } = props
-  if (!siteInfo) {
-    return <></>
-  }
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutPage`)))
+    }
+    loadLayout()
+  }, [theme])
+
  const meta = {
-    title: `${props.page} | Page | ${siteInfo?.title}`,
+    title: `${props?.page} | Page | ${siteInfo?.title}`,
    description: siteInfo?.description,
    image: siteInfo?.pageCover,
    slug: 'page/' + props.page,
    type: 'website'
  }

-  const LayoutPage = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutPage }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutPage {...props} meta={meta} />
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 export async function getStaticPaths() {
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -3,11 +3,26 @@ 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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSearch`), { ssr: true })
+
 const Index = props => {
  const { keyword, siteInfo } = props
-  const { locale } = useGlobal()
+  const { locale, theme } = useGlobal()
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
+    }
+    loadLayout()
+  }, [theme])
+
  const meta = {
    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
    description: siteInfo?.title,
@@ -15,10 +30,12 @@ const Index = props => {
    slug: 'search/' + (keyword || ''),
    type: 'website'
  }
-  const { theme } = useGlobal()

-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutSearch {...props} currentSearch={keyword} meta={meta} />
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 /**
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -3,11 +3,25 @@ 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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSearch`), { ssr: true })
+
 const Index = props => {
  const { keyword, siteInfo } = props
-  const { locale } = useGlobal()
+  const { locale, theme } = useGlobal()
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
+    }
+    loadLayout()
+  }, [theme])
  const meta = {
    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
    description: siteInfo?.title,
@@ -15,9 +29,12 @@ const Index = props => {
    slug: 'search/' + (keyword || ''),
    type: 'website'
  }
-  const { theme } = useGlobal()
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutSearch {...props} currentSearch={keyword} meta={meta} />
+
+  props = { ...props, meta, currentSearch: keyword }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 /**
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -3,10 +3,26 @@ 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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSearch`), { ssr: true })

 const Search = props => {
  const { posts, siteInfo } = props
+  const { theme } = useGlobal()
+  const [Layout, setLayout] = useState(DefaultLayout)
+
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
+    }
+    loadLayout()
+  }, [theme])
+
  const router = useRouter()
  let filteredPosts
  const keyword = getSearchKey(router)
@@ -32,10 +48,11 @@ const Search = props => {
    type: 'website'
  }

-  const { theme } = useGlobal()
+  props = { ...props, meta, posts: { filteredPosts } }

-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutSearch {...props} posts={filteredPosts} currentSearch={keyword} meta={meta} />
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 /**
--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -2,17 +2,27 @@ 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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutTag`), { ssr: true })
+
 const Tag = props => {
  const { theme } = useGlobal()
  const { locale } = useGlobal()
-  const { tag, siteInfo, posts } = props
+  const { tag, siteInfo } = props
+  const [Layout, setLayout] = useState(DefaultLayout)

-  if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
-    return <Layout404 {...props}/>
-  }
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTag`)))
+    }
+    loadLayout()
+  }, [theme])

  const meta = {
    title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
@@ -21,8 +31,11 @@ const Tag = props => {
    slug: 'tag/' + tag,
    type: 'website'
  }
-  const LayoutTag = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutTag {...props} meta={meta} />
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 export async function getStaticProps({ params: { tag } }) {
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -2,17 +2,26 @@ 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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutTag`), { ssr: true })
+
 const Tag = props => {
  const { theme } = useGlobal()
  const { locale } = useGlobal()
-  const { tag, siteInfo, posts } = props
-
-  if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
-    return <Layout404 {...props}/>
-  }
+  const { tag, siteInfo } = props
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTag`)))
+    }
+    loadLayout()
+  }, [theme])

  const meta = {
    title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
@@ -21,8 +30,11 @@ const Tag = props => {
    slug: 'tag/' + tag,
    type: 'website'
  }
-  const LayoutTag = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutTag {...props} meta={meta} />
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 export async function getStaticProps({ params: { tag, page } }) {
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -1,9 +1,13 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React from 'react'
+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 DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutTagIndex`), { ssr: true })

 /**
 * 标签首页
@@ -11,9 +15,18 @@ import Loading from '@/components/Loading'
 * @returns
 */
 const TagIndex = props => {
-  const { theme } = useGlobal()
  const { locale } = useGlobal()
  const { siteInfo } = props
+  const { theme } = useGlobal()
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
+  useEffect(() => {
+    const loadLayout = async () => {
+      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`)))
+    }
+    loadLayout()
+  }, [theme])
+
  const meta = {
    title: `${locale.COMMON.TAGS} | ${siteInfo?.title}`,
    description: siteInfo?.description,
@@ -21,8 +34,11 @@ const TagIndex = props => {
    slug: 'tag',
    type: 'website'
  }
-  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutTagIndex {...props} meta={meta} />
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }

 export async function getStaticProps() {