重构优化主题异步加载

2026-05-13 23:16:47 +00:00 · 2023-06-07 15:39:41 +08:00
parent 9247c4d308
commit 00d32c81e0
107 changed files with 467 additions and 338 deletions
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -6,9 +6,10 @@ import { useEffect } from 'react'

 export default function Live2D() {
  const { theme, switchTheme } = useGlobal()
+  const showPet = JSON.parse(BLOG.WIDGET_PET)

  useEffect(() => {
-    if (BLOG.WIDGET_PET) {
+    if (showPet) {
      Promise.all([
        loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
      ]).then((e) => {
@@ -17,7 +18,7 @@ export default function Live2D() {
          try {
            loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
          } catch (error) {
-
+            console.error('读取PET模型', error)
          }
        }
      })
@@ -30,7 +31,7 @@ export default function Live2D() {
    }
  }

-  if (!BLOG.WIDGET_PET || !JSON.parse(BLOG.WIDGET_PET)) {
+  if (!showPet) {
    return <></>
  }

--- a/components/Loading.js
+++ b/components/Loading.js
@@ -1,21 +1,22 @@
-import { useGlobal } from '@/lib/global'
-import { useEffect } from 'react'

 /**
 * 主题文件被加载出之前的占位符
 * @returns
 */
 const Loading = (props) => {
-  const { theme, setOnReading } = useGlobal()
+//   const { theme, setOnReading } = useGlobal()
+  //   console.log('开启遮罩')
+  //   setOnReading(true)

-  useEffect(() => {
-    // 返回一个函数，在组件销毁时设置 onReading 为 false
-    return () => {
-      setTimeout(() => {
-        setOnReading(false)
-      }, 500)
-    }
-  }, [theme])
+  //   useEffect(() => {
+  //     // 返回一个函数，在组件销毁时设置 onReading 为 false
+  //     return () => {
+  //       setTimeout(() => {
+  //         console.log('关闭遮罩')
+  //         setOnReading(false)
+  //       }, 500)
+  //     }
+  //   })

  return <div className="w-screen h-screen flex justify-center items-center bg-black">
       <i className='mr-5 fas fa-spinner animate-spin text-2xl' />
--- a/components/LoadingCover.js
+++ b/components/LoadingCover.js
@@ -1,15 +1,13 @@

 /**
- * 加载主题文件时的全局遮罩
+ * 加载文件时的全局遮罩
 * @returns
 */
 const LoadingCover = (props) => {
  const { onReading } = props

-  return <>
-        <div className={`${onReading ? 'opacity-90' : 'opacity-0'} transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner w-screen h-screen flex justify-center items-center bg-gray-600 dark:bg-black text-white shadow-text`}>
-            <h1 className="text-2xl"><i className='mr-5 fas fa-spinner animate-spin' /></h1>
-        </div>
-    </>
+  return <div className={`${onReading ? 'opacity-90' : 'opacity-0'} transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner w-screen h-screen flex justify-center items-center bg-gray-400 dark:bg-black text-white shadow-text`}>
+        <i className='text-2xl mr-5 fas fa-spinner animate-spin' />
+    </div>
 }
 export default LoadingCover
--- a/lib/global.js
+++ b/lib/global.js
@@ -33,6 +33,8 @@ export function GlobalContextProvider({ children }) {
      const handleBeforeUnload = (event) => {
        setOnReading(true)
      }
+      // 监听页面元素加载完
+      setOnReading(false)
      window.addEventListener('beforeunload', handleBeforeUnload)
      return () => {
        window.removeEventListener('beforeunload', handleBeforeUnload)
--- 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() {
--- a/themes/example/Layout404.js
+++ b/themes/example/Layout404.js
@@ -5,3 +5,5 @@ export const Layout404 = (props) => {
        404 Not found.
    </LayoutBase>
 }
+
+export default Layout404
--- a/themes/example/LayoutArchive.js
+++ b/themes/example/LayoutArchive.js
@@ -43,3 +43,5 @@ export const LayoutArchive = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutArchive
--- a/themes/example/LayoutCategory.js
+++ b/themes/example/LayoutCategory.js
@@ -8,3 +8,5 @@ export const LayoutCategory = props => {
       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
    </LayoutBase >
 }
+
+export default LayoutCategory
--- a/themes/example/LayoutCategoryIndex.js
+++ b/themes/example/LayoutCategoryIndex.js
@@ -24,3 +24,5 @@ export const LayoutCategoryIndex = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutCategoryIndex
--- a/themes/example/LayoutIndex.js
+++ b/themes/example/LayoutIndex.js
@@ -11,3 +11,5 @@ export const LayoutIndex = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutIndex
--- a/themes/example/LayoutPage.js
+++ b/themes/example/LayoutPage.js
@@ -8,3 +8,5 @@ export const LayoutPage = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutPage
--- a/themes/example/LayoutSlug.js
+++ b/themes/example/LayoutSlug.js
@@ -29,3 +29,5 @@ export const LayoutSlug = props => {
        </LayoutBase>
  )
 }
+
+export default LayoutSlug
--- a/themes/example/LayoutTag.js
+++ b/themes/example/LayoutTag.js
@@ -8,3 +8,5 @@ export const LayoutTag = props => {
       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
    </LayoutBase >
 }
+
+export default LayoutTag
--- a/themes/example/LayoutTagIndex.js
+++ b/themes/example/LayoutTagIndex.js
@@ -27,3 +27,5 @@ export const LayoutTagIndex = (props) => {
            </div>   </LayoutBase>
  )
 }
+
+export default LayoutTagIndex
--- a/themes/example/index.js
+++ b/themes/example/index.js
@@ -1,25 +0,0 @@
-import CONFIG_EXAMPLE from './config_example'
-import { LayoutIndex } from './LayoutIndex'
-import { LayoutSearch } from './LayoutSearch'
-import { LayoutArchive } from './LayoutArchive'
-import { LayoutSlug } from './LayoutSlug'
-import { Layout404 } from './Layout404'
-import { LayoutCategory } from './LayoutCategory'
-import { LayoutCategoryIndex } from './LayoutCategoryIndex'
-import { LayoutPage } from './LayoutPage'
-import { LayoutTag } from './LayoutTag'
-import { LayoutTagIndex } from './LayoutTagIndex'
-
-export {
-  CONFIG_EXAMPLE as THEME_CONFIG,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
-  Layout404,
-  LayoutCategory,
-  LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
-  LayoutTagIndex
-}
--- a/themes/fukasawa/Layout404.js
+++ b/themes/fukasawa/Layout404.js
@@ -3,3 +3,5 @@ import LayoutBase from './LayoutBase'
 export const Layout404 = props => {
  return <LayoutBase {...props}>404</LayoutBase>
 }
+
+export default Layout404
--- a/themes/fukasawa/LayoutArchive.js
+++ b/themes/fukasawa/LayoutArchive.js
@@ -28,3 +28,5 @@ export const LayoutArchive = (props) => {
      </div>
  </LayoutBase>
 }
+
+export default LayoutArchive
--- a/themes/fukasawa/LayoutCategory.js
+++ b/themes/fukasawa/LayoutCategory.js
@@ -8,3 +8,5 @@ export const LayoutCategory = props => {
    {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props}/>}
  </LayoutBase>
 }
+
+export default LayoutCategory
--- a/themes/fukasawa/LayoutCategoryIndex.js
+++ b/themes/fukasawa/LayoutCategoryIndex.js
@@ -31,3 +31,5 @@ export const LayoutCategoryIndex = (props) => {
    </LayoutBase>
  )
 }
+
+export default LayoutCategoryIndex
--- a/themes/fukasawa/LayoutIndex.js
+++ b/themes/fukasawa/LayoutIndex.js
@@ -8,3 +8,5 @@ export const LayoutIndex = (props) => {
    {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props}/>}
  </LayoutBase>
 }
+
+export default LayoutIndex
--- a/themes/fukasawa/LayoutPage.js
+++ b/themes/fukasawa/LayoutPage.js
@@ -8,3 +8,5 @@ export const LayoutPage = (props) => {

  </LayoutBase>
 }
+
+export default LayoutPage
--- a/themes/fukasawa/LayoutSearch.js
+++ b/themes/fukasawa/LayoutSearch.js
@@ -28,3 +28,5 @@ export const LayoutSearch = (props) => {
    {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props}/>}
  </LayoutBase>
 }
+
+export default LayoutSearch
--- a/themes/fukasawa/LayoutSlug.js
+++ b/themes/fukasawa/LayoutSlug.js
@@ -11,3 +11,5 @@ export const LayoutSlug = (props) => {
    </LayoutBase>
  )
 }
+
+export default LayoutSlug
--- a/themes/fukasawa/LayoutTag.js
+++ b/themes/fukasawa/LayoutTag.js
@@ -1,7 +1,6 @@
 import BLOG from '@/blog.config'
 import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
-import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'

 export const LayoutTag = (props) => {
@@ -9,3 +8,5 @@ export const LayoutTag = (props) => {
    {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props}/>}
  </LayoutBase>
 }
+
+export default LayoutTag
--- a/themes/fukasawa/LayoutTagIndex.js
+++ b/themes/fukasawa/LayoutTagIndex.js
@@ -1,5 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import TagItem from './components/TagItem'
 import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'

@@ -21,3 +20,5 @@ export const LayoutTagIndex = (props) => {
    </div>
  </LayoutBase>
 }
+
+export default LayoutTagIndex
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -1,25 +0,0 @@
-import CONFIG_FUKA from './config_fuka'
-import { LayoutIndex } from './LayoutIndex'
-import { LayoutSearch } from './LayoutSearch'
-import { LayoutArchive } from './LayoutArchive'
-import { LayoutSlug } from './LayoutSlug'
-import { Layout404 } from './Layout404'
-import { LayoutCategory } from './LayoutCategory'
-import { LayoutCategoryIndex } from './LayoutCategoryIndex'
-import { LayoutPage } from './LayoutPage'
-import { LayoutTag } from './LayoutTag'
-import { LayoutTagIndex } from './LayoutTagIndex'
-
-export {
-  CONFIG_FUKA as THEME_CONFIG,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
-  Layout404,
-  LayoutCategory,
-  LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
-  LayoutTagIndex
-}
--- a/themes/hexo/Layout404.js
+++ b/themes/hexo/Layout404.js
@@ -30,3 +30,4 @@ export const Layout404 = props => {
    </LayoutBase>
  )
 }
+export default Layout404
--- a/themes/hexo/LayoutArchive.js
+++ b/themes/hexo/LayoutArchive.js
@@ -32,3 +32,5 @@ export const LayoutArchive = (props) => {
    </Card>
  </LayoutBase>
 }
+
+export default LayoutArchive
--- a/themes/hexo/LayoutCategory.js
+++ b/themes/hexo/LayoutCategory.js
@@ -13,3 +13,5 @@ export const LayoutCategory = props => {
        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
    </LayoutBase>
 }
+
+export default LayoutCategory
--- a/themes/hexo/LayoutCategoryIndex.js
+++ b/themes/hexo/LayoutCategoryIndex.js
@@ -37,3 +37,5 @@ export const LayoutCategoryIndex = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutCategoryIndex
--- a/themes/hexo/LayoutIndex.js
+++ b/themes/hexo/LayoutIndex.js
@@ -12,3 +12,5 @@ export const LayoutIndex = (props) => {
    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
  </LayoutBase>
 }
+
+export default LayoutIndex
--- a/themes/hexo/LayoutPage.js
+++ b/themes/hexo/LayoutPage.js
@@ -6,3 +6,5 @@ export const LayoutPage = (props) => {
      <BlogPostListPage {...props}/>
  </LayoutBase>
 }
+
+export default LayoutPage
--- a/themes/hexo/LayoutSearch.js
+++ b/themes/hexo/LayoutSearch.js
@@ -97,3 +97,5 @@ export const LayoutSearch = props => {
      </LayoutBase>
  )
 }
