diff --git a/components/DebugPanel.js b/components/DebugPanel.js
index 56fc8ce8..7765e827 100644
--- a/components/DebugPanel.js
+++ b/components/DebugPanel.js
@@ -1,18 +1,18 @@
 import BLOG from '@/blog.config'
-import * as ThemeMap from '@/themes'
 import { useEffect, useState } from 'react'
 import Select from './Select'
-import { ALL_THEME } from '@/themes'
 import { useGlobal } from '@/lib/global'
+import { ALL_THEME } from '@/lib/theme'
+
 /**
  *
  * @returns 调试面板
  */
 const DebugPanel = () => {
   const [show, setShow] = useState(false)
-  const { theme, changeTheme, switchTheme, locale } = useGlobal()
+  const { changeTheme, switchTheme, locale } = useGlobal()
   const [siteConfig, updateSiteConfig] = useState({})
-  const [themeConfig, updateThemeConfig] = useState({})
+  //   const [themeConfig, updateThemeConfig] = useState({})
   const [debugTheme, updateDebugTheme] = useState(BLOG.THEME)
 
   // 主题下拉框
@@ -21,7 +21,7 @@ const DebugPanel = () => {
   useEffect(() => {
     changeTheme(BLOG.THEME)
     updateSiteConfig(Object.assign({}, BLOG))
-    updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
+    // updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
   }, [])
 
   function toggleShow() {
@@ -30,13 +30,13 @@ const DebugPanel = () => {
 
   function handleChangeDebugTheme() {
     const newTheme = switchTheme()
-    updateThemeConfig(Object.assign({}, ThemeMap[newTheme].THEME_CONFIG))
+    // updateThemeConfig(Object.assign({}, ThemeMap[newTheme].THEME_CONFIG))
     updateDebugTheme(newTheme)
   }
 
   function handleUpdateDebugTheme(e) {
     changeTheme(e)
-    updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
+    // updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
     updateDebugTheme(e)
   }
 
@@ -90,7 +90,7 @@ const DebugPanel = () => {
                 </div>
 
                 <div>
-                    <div>
+                    {/* <div>
                         <div className="font-bold w-18 border-b my-2">
                             主题配置{`config_${debugTheme}.js`}:
                         </div>
@@ -106,7 +106,7 @@ const DebugPanel = () => {
                                 </div>
                             ))}
                         </div>
-                    </div>
+                    </div> */}
                     <div className="font-bold w-18 border-b my-2">
                         站点配置[blog.config.js]
                     </div>
diff --git a/components/Live2D.js b/components/Live2D.js
index ba4b9065..4826a11b 100644
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -9,12 +9,10 @@ export default function Live2D() {
 
   useEffect(() => {
     if (BLOG.WIDGET_PET) {
-      //   setLive2DLoaded(true)
-      //   console.log('加载宠物挂件')
       Promise.all([
         loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
       ]).then((e) => {
-        if (window?.loadlive2d) {
+        if (typeof window?.loadlive2d !== 'undefined') {
           // https://github.com/xiazeyu/live2d-widget-models
           loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
         }
diff --git a/components/Loading.js b/components/Loading.js
new file mode 100644
index 00000000..57ccf401
--- /dev/null
+++ b/components/Loading.js
@@ -0,0 +1,10 @@
+/**
+ * 主题文件被加载出之前的占位符
+ * @returns
+ */
+const Loading = () => {
+  return <div className="w-screen h-screen flex justify-center items-center">
+        <h1>Loading... <i className='ml-2 fas fa-spinner animate-spin' /></h1>
+    </div>
+}
+export default Loading
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 2540815c..d7143dc7 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -1,7 +1,7 @@
 import { useGlobal } from '@/lib/global'
-import { ALL_THEME } from '@/themes'
 import React from 'react'
 import { Draggable } from './Draggable'
+import { ALL_THEME } from '@/lib/theme'
 /**
  *
  * @returns 主题切换
diff --git a/jsconfig.json b/jsconfig.json
index f6f71d10..395f9ce0 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -4,6 +4,7 @@
     "paths": {
       "@/*": ["./*"],
       "@/components/*": ["components/*"],
+      "@/theme/*": ["theme/*"],
       "@/data/*": ["data/*"],
       "@/lib/*": ["lib/*"],
       "@/styles/*": ["styles/*"]
diff --git a/lib/global.js b/lib/global.js
index 6b6d86ce..a55a17b3 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -2,8 +2,7 @@ import { generateLocaleDict, initLocale } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
 import Router, { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
-import { initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
-import { ALL_THEME } from '@/themes'
+import { ALL_THEME, initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
 import NProgress from 'nprogress'
 
 const GlobalContext = createContext()
diff --git a/lib/theme.js b/lib/theme.js
index 0a4f7a12..4d34fc8a 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,8 +1,21 @@
 import cookie from 'react-cookies'
 import BLOG from '@/blog.config'
-import { ALL_THEME } from '@/themes'
 import { isBrowser, getQueryVariable } from './utils'
 
+/**
+ * 所有主题枚举
+ */
+export const ALL_THEME = [
+  'hexo',
+  'matery',
+  'next',
+  'medium',
+  'fukasawa',
+  'nobelium',
+  'example',
+  'simple'
+]
+
 /**
  * 初始化主题 , 优先级 query > cookies > systemPrefer
  * @param isDarkMode
diff --git a/pages/404.js b/pages/404.js
index d63b1e5e..02861a40 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,6 +1,7 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import * as ThemeMap from '@/themes'
 import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+import Loading from '@/components/Loading'
 
 /**
  * 404
@@ -9,9 +10,9 @@ import { useGlobal } from '@/lib/global'
  */
 const NoFound = props => {
   const { theme, siteInfo } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
   const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
-  return <ThemeComponents.Layout404 {...props} meta={meta}/>
+  const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
+  return <Layout404 {...props} meta={meta}/>
 }
 
 export async function getStaticProps () {
diff --git a/pages/[...slug].js b/pages/[...slug].js
index 846ff7eb..c3e58d78 100644
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -2,14 +2,15 @@ import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
-import * as ThemeMap from '@/themes'
-import React from 'react'
+import { useEffect, useState } from 'react'
 import { idToUuid } from 'notion-utils'
-import Router from 'next/router'
+import { useRouter } from 'next/router'
 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'
 
 /**
  * 根据notion的slug访问页面
@@ -18,14 +19,14 @@ import md5 from 'js-md5'
  */
 const Slug = props => {
   const { theme, changeLoadingState } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
   const { post, siteInfo } = props
-  const router = Router.useRouter()
+  const router = useRouter()
 
   // 文章锁🔐
-  const [lock, setLock] = React.useState(post?.password && post?.password !== '')
+  const [lock, setLock] = useState(post?.password && post?.password !== '')
+  const LayoutSlug = dynamic(() => import(`@/themes/${theme}/LayoutSlug`).then(async (m) => { return m.LayoutSlug }), { ssr: false, loading: () => <Loading /> })
 
-  React.useEffect(() => {
+  useEffect(() => {
     changeLoadingState(false)
     if (post?.password && post?.password !== '') {
       setLock(true)
@@ -37,6 +38,9 @@ const Slug = props => {
 
       setLock(false)
     }
+    router.events.on('routeChangeComplete', () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    })
   }, [post])
 
   if (!post) {
@@ -51,7 +55,8 @@ const Slug = props => {
       }
     }, 8 * 1000) // 404时长 8秒
     const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading`, image: siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE }
-    return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
+
+    return <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
   }
 
   /**
@@ -80,12 +85,8 @@ const Slug = props => {
     tags: post?.tags
   }
 
-  Router.events.on('routeChangeComplete', () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  })
-
   return (
-    <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
+    <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
   )
 }
 
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 679d0800..8d20f44f 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -1,12 +1,12 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
-import * as ThemeMap from '@/themes'
+import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
+import Loading from '@/components/Loading'
 
 const ArchiveIndex = props => {
   const { theme, locale } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
   const { siteInfo } = props
   const meta = {
     title: `${locale.NAV.ARCHIVE} | ${siteInfo?.title}`,
@@ -16,7 +16,8 @@ const ArchiveIndex = props => {
     type: 'website'
   }
 
-  return <ThemeComponents.LayoutArchive {...props} meta={meta} />
+  const LayoutArchive = dynamic(() => import(`@/themes/${theme}/LayoutArchive`).then(async (m) => { return m.LayoutArchive }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutArchive {...props} meta={meta} />
 }
 
 export async function getStaticProps() {
diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
index 583a69ab..cd0a4403 100644
--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -1,8 +1,9 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
-import * as ThemeMap from '@/themes'
+import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
+import Loading from '@/components/Loading'
 
 /**
  * 分类页
@@ -11,11 +12,11 @@ import BLOG from '@/blog.config'
  */
 export default function Category(props) {
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
   const { siteInfo, posts } = props
   const { locale } = useGlobal()
   if (!posts) {
-    return <ThemeComponents.Layout404 {...props} />
+    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
+    return <Layout404 {...props} />
   }
   const meta = {
     title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
@@ -26,7 +27,9 @@ export default function Category(props) {
     image: siteInfo?.pageCover,
     type: 'website'
   }
-  return <ThemeComponents.LayoutCategory {...props} meta={meta} />
+
+  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutCategory {...props} meta={meta} />
 }
 
 export async function getStaticProps({ params: { category } }) {
diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
index f01ae27a..f1dd286b 100644
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -1,8 +1,9 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
-import * as ThemeMap from '@/themes'
+import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
+import Loading from '@/components/Loading'
 
 /**
  * 分类页
@@ -11,11 +12,11 @@ import BLOG from '@/blog.config'
  */
 export default function Category(props) {
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
   const { siteInfo, posts } = props
   const { locale } = useGlobal()
   if (!posts) {
-    return <ThemeComponents.Layout404 {...props} />
+    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
+    return <Layout404 {...props} />
   }
   const meta = {
     title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
@@ -26,7 +27,9 @@ export default function Category(props) {
     image: siteInfo?.pageCover,
     type: 'website'
   }
-  return <ThemeComponents.LayoutCategory {...props} meta={meta} />
+
+  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutCategory {...props} meta={meta} />
 }
 
 export async function getStaticProps({ params: { category, page } }) {
diff --git a/pages/category/index.js b/pages/category/index.js
index b310c188..3c74ef59 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -1,7 +1,7 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
-import * as ThemeMap from '@/themes'
+import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
 
 /**
@@ -11,7 +11,6 @@ import BLOG from '@/blog.config'
  */
 export default function Category(props) {
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
   const { locale } = useGlobal()
   const { siteInfo } = props
   const meta = {
@@ -21,7 +20,8 @@ export default function Category(props) {
     slug: 'category',
     type: 'website'
   }
-  return <ThemeComponents.LayoutCategoryIndex {...props} meta={meta} />
+  const LayoutCategoryIndex = dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`).then(async (m) => { return m.LayoutCategoryIndex }), { ssr: false })
+  return <LayoutCategoryIndex {...props} meta={meta} />
 }
 
 export async function getStaticProps() {
diff --git a/pages/index.js b/pages/index.js
index 7fac472b..e826dbd9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,10 +1,11 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import * as ThemeMap from '@/themes'
 import { useGlobal } from '@/lib/global'
 import { generateRss } from '@/lib/rss'
 import { generateRobotsTxt } from '@/lib/robots.txt'
+import dynamic from 'next/dynamic'
+import Loading from '@/components/Loading'
 
 /**
  * 首页布局
@@ -13,8 +14,10 @@ import { generateRobotsTxt } from '@/lib/robots.txt'
  */
 const Index = props => {
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
-  return <ThemeComponents.LayoutIndex {...props} />
+  const LayoutIndex = dynamic(() => import(`@/themes/${theme}/LayoutIndex`)
+    .then(async (m) => { return m.LayoutIndex }), { ssr: false, loading: () => <Loading /> }
+  )
+  return <LayoutIndex {...props} />
 }
 
 /**
diff --git a/pages/page/[page].js b/pages/page/[page].js
index 63ebc615..8af1642b 100644
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -2,12 +2,12 @@ import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
-import * as ThemeMap from '@/themes'
+import dynamic from 'next/dynamic'
+import Loading from '@/components/Loading'
 
 const Page = props => {
   const { theme } = useGlobal()
   const { siteInfo } = props
-  const ThemeComponents = ThemeMap[theme]
   if (!siteInfo) {
     return <></>
   }
@@ -18,7 +18,9 @@ const Page = props => {
     slug: 'page/' + props.page,
     type: 'website'
   }
-  return <ThemeComponents.LayoutPage {...props} meta={meta} />
+
+  const LayoutPage = dynamic(() => import(`@/themes/${theme}/LayoutPage`).then(async (m) => { return m.LayoutPage }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutPage {...props} meta={meta} />
 }
 
 export async function getStaticPaths() {
diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
index b1ea5bc4..e0ad07cd 100644
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -1,8 +1,9 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
-import * as ThemeMap from '@/themes'
 import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
+import Loading from '@/components/Loading'
 
 const Index = props => {
   const { keyword, siteInfo } = props
@@ -15,14 +16,9 @@ const Index = props => {
     type: 'website'
   }
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
-  return (
-    <ThemeComponents.LayoutSearch
-      {...props}
-      meta={meta}
-      currentSearch={keyword}
-    />
-  )
+
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutSearch {...props} currentSearch={keyword} meta={meta} />
 }
 
 /**
diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js
index 1255f3c3..54798107 100644
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -1,8 +1,9 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
-import * as ThemeMap from '@/themes'
+import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
+import Loading from '@/components/Loading'
 
 const Index = props => {
   const { keyword, siteInfo } = props
@@ -15,14 +16,8 @@ const Index = props => {
     type: 'website'
   }
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
-  return (
-    <ThemeComponents.LayoutSearch
-      {...props}
-      meta={meta}
-      currentSearch={keyword}
-    />
-  )
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutSearch {...props} currentSearch={keyword} meta={meta} />
 }
 
 /**
diff --git a/pages/search/index.js b/pages/search/index.js
index fc20c5fd..f132748d 100644
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -1,22 +1,23 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
-import * as ThemeMap from '@/themes'
 import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
+import Loading from '@/components/Loading'
 
 const Search = props => {
   const { posts, siteInfo } = props
   const router = useRouter()
   let filteredPosts
-  const searchKey = getSearchKey(router)
+  const keyword = getSearchKey(router)
   // 静态过滤
-  if (searchKey) {
+  if (keyword) {
     filteredPosts = posts.filter(post => {
       const tagContent = post.tags ? post.tags.join(' ') : ''
       const categoryContent = post.category ? post.category.join(' ') : ''
       const searchContent =
-        post.title + post.summary + tagContent + categoryContent
-      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+                post.title + post.summary + tagContent + categoryContent
+      return searchContent.toLowerCase().includes(keyword.toLowerCase())
     })
   } else {
     filteredPosts = []
@@ -24,9 +25,7 @@ const Search = props => {
 
   const { locale } = useGlobal()
   const meta = {
-    title: `${searchKey || ''}${searchKey ? ' | ' : ''}${locale.NAV.SEARCH} | ${
-      siteInfo?.title
-    }`,
+    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
     description: siteInfo?.description,
     image: siteInfo?.pageCover,
     slug: 'search',
@@ -34,16 +33,9 @@ const Search = props => {
   }
 
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
 
-  return (
-    <ThemeComponents.LayoutSearch
-      {...props}
-      posts={filteredPosts}
-      currentSearch={searchKey}
-      meta={meta}
-    />
-  )
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutSearch {...props} posts={filteredPosts} currentSearch={keyword} meta={meta} />
 }
 
 /**
diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js
index f633c94f..b87e954f 100644
--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -1,16 +1,17 @@
 import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import * as ThemeMap from '@/themes'
 import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
+import Loading from '@/components/Loading'
 
 const Tag = props => {
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
   const { locale } = useGlobal()
   const { tag, siteInfo, posts } = props
 
   if (!posts) {
-    return <ThemeComponents.Layout404 {...props} />
+    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
+    return <Layout404 {...props}/>
   }
 
   const meta = {
@@ -20,7 +21,8 @@ const Tag = props => {
     slug: 'tag/' + tag,
     type: 'website'
   }
-  return <ThemeComponents.LayoutTag {...props} meta={meta} />
+  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutTagIndex {...props} meta={meta} />
 }
 
 export async function getStaticProps({ params: { tag } }) {
diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js
index 788473b9..45d01c84 100644
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -1,16 +1,17 @@
 import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import * as ThemeMap from '@/themes'
 import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
+import Loading from '@/components/Loading'
 
 const Tag = props => {
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
   const { locale } = useGlobal()
   const { tag, siteInfo, posts } = props
 
   if (!posts) {
-    return <ThemeComponents.Layout404 {...props} />
+    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
+    return <Layout404 {...props}/>
   }
 
   const meta = {
@@ -20,7 +21,8 @@ const Tag = props => {
     slug: 'tag/' + tag,
     type: 'website'
   }
-  return <ThemeComponents.LayoutTag {...props} meta={meta} />
+  const LayoutTag = dynamic(() => import(`@/themes/${theme}/LayoutTag`).then(async (m) => { return m.LayoutTag }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutTag {...props} meta={meta} />
 }
 
 export async function getStaticProps({ params: { tag, page } }) {
diff --git a/pages/tag/index.js b/pages/tag/index.js
index e9263668..1d2f3a29 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -1,8 +1,9 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
-import * as ThemeMap from '@/themes'
 import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
+import Loading from '@/components/Loading'
 
 /**
  * 标签首页
@@ -11,7 +12,6 @@ import BLOG from '@/blog.config'
  */
 const TagIndex = props => {
   const { theme } = useGlobal()
-  const ThemeComponents = ThemeMap[theme]
   const { locale } = useGlobal()
   const { siteInfo } = props
   const meta = {
@@ -21,7 +21,8 @@ const TagIndex = props => {
     slug: 'tag',
     type: 'website'
   }
-  return <ThemeComponents.LayoutTagIndex {...props} meta={meta} />
+  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: false, loading: () => <Loading /> })
+  return <LayoutTagIndex {...props} meta={meta} />
 }
 
 export async function getStaticProps() {
diff --git a/themes/hexo/components/SideBarDrawer.js b/themes/hexo/components/SideBarDrawer.js
index 07c122fd..87125c05 100644
--- a/themes/hexo/components/SideBarDrawer.js
+++ b/themes/hexo/components/SideBarDrawer.js
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React from 'react'
+import { useEffect } from 'react'
 
 /**
  * 侧边栏抽屉面板，可以从侧面拉出
@@ -8,7 +8,7 @@ import React from 'react'
  */
 const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
   const router = useRouter()
-  React.useEffect(() => {
+  useEffect(() => {
     const sideBarDrawerRouteListener = () => {
       switchSideDrawerVisible(false)
     }
@@ -29,11 +29,11 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
     if (showStatus) {
-      sideBarDrawer.classList.replace('-mr-72', 'mr-0')
-      sideBarDrawerBackground.classList.replace('hidden', 'block')
+      sideBarDrawer?.classList.replace('-mr-72', 'mr-0')
+      sideBarDrawerBackground?.classList.replace('hidden', 'block')
     } else {
-      sideBarDrawer.classList.replace('mr-0', '-mr-72')
-      sideBarDrawerBackground.classList.replace('block', 'hidden')
+      sideBarDrawer?.classList.replace('mr-0', '-mr-72')
+      sideBarDrawerBackground?.classList.replace('block', 'hidden')
     }
   }
 
diff --git a/themes/index.js b/themes/index.js
deleted file mode 100644
index 5316dee4..00000000
--- a/themes/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * 切换主题请修改 blog.config.js 中的 THEME 字段
- */
-import * as hexo from './hexo'
-// import * as next from './next'
-// import * as fukasawa from './fukasawa'
-// import * as medium from './medium'
-// import * as nobelium from './nobelium'
-// import * as matery from './matery'
-// import * as example from './example'
-// import * as simple from './simple'
-
-export const ALL_THEME = [
-  'hexo'
-//   'matery',
-//   'next',
-//   'medium',
-//   'fukasawa',
-//   'nobelium',
-//   'example',
-//   'simple'
-]
-export {
-  hexo
-//   next,
-//   medium,
-//   fukasawa,
-//   nobelium,
-//   matery,
-//   example,
-//   simple
-}