From a042dc859ae22d9c62c314ccc7c26eb8fe58ef3a Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Mon, 19 Jun 2023 19:03:09 +0800
Subject: [PATCH] feat/theme-switch

---
 components/DebugPanel.js                 | 21 +++----
 components/ThemeSwitch.js                | 10 ++-
 lib/global.js                            | 33 +++++-----
 lib/theme.js                             | 77 ++++++++++++++++++------
 lib/utils.js                             | 15 ++++-
 pages/404.js                             | 25 +-------
 pages/[...slug].js                       | 23 +------
 pages/_app.js                            | 11 +++-
 pages/archive/index.js                   | 28 ++-------
 pages/category/[category]/index.js       | 28 ++-------
 pages/category/[category]/page/[page].js | 27 +--------
 pages/category/index.js                  | 28 +--------
 pages/index.js                           | 28 +--------
 pages/page/[page].js                     | 28 +--------
 pages/search/[keyword]/index.js          | 26 +-------
 pages/search/[keyword]/page/[page].js    | 26 +-------
 pages/search/index.js                    | 27 ++-------
 pages/tag/[tag]/index.js                 | 28 ++-------
 pages/tag/[tag]/page/[page].js           | 25 +-------
 pages/tag/index.js                       | 24 +-------
 themes/example/index.js                  | 25 ++++++++
 themes/fukasawa/index.js                 | 25 ++++++++
 themes/hexo/index.js                     | 25 ++++++++
 themes/matery/indexj.js                  | 25 ++++++++
 themes/medium/index.js                   | 25 ++++++++
 themes/next/index.js                     | 25 ++++++++
 themes/nobelium/index.js                 | 25 ++++++++
 themes/simple/index.js                   | 25 ++++++++
 28 files changed, 353 insertions(+), 385 deletions(-)
 create mode 100644 themes/example/index.js
 create mode 100644 themes/fukasawa/index.js
 create mode 100644 themes/hexo/index.js
 create mode 100644 themes/matery/indexj.js
 create mode 100644 themes/medium/index.js
 create mode 100644 themes/next/index.js
 create mode 100644 themes/nobelium/index.js
 create mode 100644 themes/simple/index.js

diff --git a/components/DebugPanel.js b/components/DebugPanel.js
index 7765e827..2a037ce8 100644
--- a/components/DebugPanel.js
+++ b/components/DebugPanel.js
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
 import Select from './Select'
 import { useGlobal } from '@/lib/global'
 import { ALL_THEME } from '@/lib/theme'