+
+export default LayoutSearch
--- a/themes/hexo/LayoutSlug.js
+++ b/themes/hexo/LayoutSlug.js
@@ -93,3 +93,5 @@ export const LayoutSlug = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutSlug
--- a/themes/hexo/LayoutTag.js
+++ b/themes/hexo/LayoutTag.js
@@ -30,3 +30,5 @@ export const LayoutTag = (props) => {
        </LayoutBase>
  )
 }
+
+export default LayoutTag
--- a/themes/hexo/LayoutTagIndex.js
+++ b/themes/hexo/LayoutTagIndex.js
@@ -26,3 +26,5 @@ export const LayoutTagIndex = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutTagIndex
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -1,25 +0,0 @@
-import CONFIG_HEXO from './config_hexo'
-import { LayoutIndex } from './LayoutIndex'
-import { LayoutSearch } from './LayoutSearch'
-import { LayoutArchive } from './LayoutArchive'
-import { LayoutSlug } from './LayoutSlug'
-import { Layout404 } from './Layout404'
-import { LayoutCategory } from './LayoutCategory'
-import { LayoutCategoryIndex } from './LayoutCategoryIndex'
-import { LayoutPage } from './LayoutPage'
-import { LayoutTag } from './LayoutTag'
-import { LayoutTagIndex } from './LayoutTagIndex'
-
-export {
-  CONFIG_HEXO as THEME_CONFIG,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
-  Layout404,
-  LayoutCategory,
-  LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
-  LayoutTagIndex
-}
--- a/themes/matery/Layout404.js
+++ b/themes/matery/Layout404.js
@@ -30,3 +30,5 @@ export const Layout404 = props => {
    </LayoutBase>
  )
 }
+
+export default Layout404
--- a/themes/matery/LayoutArchive.js
+++ b/themes/matery/LayoutArchive.js
@@ -32,3 +32,5 @@ export const LayoutArchive = (props) => {
    </Card>
  </LayoutBase>
 }
+
+export default LayoutArchive
--- a/themes/matery/LayoutCategory.js
+++ b/themes/matery/LayoutCategory.js
@@ -36,3 +36,5 @@ export const LayoutCategory = props => {
        </LayoutBase>
  )
 }
+
+export default LayoutCategory
--- a/themes/matery/LayoutCategoryIndex.js
+++ b/themes/matery/LayoutCategoryIndex.js
@@ -30,3 +30,5 @@ export const LayoutCategoryIndex = props => {
      </LayoutBase>
  )
 }
+
+export default LayoutCategoryIndex
--- a/themes/matery/LayoutIndex.js
+++ b/themes/matery/LayoutIndex.js
@@ -12,3 +12,5 @@ export const LayoutIndex = (props) => {
    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
  </LayoutBase>
 }
+
+export default LayoutIndex
--- a/themes/matery/LayoutPage.js
+++ b/themes/matery/LayoutPage.js
@@ -6,3 +6,5 @@ export const LayoutPage = (props) => {
      <BlogPostListPage {...props}/>
  </LayoutBase>
 }