+import { useRouter } from 'next/router'
 
 /**
  *
@@ -10,16 +11,14 @@ import { ALL_THEME } from '@/lib/theme'
  */
 const DebugPanel = () => {
   const [show, setShow] = useState(false)
-  const { changeTheme, switchTheme, locale } = useGlobal()
+  const { theme, switchTheme, locale } = useGlobal()
+  const router = useRouter()
   const [siteConfig, updateSiteConfig] = useState({})
-  //   const [themeConfig, updateThemeConfig] = useState({})
-  const [debugTheme, updateDebugTheme] = useState(BLOG.THEME)
 
   // 主题下拉框
   const themeOptions = ALL_THEME.map(t => ({ value: t, text: t }))
 
   useEffect(() => {
-    changeTheme(BLOG.THEME)
     updateSiteConfig(Object.assign({}, BLOG))
     // updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
   }, [])
@@ -29,15 +28,13 @@ const DebugPanel = () => {
   }
 
   function handleChangeDebugTheme() {
-    const newTheme = switchTheme()
-    // updateThemeConfig(Object.assign({}, ThemeMap[newTheme].THEME_CONFIG))
-    updateDebugTheme(newTheme)
+    switchTheme()
   }
 
-  function handleUpdateDebugTheme(e) {
-    changeTheme(e)
-    // updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
-    updateDebugTheme(e)
+  function handleUpdateDebugTheme(newTheme) {
+    console.log('触发切换主题', newTheme)
+    const query = { ...router.query, theme: newTheme }
+    router.push({ pathname: router.pathname, query })
   }
 
   function filterResult(text) {
@@ -75,7 +72,7 @@ const DebugPanel = () => {
                     <div className='flex'>
                         <Select
                             label={locale.COMMON.THEME_SWITCH}
-                            value={debugTheme}
+                            value={theme}
                             options={themeOptions}
                             onChange={handleUpdateDebugTheme}
                         />
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index d7143dc7..e8f62fcf 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -2,15 +2,21 @@ import { useGlobal } from '@/lib/global'
 import React from 'react'
 import { Draggable } from './Draggable'
 import { ALL_THEME } from '@/lib/theme'
+import { useRouter } from 'next/router'
 /**
  *
  * @returns 主题切换
  */
 const ThemeSwitch = () => {
-  const { theme, changeTheme } = useGlobal()
+  const { theme } = useGlobal()
+  const router = useRouter()
 
+  // 修改当前路径url中的 theme 参数
+  // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
   const onSelectChange = (e) => {
-    changeTheme(e.target.value)
+    const newTheme = e.target.value
+    const query = { ...router.query, theme: newTheme }
+    router.push({ pathname: router.pathname, query })
   }
 
   return (<>
diff --git a/lib/global.js b/lib/global.js
index 3c2ecafc..064b8fad 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -1,11 +1,11 @@
 import { generateLocaleDict, initLocale } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
-import Router, { useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
-import { ALL_THEME, initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
+import { ALL_THEME, initDarkMode } from '@/lib/theme'
 import NProgress from 'nprogress'
 import LoadingCover from '@/components/LoadingCover'
-import { isBrowser } from './utils'
+import { getQueryParam, isBrowser } from './utils'
 
 const GlobalContext = createContext()
 
@@ -16,18 +16,17 @@ const GlobalContext = createContext()
  * @constructor
  */
 export function GlobalContextProvider({ children }) {
+  const router = useRouter()
   const [lang, updateLang] = useState(BLOG.LANG) // 默认语言
   const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG)) // 默认语言
-  const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
+  const [theme, setTheme] = useState(getQueryParam(router.asPath, 'theme') || BLOG.THEME) // 默认博客主题
   const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
   const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
   const [onReading, setOnReading] = useState(false) // 网页资源加载
-  const router = useRouter()
 
   useEffect(() => {
     initLocale(lang, locale, updateLang, updateLocale)
     initDarkMode(isDarkMode, updateDarkMode)
-    initTheme(theme, changeTheme)
     if (isBrowser()) {
       // 监听用户刷新页面
       const handleBeforeUnload = (event) => {
@@ -45,10 +44,17 @@ export function GlobalContextProvider({ children }) {
   useEffect(() => {
     const handleStart = (url) => {
       NProgress.start()
+      const { theme } = router.query
+      if (theme && !url.includes(`theme=${theme}`)) {
+        // TODO
+        const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${theme}`
+        router.push(newUrl)
+      }
       setOnLoading(true)
     }
     const handleStop = () => {
       NProgress.done()
+      setTheme(getQueryParam(router.asPath, 'theme') || BLOG.THEME)
       setOnLoading(false)
     }
 
@@ -62,24 +68,16 @@ export function GlobalContextProvider({ children }) {
     }
   }, [router])
 
+  // 切换主题
   function switchTheme() {
     const currentIndex = ALL_THEME.indexOf(theme)
     const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0
     const newTheme = ALL_THEME[newIndex]
-    changeTheme(newTheme)
+    const query = { ...router.query, theme: newTheme }
+    router.push({ pathname: router.pathname, query })
     return newTheme
   }
 
-  function changeTheme(theme) {
-    Router.query.theme = ''
-    if (ALL_THEME.indexOf(theme) > -1) {
-      setTheme(theme)
-    } else {
-      setTheme(BLOG.THEME)
-    }
-    saveThemeToCookies(theme)
-  }
-
   return (
         <GlobalContext.Provider value={{
           onLoading,
@@ -91,7 +89,6 @@ export function GlobalContextProvider({ children }) {
           theme,
           setTheme,
           switchTheme,
-          changeTheme,
           setOnReading
         }}>
             <LoadingCover onReading={onReading} setOnReading={setOnReading}/>
diff --git a/lib/theme.js b/lib/theme.js
index 4d34fc8a..93466023 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,6 +1,7 @@
 import cookie from 'react-cookies'
 import BLOG from '@/blog.config'
-import { isBrowser, getQueryVariable } from './utils'
+import { getQueryParam, getQueryVariable } from './utils'
+import dynamic from 'next/dynamic'
 
 /**
  * 所有主题枚举
@@ -16,6 +17,62 @@ export const ALL_THEME = [
   'simple'
 ]
 
+/**
+ * 加载主题文件
+ * @param {*} router
+ * @returns
+ */
+export const getLayoutByTheme = (router) => {
+  const theme = getQueryParam(router.asPath, 'theme') || BLOG.THEME
+  let Layout = null
+  // 根据路由 pages的文件名加载主题文件
+  switch (router.pathname) {
+    case '/':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutIndex`), { ssr: true })
+      break
+    case '/page/[page]':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutPage`), { ssr: true })
+      break
+    case '/archive':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutArchive`), { ssr: true })
+      break
+    case '/search':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutSearch`), { ssr: true })
+      break
+    case '/search/[keyword]':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutSearch`), { ssr: true })
+      break
+    case '/search/[keyword]/page/[page]':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutSearch`), { ssr: true })
+      break
+    case '/404':
+      Layout = dynamic(() => import(`@/themes/${theme}/Layout404`), { ssr: true })
+      break
+    case '/tag':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`), { ssr: true })
+      break
+    case '/tag/[tag]':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutTag`), { ssr: true })
+      break
+    case '/tag/[tag]/page/[page]':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutTag`), { ssr: true })
+      break
+    case '/category':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`), { ssr: true })
+      break
+    case '/category/[category]':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutCategory`), { ssr: true })
+      break
+    case '/category/[category]/page/[page]':
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutCategory`), { ssr: true })
+      break
+    default:
+      Layout = dynamic(() => import(`@/themes/${theme}/LayoutSlug`), { ssr: true })
+      break
+  }
+  return Layout
+}
+
 /**
  * 初始化主题 , 优先级 query > cookies > systemPrefer
  * @param isDarkMode
@@ -34,24 +91,6 @@ export const initDarkMode = (isDarkMode, updateDarkMode) => {
   document.getElementsByTagName('html')[0].setAttribute('class', isDarkMode ? 'dark' : 'light')
 }
 
-/**
- * 初始化主题， 优先级 query > cookies > blog.config.js
- * @param {*} theme
- * @param {*} changeTheme
- */
-export const initTheme = (theme, changeTheme) => {
-  if (isBrowser()) {
-    // const queryTheme = getQueryVariable('theme') || loadThemeFromCookies() || BLOG.THEME
-    const queryTheme = getQueryVariable('theme') || BLOG.THEME
-    let currentTheme = theme
-    if (queryTheme !== theme && ALL_THEME.indexOf(queryTheme) > -1) {
-      currentTheme = queryTheme
-    }
-    changeTheme(currentTheme)
-    saveThemeToCookies(currentTheme)
-  }
-}
-
 /**
  * 是否优先深色模式， 根据系统深色模式以及当前时间判断
  * @returns {*}
diff --git a/lib/utils.js b/lib/utils.js
index df39fe64..d5ba09b5 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -51,16 +51,27 @@ export function loadExternalResource(url, type) {
  * @param {}} variable
  * @returns
  */
-export function getQueryVariable(variable) {
+export function getQueryVariable(key) {
   const query = isBrowser() ? window.location.search.substring(1) : ''
   const vars = query.split('&')
   for (let i = 0; i < vars.length; i++) {
     const pair = vars[i].split('=')
-    if (pair[0] === variable) { return pair[1] }
+    if (pair[0] === key) { return pair[1] }
   }
   return (false)
 }
 
+/**
+ * 获取 URL 中指定参数的值
+ * @param {string} url
+ * @param {string} param
+ * @returns {string|null}
+ */
+export function getQueryParam(url, param) {
+  const searchParams = new URLSearchParams(url.split('?')[1])
+  return searchParams.get(param)
+}
+
 /**
  * 深度合并两个对象
  * @param target
diff --git a/pages/404.js b/pages/404.js
index cb7ec336..57d95461 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,5 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
-import dynamic from 'next/dynamic'
-import Loading from '@/components/Loading'
-import { Suspense, useEffect, useState } from 'react'
-import BLOG from '@/blog.config'
-
-const layout = 'Layout404'
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 404
@@ -17,22 +7,13 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
  * @returns
  */
 const NoFound = props => {
-  const { theme, siteInfo } = useGlobal()
+  const { Layout } = props
+  const { siteInfo } = useGlobal()
   const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
-  const [Layout, setLayout] = useState(DefaultLayout)
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
 
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticProps () {
diff --git a/pages/[...slug].js b/pages/[...slug].js
index 5363f73a..88a5a2d8 100644
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -1,7 +1,6 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { useGlobal } from '@/lib/global'
 import { Suspense, useEffect, useState } from 'react'
 import { idToUuid } from 'notion-utils'
 import { useRouter } from 'next/router'
@@ -9,35 +8,16 @@ import { isBrowser } from '@/lib/utils'
 import { getNotion } from '@/lib/notion/getNotion'
 import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
 import md5 from 'js-md5'
-import dynamic from 'next/dynamic'
 import Loading from '@/components/Loading'
 
-const layout = 'LayoutSlug'
-
-/**
- * 懒加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
-
 /**
  * 根据notion的slug访问页面
  * @param {*} props
  * @returns
  */
 const Slug = props => {
-  const { theme, setOnLoading } = useGlobal()
-  const { post, siteInfo } = props
+  const { post, siteInfo, Layout } = props
   const router = useRouter()
-  const [Layout, setLayout] = useState(DefaultLayout)
-
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
 
   // 文章锁🔐
   const [lock, setLock] = useState(post?.password && post?.password !== '')
@@ -57,7 +37,6 @@ const Slug = props => {
 
   // 文章加载
   useEffect(() => {
-    setOnLoading(false)
     // 404
     if (!post) {
       setTimeout(() => {
diff --git a/pages/_app.js b/pages/_app.js
index 41fc3de3..981170e8 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -19,6 +19,8 @@ import dynamic from 'next/dynamic'
 
 // 自定义样式css和js引入
 import ExternalScript from '@/components/ExternalScript'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/lib/theme'
 
 // 各种扩展插件 动画等
 const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))
@@ -31,11 +33,14 @@ const MyApp = ({ Component, pageProps }) => {
     }
   }, [])
 
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
+
   return (
         <GlobalContextProvider>
-            <Component {...pageProps} />
-            <ExternalPlugins {...pageProps}/>
-            <ExternalScript/>
+            <Component {...pageProps} Layout={Layout} />
+            <ExternalPlugins {...pageProps} />
+            <ExternalScript />
         </GlobalContextProvider>
   )
 }
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 32eeefbb..8929f0ad 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -1,29 +1,11 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React, { Suspense, useEffect, useState } from 'react'
+import React from 'react'
 import { useGlobal } from '@/lib/global'
-import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
-import Loading from '@/components/Loading'
-
-const layout = 'LayoutArchive'
-
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const ArchiveIndex = props => {
-  const { siteInfo } = props
-  const { theme, locale } = useGlobal()
-  const [Layout, setLayout] = useState(DefaultLayout)
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
+  const { siteInfo, Layout } = props
+  const { locale } = useGlobal()
 
   const meta = {
     title: `${locale.NAV.ARCHIVE} | ${siteInfo?.title}`,
@@ -35,9 +17,7 @@ const ArchiveIndex = props => {
 
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticProps() {
diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
index f8ac5188..91b149ef 100644
--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -1,15 +1,7 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React, { Suspense, useEffect, useState } from 'react'
+import React from 'react'
 import { useGlobal } from '@/lib/global'
-import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
-import Loading from '@/components/Loading'
-
-const layout = 'LayoutCategory'
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 分类页
@@ -17,18 +9,8 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
  * @returns
  */
 export default function Category(props) {
-  const { siteInfo } = props
-  const { locale, theme } = useGlobal()
-  const [Layout, setLayout] = useState(DefaultLayout)
-
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
+  const { siteInfo, Layout } = props
+  const { locale } = useGlobal()
 
   const meta = {
     title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
@@ -42,9 +24,7 @@ export default function Category(props) {
 
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticProps({ params: { category } }) {
diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
index 26799686..ffdc1325 100644
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -1,16 +1,7 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React, { Suspense, useEffect, useState } from 'react'
+import React from 'react'
 import { useGlobal } from '@/lib/global'
-import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
-import Loading from '@/components/Loading'
-
-const layout = 'LayoutCategory'
-
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 分类页
@@ -18,18 +9,8 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
  * @returns
  */
 export default function Category(props) {
-  const { theme } = useGlobal()
-  const { siteInfo } = props
+  const { siteInfo, Layout } = props
   const { locale } = useGlobal()
-  const [Layout, setLayout] = useState(DefaultLayout)
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
 
   const meta = {
     title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
@@ -43,9 +24,7 @@ export default function Category(props) {
 
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticProps({ params: { category, page } }) {
diff --git a/pages/category/index.js b/pages/category/index.js
index 4f09ebeb..fffc0e94 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -1,16 +1,7 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React, { Suspense, useEffect, useState } from 'react'
+import React from 'react'
 import { useGlobal } from '@/lib/global'
-import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
-import Loading from '@/components/Loading'
-
-const layout = 'LayoutCategoryIndex'
-
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 分类首页
@@ -18,19 +9,8 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
  * @returns
  */
 export default function Category(props) {
-  const { theme } = useGlobal()
   const { locale } = useGlobal()
-  const { siteInfo } = props
-  const [Layout, setLayout] = useState(DefaultLayout)
-
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
+  const { siteInfo, Layout } = props
 
   const meta = {
     title: `${locale.COMMON.CATEGORY} | ${siteInfo?.title}`,
@@ -41,9 +21,7 @@ export default function Category(props) {
   }
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticProps() {
diff --git a/pages/index.js b/pages/index.js
index 56a0bf6b..7e0a171e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,19 +1,8 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { useGlobal } from '@/lib/global'
 import { generateRss } from '@/lib/rss'
 import { generateRobotsTxt } from '@/lib/robots.txt'
-import dynamic from 'next/dynamic'
-import { Suspense, useEffect, useState } from 'react'
-import Loading from '@/components/Loading'
-
-const layout = 'LayoutIndex'
-
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 首页布局
@@ -21,21 +10,8 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
  * @returns
  */
 const Index = props => {
-  // 动态切换主题
-  const { theme } = useGlobal()
-  const [Layout, setLayout] = useState(DefaultLayout)
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
-
-  return <Suspense fallback={<Loading />}>
-        <Layout {...props} />
-    </Suspense>
+  const { Layout } = props
+  return <Layout {...props} />
 }
 
 /**
diff --git a/pages/page/[page].js b/pages/page/[page].js
index 76a115ae..80dc3238 100644
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -1,17 +1,6 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { useGlobal } from '@/lib/global'
-import dynamic from 'next/dynamic'
-import { Suspense, useEffect, useState } from 'react'
-import Loading from '@/components/Loading'
-
-const layout = 'LayoutPage'
-
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 文章列表分页
@@ -19,18 +8,7 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
  * @returns
  */
 const Page = props => {
-  const { theme } = useGlobal()
-  const { siteInfo } = props
-  const [Layout, setLayout] = useState(DefaultLayout)
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
-
+  const { siteInfo, Layout } = props
   const meta = {
     title: `${props?.page} | Page | ${siteInfo?.title}`,
     description: siteInfo?.description,
@@ -41,9 +19,7 @@ const Page = props => {
 
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading />}>
-        <Layout {...props} />
-    </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticPaths() {
diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
index 46b254e0..e7fab75b 100644
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -2,28 +2,10 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
 import BLOG from '@/blog.config'
-import dynamic from 'next/dynamic'
-import { Suspense, useEffect, useState } from 'react'
-import Loading from '@/components/Loading'
-
-const layout = 'LayoutSearch'
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Index = props => {
-  const { keyword, siteInfo } = props
-  const { locale, theme } = useGlobal()
-  const [Layout, setLayout] = useState(DefaultLayout)
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
+  const { keyword, siteInfo, Layout } = props
+  const { locale } = useGlobal()
 
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
@@ -35,9 +17,7 @@ const Index = props => {
 
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 /**
diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js
index b0cdf51d..6fad4aa4 100644
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -1,29 +1,11 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
-import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
-import { Suspense, useEffect, useState } from 'react'
-import Loading from '@/components/Loading'
-
-const layout = 'LayoutSearch'
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Index = props => {
-  const { keyword, siteInfo } = props
-  const { locale, theme } = useGlobal()
-  const [Layout, setLayout] = useState(DefaultLayout)
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
+  const { keyword, siteInfo, Layout } = props
+  const { locale } = useGlobal()
 
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
@@ -35,9 +17,7 @@ const Index = props => {
 
   props = { ...props, meta, currentSearch: keyword }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 /**
diff --git a/pages/search/index.js b/pages/search/index.js
index 680b14e1..34712514 100644
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -2,31 +2,14 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
-import dynamic from 'next/dynamic'
-import { Suspense, useEffect, useState } from 'react'
-import Loading from '@/components/Loading'
-const layout = 'LayoutSearch'
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Search = props => {
-  const { posts, siteInfo } = props
-  const { theme, locale } = useGlobal()
-  const [Layout, setLayout] = useState(DefaultLayout)
+  const { posts, siteInfo, Layout } = props
+  const { locale } = useGlobal()
+
   const router = useRouter()
   const keyword = getSearchKey(router)
 
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
-
   let filteredPosts
   // 静态过滤
   if (keyword) {
@@ -51,9 +34,7 @@ const Search = props => {
 
   props = { ...props, meta, posts: filteredPosts }
 
-  return <Suspense fallback={<Loading />}>
-        <Layout {...props} />
-    </Suspense>
+  return <Layout {...props} />
 }
 
 /**
diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js
index c3b55d1d..9abb0988 100644
--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -1,29 +1,15 @@
 import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import BLOG from '@/blog.config'
-import dynamic from 'next/dynamic'
-import { Suspense, useEffect, useState } from 'react'
-import Loading from '@/components/Loading'
-const layout = 'LayoutTag'
+
 /**
- * 加载默认主题
+ * 标签下的文章列表
+ * @param {*} props
+ * @returns
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
-
 const Tag = props => {
-  const { theme } = useGlobal()
   const { locale } = useGlobal()
-  const { tag, siteInfo } = props
-  const [Layout, setLayout] = useState(DefaultLayout)
-
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
+  const { tag, siteInfo, Layout } = props
 
   const meta = {
     title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
@@ -34,9 +20,7 @@ const Tag = props => {
   }
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticProps({ params: { tag } }) {
diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js
index fb585b15..0a3de01f 100644
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -1,29 +1,10 @@
 import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import BLOG from '@/blog.config'
-import dynamic from 'next/dynamic'
-import { Suspense, useEffect, useState } from 'react'
-import Loading from '@/components/Loading'
-
-const layout = 'LayoutTag'
-/**
- * 加载默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Tag = props => {
-  const { theme } = useGlobal()
   const { locale } = useGlobal()
-  const { tag, siteInfo } = props
-  const [Layout, setLayout] = useState(DefaultLayout)
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
+  const { tag, siteInfo, Layout } = props
 
   const meta = {
     title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
@@ -34,9 +15,7 @@ const Tag = props => {
   }
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticProps({ params: { tag, page } }) {
diff --git a/pages/tag/index.js b/pages/tag/index.js
index a058d5d3..ccdea6e7 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -1,14 +1,6 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { Suspense, useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
-import dynamic from 'next/dynamic'
-import Loading from '@/components/Loading'
-const layout = 'LayoutTagIndex'
-/**
- * 默认主题
- */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 标签首页
@@ -17,17 +9,7 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`),
  */
 const TagIndex = props => {
   const { locale } = useGlobal()
-  const { siteInfo } = props
-  const { theme } = useGlobal()
-  const [Layout, setLayout] = useState(DefaultLayout)
-  // 切换主题
-  useEffect(() => {
-    const loadLayout = async () => {
-      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
-      setLayout(newLayout)
-    }
-    loadLayout()
-  }, [theme])
+  const { siteInfo, Layout } = props
 
   const meta = {
     title: `${locale.COMMON.TAGS} | ${siteInfo?.title}`,
@@ -38,9 +20,7 @@ const TagIndex = props => {
   }
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticProps() {
diff --git a/themes/example/index.js b/themes/example/index.js
new file mode 100644
index 00000000..dd762bd4
--- /dev/null
+++ b/themes/example/index.js
@@ -0,0 +1,25 @@
+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
+}
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
new file mode 100644
index 00000000..58968469
--- /dev/null
+++ b/themes/fukasawa/index.js
@@ -0,0 +1,25 @@
+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
+}
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
new file mode 100644
index 00000000..8528d5da
--- /dev/null
+++ b/themes/hexo/index.js
@@ -0,0 +1,25 @@
+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
+}
diff --git a/themes/matery/indexj.js b/themes/matery/indexj.js
new file mode 100644
index 00000000..528e1e80
--- /dev/null
+++ b/themes/matery/indexj.js
@@ -0,0 +1,25 @@
+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
+}
diff --git a/themes/medium/index.js b/themes/medium/index.js
new file mode 100644
index 00000000..81961c58
--- /dev/null
+++ b/themes/medium/index.js
@@ -0,0 +1,25 @@
+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
+}
diff --git a/themes/next/index.js b/themes/next/index.js
new file mode 100644
index 00000000..45286719
--- /dev/null
+++ b/themes/next/index.js
@@ -0,0 +1,25 @@
+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
+}
diff --git a/themes/nobelium/index.js b/themes/nobelium/index.js
new file mode 100644
index 00000000..dda0f1a2
--- /dev/null
+++ b/themes/nobelium/index.js
@@ -0,0 +1,25 @@
+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
+}
diff --git a/themes/simple/index.js b/themes/simple/index.js
new file mode 100644
index 00000000..7e560470
--- /dev/null
+++ b/themes/simple/index.js
@@ -0,0 +1,25 @@
+import CONFIG_SIMPLE from './config_simple'
+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_SIMPLE as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategory,
+  LayoutCategoryIndex,
+  LayoutPage,
+  LayoutTag,
+  LayoutTagIndex
+}