+
+export default LayoutPage
--- a/themes/matery/LayoutSearch.js
+++ b/themes/matery/LayoutSearch.js
@@ -97,3 +97,5 @@ export const LayoutSearch = props => {
      </LayoutBase>
  )
 }
+
+export default LayoutSearch
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -128,3 +128,5 @@ export const LayoutSlug = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutSlug
--- a/themes/matery/LayoutTag.js
+++ b/themes/matery/LayoutTag.js
@@ -6,7 +6,6 @@ import React from 'react'
 import HeaderArticle from './components/HeaderArticle'
 import { useGlobal } from '@/lib/global'
 import TagItemMiddle from './components/TagItemMiddle'
-import TagItemMini from './components/TagItemMini'

 export const LayoutTag = (props) => {
  const { tagOptions, tag } = props
@@ -41,3 +40,5 @@ export const LayoutTag = (props) => {

    </LayoutBase>
 }
+
+export default LayoutTag
--- a/themes/matery/LayoutTagIndex.js
+++ b/themes/matery/LayoutTagIndex.js
@@ -1,7 +1,6 @@
 import { useGlobal } from '@/lib/global'
 import HeaderArticle from './components/HeaderArticle'
 import TagItemMiddle from './components/TagItemMiddle'
-import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'

 export const LayoutTagIndex = props => {
@@ -31,3 +30,5 @@ export const LayoutTagIndex = props => {
        </LayoutBase>
  )
 }
+
+export default LayoutTagIndex
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -1,25 +0,0 @@
-import CONFIG_MATERY from './config_matery'
-import { LayoutIndex } from './LayoutIndex'
-import { LayoutSearch } from './LayoutSearch'
-import { LayoutArchive } from './LayoutArchive'
-import { LayoutSlug } from './LayoutSlug'
-import { Layout404 } from './Layout404'
-import { LayoutCategory } from './LayoutCategory'
-import { LayoutCategoryIndex } from './LayoutCategoryIndex'
-import { LayoutPage } from './LayoutPage'
-import { LayoutTag } from './LayoutTag'
-import { LayoutTagIndex } from './LayoutTagIndex'
-
-export {
-  CONFIG_MATERY as THEME_CONFIG,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
-  Layout404,
-  LayoutCategory,
-  LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
-  LayoutTagIndex
-}
--- a/themes/medium/Layout404.js
+++ b/themes/medium/Layout404.js
@@ -5,3 +5,5 @@ export const Layout404 = props => {
   <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
  </LayoutBase>
 }
+
+export default Layout404
--- a/themes/medium/LayoutArchive.js
+++ b/themes/medium/LayoutArchive.js
@@ -45,3 +45,5 @@ export const LayoutArchive = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutArchive
--- a/themes/medium/LayoutCategory.js
+++ b/themes/medium/LayoutCategory.js
@@ -11,3 +11,5 @@ export const LayoutCategory = props => {
        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
    </LayoutBase>
 }
+
+export default LayoutCategory
--- a/themes/medium/LayoutCategoryIndex.js
+++ b/themes/medium/LayoutCategoryIndex.js
@@ -31,3 +31,4 @@ export const LayoutCategoryIndex = (props) => {
    </LayoutBase>
  )
 }
+export default LayoutCategoryIndex
--- a/themes/medium/LayoutIndex.js
+++ b/themes/medium/LayoutIndex.js
@@ -8,3 +8,5 @@ export const LayoutIndex = (props) => {
    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
  </LayoutBase>
 }
+
+export default LayoutIndex
--- a/themes/medium/LayoutPage.js
+++ b/themes/medium/LayoutPage.js
@@ -6,3 +6,5 @@ export const LayoutPage = (props) => {
      <BlogPostListPage {...props} />
  </LayoutBase>
 }
+
+export default LayoutPage
--- a/themes/medium/LayoutSearch.js
+++ b/themes/medium/LayoutSearch.js
@@ -49,3 +49,5 @@ export const LayoutSearch = (props) => {
    </div>}
  </LayoutBase>
 }
+
+export default LayoutSearch
--- a/themes/medium/LayoutSlug.js
+++ b/themes/medium/LayoutSlug.js
@@ -106,3 +106,5 @@ export const LayoutSlug = props => {
        </LayoutBase>
  )
 }
+
+export default LayoutSlug
--- a/themes/medium/LayoutTag.js
+++ b/themes/medium/LayoutTag.js
@@ -11,3 +11,5 @@ export const LayoutTag = (props) => {
        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
   </LayoutBase>
 }
+
+export default LayoutTag
--- a/themes/medium/LayoutTagIndex.js
+++ b/themes/medium/LayoutTagIndex.js
@@ -25,3 +25,5 @@ export const LayoutTagIndex = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutTagIndex
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -1,25 +0,0 @@
-import CONFIG_MEDIUM from './config_medium'
-import { LayoutIndex } from './LayoutIndex'
-import { LayoutSearch } from './LayoutSearch'
-import { LayoutArchive } from './LayoutArchive'
-import { LayoutSlug } from './LayoutSlug'
-import { Layout404 } from './Layout404'
-import { LayoutCategory } from './LayoutCategory'
-import { LayoutCategoryIndex } from './LayoutCategoryIndex'
-import { LayoutPage } from './LayoutPage'
-import { LayoutTag } from './LayoutTag'
-import { LayoutTagIndex } from './LayoutTagIndex'
-
-export {
-  CONFIG_MEDIUM as THEME_CONFIG,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
-  Layout404,
-  LayoutCategory,
-  LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
-  LayoutTagIndex
-}
--- a/themes/next/Layout404.js
+++ b/themes/next/Layout404.js
@@ -29,3 +29,4 @@ export const Layout404 = props => {
    </div>
  </LayoutBase>
 }
+export default Layout404
--- a/themes/next/LayoutArchive.js
+++ b/themes/next/LayoutArchive.js
@@ -31,3 +31,5 @@ export const LayoutArchive = (props) => {
    </LayoutBase>
  )
 }
+
+export default LayoutArchive
--- a/themes/next/LayoutCategory.js
+++ b/themes/next/LayoutCategory.js
@@ -19,3 +19,5 @@ export const LayoutCategory = (props) => {
    </div>
  </LayoutBase>
 }
+
+export default LayoutCategory
--- a/themes/next/LayoutCategoryIndex.js
+++ b/themes/next/LayoutCategoryIndex.js
@@ -31,3 +31,5 @@ export const LayoutCategoryIndex = (props) => {
    </LayoutBase>
  )
 }
+
+export default LayoutCategoryIndex
--- a/themes/next/LayoutIndex.js
+++ b/themes/next/LayoutIndex.js
@@ -18,7 +18,10 @@ export const LayoutIndex = (props) => {
  >
    {BLOG.POST_LIST_STYLE !== 'page'
      ? <BlogPostListScroll {...props} showSummary={true} />
-      : <BlogPostListPage {...props} />
+      : <BlogPostListPage
+export default LayoutIndex{...props} />
    }
  </LayoutBase>
 }
+
+export default LayoutIndex
--- a/themes/next/LayoutPage.js
+++ b/themes/next/LayoutPage.js
@@ -15,3 +15,5 @@ export const LayoutPage = (props) => {
    </LayoutBase>
  )
 }
+
+export default LayoutPage
--- a/themes/next/LayoutSearch.js
+++ b/themes/next/LayoutSearch.js
@@ -37,3 +37,5 @@ export const LayoutSearch = (props) => {
    </LayoutBase>
  )
 }
+
+export default LayoutSearch
--- a/themes/next/LayoutSlug.js
+++ b/themes/next/LayoutSlug.js
@@ -40,3 +40,5 @@ export const LayoutSlug = (props) => {
    </LayoutBase>
  )
 }
+
+export default LayoutSlug
--- a/themes/next/LayoutTag.js
+++ b/themes/next/LayoutTag.js
@@ -20,3 +20,5 @@ export const LayoutTag = (props) => {
        </div>
    </LayoutBase>
 }
+
+export default LayoutTag
--- a/themes/next/LayoutTagIndex.js
+++ b/themes/next/LayoutTagIndex.js
@@ -16,3 +16,5 @@ export const LayoutTagIndex = (props) => {
    </div>
  </LayoutBase>
 }
+
+export default LayoutTagIndex
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -20,9 +20,10 @@ import NotionIcon from '@/components/NotionIcon'
 * @returns
 */
 export default function ArticleDetail(props) {
-  const { post, recommendPosts, prev, next, showArticleInfo } = props
+  const { post, recommendPosts, prev, next } = props
  const url = BLOG.LINK + useRouter().asPath
  const { locale } = useGlobal()
+  const showArticleInfo = CONFIG_NEXT.ARTICLE_INFO
  const date = formatDate(post?.date?.start_date || post?.createdTime, locale.LOCALE)

  return (
--- a/themes/next/config_next.js
+++ b/themes/next/config_next.js
@@ -31,7 +31,8 @@ const CONFIG_NEXT = {
  WIDGET_TOC: true, // 移动端显示悬浮目录

  ARTICLE_RELATE_POSTS: true, // 相关文章推荐
-  ARTICLE_COPYRIGHT: true // 文章版权声明
+  ARTICLE_COPYRIGHT: true, // 文章版权声明
+  ARTICLE_INFO: true // 显示文章信息

 }

--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -1,25 +0,0 @@
-import CONFIG_NEXT from './config_next'
-import { LayoutIndex } from './LayoutIndex'
-import { LayoutSearch } from './LayoutSearch'
-import { LayoutArchive } from './LayoutArchive'
-import { LayoutSlug } from './LayoutSlug'
-import { Layout404 } from './Layout404'
-import { LayoutCategory } from './LayoutCategory'
-import { LayoutCategoryIndex } from './LayoutCategoryIndex'
-import { LayoutPage } from './LayoutPage'
-import { LayoutTag } from './LayoutTag'
-import { LayoutTagIndex } from './LayoutTagIndex'
-
-export {
-  CONFIG_NEXT as THEME_CONFIG,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
-  Layout404,
-  LayoutCategory,
-  LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
-  LayoutTagIndex
-}
--- a/themes/nobelium/Layout404.js
+++ b/themes/nobelium/Layout404.js
@@ -5,3 +5,5 @@ export const Layout404 = (props) => {
        404 Not found.
    </LayoutBase>
 }
+
+export default Layout404
--- a/themes/nobelium/LayoutArchive.js
+++ b/themes/nobelium/LayoutArchive.js
@@ -43,3 +43,5 @@ export const LayoutArchive = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutArchive
--- a/themes/nobelium/LayoutCategory.js
+++ b/themes/nobelium/LayoutCategory.js
@@ -8,3 +8,5 @@ export const LayoutCategory = props => {
       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
    </LayoutBase >
 }
+
+export default LayoutCategory
--- a/themes/nobelium/LayoutCategoryIndex.js
+++ b/themes/nobelium/LayoutCategoryIndex.js
@@ -25,3 +25,5 @@ export const LayoutCategoryIndex = (props) => {
    </LayoutBase>
  )
 }
+
+export default LayoutCategoryIndex
--- a/themes/nobelium/LayoutIndex.js
+++ b/themes/nobelium/LayoutIndex.js
@@ -13,3 +13,5 @@ export const LayoutIndex = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutIndex
--- a/themes/nobelium/LayoutPage.js
+++ b/themes/nobelium/LayoutPage.js
@@ -8,3 +8,5 @@ export const LayoutPage = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutPage
--- a/themes/nobelium/LayoutSearch.js
+++ b/themes/nobelium/LayoutSearch.js
@@ -54,3 +54,5 @@ export const LayoutSearch = props => {

    </LayoutBase>
 }
+
+export default LayoutSearch
--- a/themes/nobelium/LayoutSlug.js
+++ b/themes/nobelium/LayoutSlug.js
@@ -31,3 +31,5 @@ export const LayoutSlug = props => {
        </LayoutBase>
  )
 }
+
+export default LayoutSlug
--- a/themes/nobelium/LayoutTag.js
+++ b/themes/nobelium/LayoutTag.js
@@ -55,3 +55,5 @@ export const LayoutTag = props => {
      </div>
    </LayoutBase >
 }
+
+export default LayoutTag
--- a/themes/nobelium/LayoutTagIndex.js
+++ b/themes/nobelium/LayoutTagIndex.js
@@ -27,3 +27,5 @@ export const LayoutTagIndex = (props) => {
            </div>   </LayoutBase>
  )
 }
+
+export default LayoutTagIndex
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -1,25 +0,0 @@
-import CONFIG_NOBELIUM from './config_nobelium'
-import { LayoutIndex } from './LayoutIndex'
-import { LayoutSearch } from './LayoutSearch'
-import { LayoutArchive } from './LayoutArchive'
-import { LayoutSlug } from './LayoutSlug'
-import { Layout404 } from './Layout404'
-import { LayoutCategory } from './LayoutCategory'
-import { LayoutCategoryIndex } from './LayoutCategoryIndex'
-import { LayoutPage } from './LayoutPage'
-import { LayoutTag } from './LayoutTag'
-import { LayoutTagIndex } from './LayoutTagIndex'
-
-export {
-  CONFIG_NOBELIUM as THEME_CONFIG,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
-  Layout404,
-  LayoutCategory,
-  LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
-  LayoutTagIndex
-}
--- a/themes/simple/Layout404.js
+++ b/themes/simple/Layout404.js
@@ -5,3 +5,5 @@ export const Layout404 = (props) => {
        404 Not found.
    </LayoutBase>
 }
+
+export default Layout404
--- a/themes/simple/LayoutArchive.js
+++ b/themes/simple/LayoutArchive.js
@@ -43,3 +43,5 @@ export const LayoutArchive = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutArchive
--- a/themes/simple/LayoutCategory.js
+++ b/themes/simple/LayoutCategory.js
@@ -8,3 +8,5 @@ export const LayoutCategory = props => {
       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
    </LayoutBase >
 }
+
+export default LayoutCategory
--- a/themes/simple/LayoutCategoryIndex.js
+++ b/themes/simple/LayoutCategoryIndex.js
@@ -24,3 +24,5 @@ export const LayoutCategoryIndex = props => {
    </LayoutBase>
  )
 }
+
+export default LayoutCategoryIndex
--- a/Show More
+++ b/Show More