From cd1b38a8ac8eba748f0a567c8df332e521861959 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 13:06:21 +0800
Subject: [PATCH 01/19] log clean

---
 components/TwikooCommentCounter.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/TwikooCommentCounter.js b/components/TwikooCommentCounter.js
index c847a176..9688d005 100644
--- a/components/TwikooCommentCounter.js
+++ b/components/TwikooCommentCounter.js
@@ -62,7 +62,7 @@ const TwikooCommentCounter = (props) => {
   const router = useRouter()
 
   useEffect(() => {
-    console.log('路由触发评论计数')
+    // console.log('路由触发评论计数')
     if (props?.posts && props?.posts?.length > 0) {
       fetchTwikooData(props.posts)
     }
@@ -70,7 +70,7 @@ const TwikooCommentCounter = (props) => {
 
   // 监控主题变化时的的评论数
   useEffect(() => {
-    console.log('主题触发评论计数', commentsData)
+    // console.log('主题触发评论计数', commentsData)
     updateCommentCount()
   }, [theme])
   return null

From 9246c8d7f8ec19965afa724dd9955e3047f3d745 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 15:41:04 +0800
Subject: [PATCH 02/19] remove gitalk valine mermaid

---
 blog.config.js                   | 11 +++-
 components/Gitalk.js             | 50 ++++++++++++-----
 components/NotionPage.js         |  2 +-
 components/PrismMac.js           |  7 ++-
 components/Valine.js             |  3 --
 components/ValineComponent.js    | 92 ++++++++++++++++++--------------
 package.json                     |  5 +-
 themes/hexo/components/Header.js |  3 +-
 themes/hexo/config_hexo.js       |  1 +
 9 files changed, 110 insertions(+), 64 deletions(-)
 delete mode 100644 components/Valine.js

diff --git a/blog.config.js b/blog.config.js
index 2178eaa2..300f3ff6 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -12,6 +12,9 @@ const BLOG = {
   APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
   APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || [18, 6], // 夜间模式起至时间，false时关闭根据时间自动切换夜间模式
 
+  // 3.14.1版本后，欢迎语在此配置，英文逗号隔开 ,  即可支持多个欢迎语打字效果。
+  GREETING_WORDS: process.env.NEXT_PUBLIC_GREETING_WORDS || 'Hi，我是一个程序员, Hi，我是一个打工人,Hi，我是一个干饭人,欢迎来到我的博客🎉',
+
   CUSTOM_MENU: process.env.NEXT_PUBLIC_CUSTOM_MENU || false, // 支持Menu 类型，从3.12.0版本起，各主题将逐步支持灵活的二级菜单配置，替代了原来的Page类型，此配置是试验功能、默认关闭。
 
   AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || 'NotionNext', // 您的昵称 例如 tangly1024
@@ -95,6 +98,9 @@ const BLOG = {
   CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标
   CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号
 
+  // Mermaid 图表CDN
+  MERMAID_CDN: process.env.NEXT_PUBLIC_MERMAID_CDN || 'https://cdn.jsdelivr.net/npm/mermaid@10.2.2/dist/mermaid.min.js', // CDN
+
   BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
   BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
   SUB_PATH: '', // leave this empty unless you want to deploy in a folder
@@ -231,11 +237,14 @@ const BLOG = {
   COMMENT_GITALK_CLIENT_SECRET:
       process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取
   COMMENT_GITALK_DISTRACTION_FREE_MODE: false, // 类似facebook的无干扰模式
+  COMMENT_GITALK_JS_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_GITALK_JS_CDN_URL || 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', // gitalk客户端 js cdn
+  COMMENT_GITALK_CSS_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_GITALK_CSS_CDN_URL || 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css', // gitalk客户端 css cdn
 
   COMMENT_GITTER_ROOM: process.env.NEXT_PUBLIC_COMMENT_GITTER_ROOM || '', // gitter聊天室 see https://gitter.im/ 不需要则留空
   COMMENT_DAO_VOICE_ID: process.env.NEXT_PUBLIC_COMMENT_DAO_VOICE_ID || '', // DaoVoice http://dashboard.daovoice.io/get-started
   COMMENT_TIDIO_ID: process.env.NEXT_PUBLIC_COMMENT_TIDIO_ID || '', // [tidio_id] -> //code.tidio.co/[tidio_id].js
 
+  COMMENT_VALINE_CDN: process.env.NEXT_PUBLIC_VALINE_CDN || 'https://unpkg.com/valine@1.5.1/dist/Valine.min.js',
   COMMENT_VALINE_APP_ID: process.env.NEXT_PUBLIC_VALINE_ID || '', // Valine @see https://valine.js.org/quickstart.html 或 https://github.com/stonehank/react-valine#%E8%8E%B7%E5%8F%96app-id-%E5%92%8C-app-key
   COMMENT_VALINE_APP_KEY: process.env.NEXT_PUBLIC_VALINE_KEY || '',
   COMMENT_VALINE_SERVER_URLS: process.env.NEXT_PUBLIC_VALINE_SERVER_URLS || '', // 该配置适用于国内自定义域名用户, 海外版本会自动检测(无需手动填写) @see https://valine.js.org/configuration.html#serverURLs
@@ -314,7 +323,7 @@ const BLOG = {
 
   // 作废配置
   AVATAR: process.env.NEXT_PUBLIC_AVATAR || '/avatar.svg', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png
-  TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖
+  TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖；此处请勿留空白，否则服务器无法编译
   HOME_BANNER_IMAGE:
       process.env.NEXT_PUBLIC_HOME_BANNER_IMAGE || './bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件
   DESCRIPTION:
diff --git a/components/Gitalk.js b/components/Gitalk.js
index 66b30174..166eb8c7 100644
--- a/components/Gitalk.js
+++ b/components/Gitalk.js
@@ -1,18 +1,44 @@
-import 'gitalk/dist/gitalk.css'
+// import 'gitalk/dist/gitalk.css'
 import BLOG from '@/blog.config'
-import GitalkComponent from 'gitalk/dist/gitalk-component'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+// import GitalkComponent from 'gitalk/dist/gitalk-component'
 
 const Gitalk = ({ frontMatter }) => {
-  return <GitalkComponent options={{
-    id: frontMatter.id,
-    title: frontMatter.title,
-    clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
-    clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
-    repo: BLOG.COMMENT_GITALK_REPO,
-    owner: BLOG.COMMENT_GITALK_OWNER,
-    admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
-    distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
-  }} />
+  //   return <GitalkComponent options={{
+  //     id: frontMatter.id,
+  //     title: frontMatter.title,
+  //     clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+  //     clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+  //     repo: BLOG.COMMENT_GITALK_REPO,
+  //     owner: BLOG.COMMENT_GITALK_OWNER,
+  //     admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+  //     distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
+  //   }} />
+  const loadGitalk = async() => {
+    const css = await loadExternalResource(BLOG.COMMENT_GITALK_CSS_CDN_URL, 'css')
+    const js = await loadExternalResource(BLOG.COMMENT_GITALK_JS_CDN_URL, 'js')
+
+    console.log('gitalk 加载成功', css, js)
+    const Gitalk = window.Gitalk
+
+    const gitalk = new Gitalk({
+      clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+      clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+      repo: BLOG.COMMENT_GITALK_REPO,
+      owner: BLOG.COMMENT_GITALK_OWNER,
+      admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+      id: frontMatter.id, // Ensure uniqueness and length less than 50
+      distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE) // Facebook-like distraction free mode
+    })
+
+    gitalk.render('gitalk-container')
+  }
+  useEffect(() => {
+    loadGitalk()
+  }, [])
+
+  return <div id="gitalk-container"></div>
 }
 
 export default Gitalk
diff --git a/components/NotionPage.js b/components/NotionPage.js
index c2466e03..63d57861 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -13,7 +13,7 @@ const Equation = dynamic(() =>
     // 化学方程式
     await import('@/lib/mhchem')
     return m.Equation
-  })
+  }), { ssr: false }
 )
 const Pdf = dynamic(
   () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
diff --git a/components/PrismMac.js b/components/PrismMac.js
index 0350fa60..8a4a4c51 100644
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -64,8 +64,11 @@ const renderMermaid = async() => {
       }
     }
     if (needLoad) {
-      const asyncMermaid = await import('mermaid')
-      asyncMermaid.default.contentLoaded()
+    //   const asyncMermaid = await import('mermaid')
+      const url = await loadExternalResource(BLOG.MERMAID_CDN, 'js')
+      const mermaid = window.mermaid
+      console.log('mermaid加载成功', url, mermaid)
+      mermaid.contentLoaded()
     }
   }
 }
diff --git a/components/Valine.js b/components/Valine.js
deleted file mode 100644
index c1e915db..00000000
--- a/components/Valine.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Valine } from 'react-valine'
-
-export default Valine
diff --git a/components/ValineComponent.js b/components/ValineComponent.js
index 6df63e7c..359cff6d 100644
--- a/components/ValineComponent.js
+++ b/components/ValineComponent.js
@@ -1,49 +1,61 @@
 import BLOG from '@/blog.config'
-import { useRouter } from 'next/router'
-import React from 'react'
-import Valine from 'valine'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
 
-const ValineComponent = (props) => {
-  const router = useRouter()
-  const initValine = (url) => {
-    const valine = new Valine({
-      el: '#v-comments',
-      appId: BLOG.COMMENT_VALINE_APP_ID,
-      appKey: BLOG.COMMENT_VALINE_APP_KEY,
-      avatar: '',
-      path: url || router.asPath,
-      recordIP: true,
-      placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER,
-      serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS,
-      visitor: true
-    })
-    if (!valine) {
-      console.error('valine错误')
+const ValineComponent = ({ path }) => {
+  const loadValine = async () => {
+    try {
+      const url = await loadExternalResource(BLOG.COMMENT_VALINE_CDN, 'js')
+      console.log('valine 加载成功', url)
+      const Valine = window.Valine
+      // eslint-disable-next-line no-unused-vars
+      const valine = new Valine({
+        el: '#valine', // 容器元素
+        lang: BLOG.LANG, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+        appId: BLOG.COMMENT_VALINE_APP_ID,
+        appKey: BLOG.COMMENT_VALINE_APP_KEY,
+        avatar: '',
+        path,
+        recordIP: true,
+        placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER,
+        serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS,
+        visitor: true
+      })
+      console.log('初始化valine成功')
+    } catch (error) {
+      console.error('twikoo 加载失败', error)
     }
   }
 
-  const updateValine = url => {
-    // 移除旧的评论区，否则会重复渲染。
-    const wrapper = document.getElementById('v-wrapper')
-    const comments = document.getElementById('v-comments')
-    wrapper.removeChild(comments)
-    const newComments = document.createElement('div')
-    newComments.id = 'v-comments'
-    newComments.name = new Date()
-    wrapper.appendChild(newComments)
-    initValine(url)
-  }
-
-  React.useEffect(() => {
-    initValine()
-    router.events.on('routeChangeComplete', updateValine)
-    return () => {
-      router.events.off('routeChangeComplete', updateValine)
-    }
+  useEffect(() => {
+    loadValine()
   }, [])
-  return <div id='v-wrapper'>
-      <div id='v-comments'></div>
-  </div>
+
+  return <div id="valine"></div>
+
+  //   const updateValine = url => {
+  //     // 移除旧的评论区，否则会重复渲染。
+  //     const wrapper = document.getElementById('v-wrapper')
+  //     const comments = document.getElementById('v-comments')
+  //     wrapper.removeChild(comments)
+  //     const newComments = document.createElement('div')
+  //     newComments.id = 'v-comments'
+  //     newComments.name = new Date()
+  //     wrapper.appendChild(newComments)
+  //     initValine(url)
+  //   }
+
+  //   useEffect(() => {
+  //     initValine()
+  //     router.events.on('routeChangeComplete', updateValine)
+  //     return () => {
+  //       router.events.off('routeChangeComplete', updateValine)
+  //     }
+  //   }, [])
+
+//   return <div id='v-wrapper'>
+//       <div id='v-comments'></div>
+//   </div>
 }
 
 export default ValineComponent
diff --git a/package.json b/package.json
index 50363485..c0f5452d 100644
--- a/package.json
+++ b/package.json
@@ -30,13 +30,11 @@
     "copy-to-clipboard": "^3.3.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "feed": "^4.2.2",
-    "gitalk": "^1.7.2",
     "js-md5": "^0.7.3",
     "localStorage": "^1.0.4",
     "lodash.throttle": "^4.1.1",
     "mark.js": "^8.11.1",
     "memory-cache": "^0.2.0",
-    "mermaid": "9.2.2",
     "mongodb": "^4.6.0",
     "next": "13.3.1",
     "notion-client": "6.15.6",
@@ -56,8 +54,7 @@
     "react-tweet-embed": "~2.0.0",
     "smoothscroll-polyfill": "^0.4.4",
     "typed.js": "^2.0.12",
-    "use-ackee": "^3.0.0",
-    "valine": "^1.4.18"
+    "use-ackee": "^3.0.0"
   },
   "devDependencies": {
     "@waline/client": "^2.5.1",
diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js
index c3374413..e72a931a 100644
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -5,6 +5,7 @@ import CONFIG_HEXO from '../config_hexo'
 import NavButtonGroup from './NavButtonGroup'
 import throttle from 'lodash.throttle'
 import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
 
 let wrapperTop = 0
 let windowTop = 0
@@ -25,7 +26,7 @@ const Header = props => {
     if (!typed && window && document.getElementById('typed')) {
       changeType(
         new Typed('#typed', {
-          strings: CONFIG_HEXO.HOME_BANNER_GREETINGS,
+          strings: BLOG.GREETING_WORDS.split(','),
           typeSpeed: 200,
           backSpeed: 100,
           backDelay: 400,
diff --git a/themes/hexo/config_hexo.js b/themes/hexo/config_hexo.js
index ded4489f..29ce7110 100644
--- a/themes/hexo/config_hexo.js
+++ b/themes/hexo/config_hexo.js
@@ -1,5 +1,6 @@
 const CONFIG_HEXO = {
   HOME_BANNER_ENABLE: true,
+  // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
   HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
 
   HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮

From 70ef50c6d0d5ae9ba71314d3ebd578f77a5daeb5 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 16:10:40 +0800
Subject: [PATCH 03/19] async

---
 components/DebugPanel.js       |  3 +-
 components/ExternalPlugins.js  | 58 ++++++++++++++++++++++++++++++++
 components/Fireworks.js        |  7 ++--
 components/FlutteringRibbon.js |  8 +++--
 components/MusicPlayer.js      |  7 ----
 components/Nest.js             |  4 ++-
 components/Ribbon.js           |  4 ++-
 components/Sakura.js           |  4 ++-
 components/StarrySky.js        |  3 +-
 components/ThemeSwitch.js      |  4 ++-
 pages/_app.js                  | 60 +++++++---------------------------
 themes/index.js                | 46 +++++++++++++-------------
 12 files changed, 118 insertions(+), 90 deletions(-)
 create mode 100644 components/ExternalPlugins.js
 delete mode 100644 components/MusicPlayer.js

diff --git a/components/DebugPanel.js b/components/DebugPanel.js
index 55c4a465..56fc8ce8 100644
--- a/components/DebugPanel.js
+++ b/components/DebugPanel.js
@@ -8,7 +8,7 @@ import { useGlobal } from '@/lib/global'
  *
  * @returns 调试面板
  */
-export function DebugPanel() {
+const DebugPanel = () => {
   const [show, setShow] = useState(false)
   const { theme, changeTheme, switchTheme, locale } = useGlobal()
   const [siteConfig, updateSiteConfig] = useState({})
@@ -128,3 +128,4 @@ export function DebugPanel() {
         </>
   )
 }
+export default DebugPanel
diff --git a/components/ExternalPlugins.js b/components/ExternalPlugins.js
new file mode 100644
index 00000000..235472d8
--- /dev/null
+++ b/components/ExternalPlugins.js
@@ -0,0 +1,58 @@
+import BLOG from 'blog.config'
+import dynamic from 'next/dynamic'
+
+// import TwikooCommentCounter from '@/components/TwikooCommentCounter'
+// import { DebugPanel } from '@/components/DebugPanel'
+// import { ThemeSwitch } from '@/components/ThemeSwitch'
+// import { Fireworks } from '@/components/Fireworks'
+// import { Nest } from '@/components/Nest'
+// import { FlutteringRibbon } from '@/components/FlutteringRibbon'
+// import { Ribbon } from '@/components/Ribbon'
+// import { Sakura } from '@/components/Sakura'
+// import { StarrySky } from '@/components/StarrySky'
+// import { Analytics } from '@vercel/analytics/react'
+
+const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false })
+const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false })
+const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), { ssr: false })
+const Fireworks = dynamic(() => import('@/components/Fireworks'), { ssr: false })
+const Nest = dynamic(() => import('@/components/Nest'), { ssr: false })
+const FlutteringRibbon = dynamic(() => import('@/components/FlutteringRibbon'), { ssr: false })
+const Ribbon = dynamic(() => import('@/components/Ribbon'), { ssr: false })
+const Sakura = dynamic(() => import('@/components/Sakura'), { ssr: false })
+const StarrySky = dynamic(() => import('@/components/StarrySky'), { ssr: false })
+const Analytics = dynamic(() => import('@vercel/analytics/react').then(async (m) => { return m.Analytics }), { ssr: false })
+const MusicPlayer = dynamic(() => import('@/components/Player'), { ssr: false })
+const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
+const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
+const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
+const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false })
+const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false })
+
+/**
+ * 各种第三方组件
+ * @param {*} props
+ * @returns
+ */
+const ExternalPlugin = (props) => {
+  return <>
+          {JSON.parse(BLOG.THEME_SWITCH) && <ThemeSwitch />}
+          {JSON.parse(BLOG.DEBUG) && <DebugPanel />}
+          {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
+          {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
+          {BLOG.ANALYTICS_VERCEL && <Analytics />}
+          {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
+          {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
+          {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
+          {JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
+          {JSON.parse(BLOG.SAKURA) && <Sakura />}
+          {JSON.parse(BLOG.STARRY_SKY) && <StarrySky />}
+          {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
+          {JSON.parse(BLOG.NEST) && <Nest />}
+          {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
+          {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props}/>}
+          {JSON.parse(BLOG.RIBBON) && <Ribbon />}
+      </>
+}
+
+export default ExternalPlugin
diff --git a/components/Fireworks.js b/components/Fireworks.js
index 8235baa7..d6b9a650 100644
--- a/components/Fireworks.js
+++ b/components/Fireworks.js
@@ -2,16 +2,17 @@
  * https://codepen.io/juliangarnier/pen/gmOwJX
  * custom by hexo-theme-yun @YunYouJun
  */
-import React from 'react'
+import { useEffect } from 'react'
 import anime from 'animejs'
 import BLOG from 'blog.config'
 
-export const Fireworks = () => {
-  React.useEffect(() => {
+const Fireworks = () => {
+  useEffect(() => {
     createFireworks({})
   }, [])
   return <canvas id='fireworks' className='fireworks'></canvas>
 }
+export default Fireworks
 
 /**
    * 创建烟花
diff --git a/components/FlutteringRibbon.js b/components/FlutteringRibbon.js
index 301fbd23..eb0f03e0 100644
--- a/components/FlutteringRibbon.js
+++ b/components/FlutteringRibbon.js
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import React from 'react'
+import { useEffect } from 'react'
 const  id = 'canvasFlutteringRibbon'
 export const FlutteringRibbon = () => {
      const destroyRibbon = ()=>{
@@ -9,15 +9,17 @@ export const FlutteringRibbon = () => {
       }
   }
   
-  React.useEffect(() => {
+  useEffect(() => {
     createFlutteringRibbon()
         return () => destroyRibbon()
 
   }, [])
     return <></>
-
 }
 
+export default FlutteringRibbon
+
+
 /**
  * 创建连接点
  * @param config
diff --git a/components/MusicPlayer.js b/components/MusicPlayer.js
deleted file mode 100644
index 7e788639..00000000
--- a/components/MusicPlayer.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import dynamic from 'next/dynamic'
-
-const MusicPlayer = dynamic(
-  () => import('@/components/Player'),
-  { ssr: false }
-)
-export default MusicPlayer
diff --git a/components/Nest.js b/components/Nest.js
index 74fa85e3..47453ad2 100644
--- a/components/Nest.js
+++ b/components/Nest.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { useEffect } from 'react'
 const id = 'canvasNestCreated'
-export const Nest = () => {
+const Nest = () => {
   const destroyNest = ()=>{
       const nest = document.getElementById(id)
       if(nest && nest.parentNode){
@@ -16,6 +16,8 @@ export const Nest = () => {
   return <></>
 }
 
+export default Nest
+
 /**
  * 创建连接点
  * @param config
diff --git a/components/Ribbon.js b/components/Ribbon.js
index 2c6855fc..468cf443 100644
--- a/components/Ribbon.js
+++ b/components/Ribbon.js
@@ -2,7 +2,7 @@
 import { useEffect } from 'react'
 const id = 'canvasRibbon'
 
-export const Ribbon = () => {
+const Ribbon = () => {
  const destroyRibbon = ()=>{
     const ribbon = document.getElementById(id)
       if(ribbon && ribbon.parentNode){
@@ -17,6 +17,8 @@ export const Ribbon = () => {
   return <></>
 }
 
+export default Ribbon
+
 /**
  * 创建连接点
  * @param config
diff --git a/components/Sakura.js b/components/Sakura.js
index 7898b3cc..aed87cc0 100644
--- a/components/Sakura.js
+++ b/components/Sakura.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { useEffect } from 'react'
 const id = 'canvas_sakura'
-export const Sakura = () => {
+const Sakura = () => {
   const destroySakura = ()=>{
     const sakura = document.getElementById(id)
     if(sakura && sakura.parentNode){
@@ -16,6 +16,8 @@ export const Sakura = () => {
   return <></>
 }
 
+export default Sakura
+
 /**
  * 创建樱花雨
  * @param config
diff --git a/components/StarrySky.js b/components/StarrySky.js
index 4cb5c8a5..5479df93 100644
--- a/components/StarrySky.js
+++ b/components/StarrySky.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React from 'react'
 
-export const StarrySky = () => {
+const StarrySky = () => {
   React.useEffect(() => {
     dark()
   }, [])
@@ -12,6 +12,7 @@ export const StarrySky = () => {
   )
 }
 
+export default StarrySky
 /**
  * 创建星空雨
  * @param config
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 6265e035..2540815c 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -6,7 +6,7 @@ import { Draggable } from './Draggable'
  *
  * @returns 主题切换
  */
-export function ThemeSwitch() {
+const ThemeSwitch = () => {
   const { theme, changeTheme } = useGlobal()
 
   const onSelectChange = (e) => {
@@ -30,3 +30,5 @@ export function ThemeSwitch() {
     </>
   )
 }
+
+export default ThemeSwitch
diff --git a/pages/_app.js b/pages/_app.js
index 9f83f261..41fc3de3 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,6 +1,4 @@
-import BLOG from 'blog.config'
-import React, { useEffect } from 'react'
-import dynamic from 'next/dynamic'
+import { useEffect } from 'react'
 
 import 'animate.css'
 import '@/styles/globals.css'
@@ -11,56 +9,21 @@ import 'react-notion-x/src/styles.css'
 import '@/styles/notion.css' //  重写部分样式
 
 import { GlobalContextProvider } from '@/lib/global'
-import { DebugPanel } from '@/components/DebugPanel'
-import { ThemeSwitch } from '@/components/ThemeSwitch'
-import { Fireworks } from '@/components/Fireworks'
-import { Nest } from '@/components/Nest'
-import { FlutteringRibbon } from '@/components/FlutteringRibbon'
-import { Ribbon } from '@/components/Ribbon'
-import { Sakura } from '@/components/Sakura'
-import { StarrySky } from '@/components/StarrySky'
-import MusicPlayer from '@/components/MusicPlayer'
-import ExternalScript from '@/components/ExternalScript'
-import smoothscroll from 'smoothscroll-polyfill'
-import { Analytics } from '@vercel/analytics/react'
 
+import { isMobile } from '@/lib/utils'
 import AOS from 'aos'
 import 'aos/dist/aos.css' // You can also use <link> for styles
-import { isMobile } from '@/lib/utils'
-import TwikooCommentCounter from '@/components/TwikooCommentCounter'
 
-const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
-const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
-const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
-const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), {
-  ssr: false
-})
-const Messenger = dynamic(() => import('@/components/FacebookMessenger'), {
-  ssr: false
-})
+import smoothscroll from 'smoothscroll-polyfill'
+import dynamic from 'next/dynamic'
+
+// 自定义样式css和js引入
+import ExternalScript from '@/components/ExternalScript'
+
+// 各种扩展插件 动画等
+const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))
 
 const MyApp = ({ Component, pageProps }) => {
-  // 外部插件
-  const externalPlugins = <>
-        {JSON.parse(BLOG.THEME_SWITCH) && <ThemeSwitch />}
-        {JSON.parse(BLOG.DEBUG) && <DebugPanel />}
-        {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
-        {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
-        {BLOG.ANALYTICS_VERCEL && <Analytics />}
-        {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
-        {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
-        {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
-        {JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
-        {JSON.parse(BLOG.SAKURA) && <Sakura />}
-        {JSON.parse(BLOG.STARRY_SKY) && <StarrySky />}
-        {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
-        {JSON.parse(BLOG.NEST) && <Nest />}
-        {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
-        {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...pageProps}/>}
-        {JSON.parse(BLOG.RIBBON) && <Ribbon />}
-        <ExternalScript/>
-    </>
-
   useEffect(() => {
     AOS.init()
     if (isMobile()) {
@@ -71,7 +34,8 @@ const MyApp = ({ Component, pageProps }) => {
   return (
         <GlobalContextProvider>
             <Component {...pageProps} />
-            {externalPlugins}
+            <ExternalPlugins {...pageProps}/>
+            <ExternalScript/>
         </GlobalContextProvider>
   )
 }
diff --git a/themes/index.js b/themes/index.js
index 7f87efb1..5316dee4 100644
--- a/themes/index.js
+++ b/themes/index.js
@@ -1,32 +1,32 @@
 /**
  * 切换主题请修改 blog.config.js 中的 THEME 字段
  */
-import * as next from './next'
-import * as fukasawa from './fukasawa'
 import * as hexo from './hexo'
-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'
+// 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'
+  'hexo'
+//   'matery',
+//   'next',
+//   'medium',
+//   'fukasawa',
+//   'nobelium',
+//   'example',
+//   'simple'
 ]
 export {
-  hexo,
-  next,
-  medium,
-  fukasawa,
-  nobelium,
-  matery,
-  example,
-  simple
+  hexo
+//   next,
+//   medium,
+//   fukasawa,
+//   nobelium,
+//   matery,
+//   example,
+//   simple
 }

From e791752e68d75b332c80b6991edd91a76c7965f3 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 17:17:38 +0800
Subject: [PATCH 04/19] async theme

---
 components/DebugPanel.js                 | 18 ++++++-------
 components/Live2D.js                     |  4 +--
 components/Loading.js                    | 10 ++++++++
 components/ThemeSwitch.js                |  2 +-
 jsconfig.json                            |  1 +
 lib/global.js                            |  3 +--
 lib/theme.js                             | 15 ++++++++++-
 pages/404.js                             |  7 +++---
 pages/[...slug].js                       | 27 ++++++++++----------
 pages/archive/index.js                   |  7 +++---
 pages/category/[category]/index.js       | 11 +++++---
 pages/category/[category]/page/[page].js | 11 +++++---
 pages/category/index.js                  |  6 ++---
 pages/index.js                           |  9 ++++---
 pages/page/[page].js                     |  8 +++---
 pages/search/[keyword]/index.js          | 14 ++++-------
 pages/search/[keyword]/page/[page].js    | 13 +++-------
 pages/search/index.js                    | 26 +++++++------------
 pages/tag/[tag]/index.js                 | 10 +++++---
 pages/tag/[tag]/page/[page].js           | 10 +++++---
 pages/tag/index.js                       |  7 +++---
 themes/hexo/components/SideBarDrawer.js  | 12 ++++-----
 themes/index.js                          | 32 ------------------------
 23 files changed, 127 insertions(+), 136 deletions(-)
 create mode 100644 components/Loading.js
 delete mode 100644 themes/index.js

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
-}

From 063dc63111f055e16928a80022cdcebc603b849a Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 18:08:04 +0800
Subject: [PATCH 05/19] hexo url

---
 themes/hexo/components/BlogPostCard.js     | 2 +-
 themes/hexo/components/BlogPostCardInfo.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 234acdac..5882f265 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -34,7 +34,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 {/* 图片封面 */}
                 {showPageCover && (
                     <div className="md:w-5/12 overflow-hidden">
-                        <Link href={`${post.slug}`} passHref legacyBehavior>
+                        <Link href={`/${post.slug}`} passHref legacyBehavior>
                             <div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
                         </Link>
                     </div>
diff --git a/themes/hexo/components/BlogPostCardInfo.js b/themes/hexo/components/BlogPostCardInfo.js
index a741c059..d89c126b 100644
--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/themes/hexo/components/BlogPostCardInfo.js
@@ -13,7 +13,7 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
        <div>
          {/* 标题 */}
          <Link
-            href={`${post.slug}`}
+            href={`/${post.slug}`}
             passHref
             className={`replace cursor-pointer hover:underline text-2xl ${showPreview ? 'text-center' : ''
                 } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>

From 351878dc1372793f2e96dad30b20b7733a882961 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 18:08:14 +0800
Subject: [PATCH 06/19]  async theme

---
 components/Live2D.js                     |  6 +++++-
 components/Loading.js                    | 13 +++++++++----
 components/PrismMac.js                   |  2 +-
 pages/404.js                             |  2 +-
 pages/[...slug].js                       |  2 +-
 pages/archive/index.js                   |  2 +-
 pages/category/[category]/index.js       |  4 ++--
 pages/category/[category]/page/[page].js |  4 ++--
 pages/index.js                           |  4 ++--
 pages/page/[page].js                     |  2 +-
 pages/search/[keyword]/index.js          |  2 +-
 pages/search/[keyword]/page/[page].js    |  2 +-
 pages/search/index.js                    |  2 +-
 pages/tag/[tag]/index.js                 |  4 ++--
 pages/tag/[tag]/page/[page].js           |  4 ++--
 pages/tag/index.js                       |  2 +-
 16 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/components/Live2D.js b/components/Live2D.js
index 4826a11b..f75c5438 100644
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -14,7 +14,11 @@ export default function Live2D() {
       ]).then((e) => {
         if (typeof window?.loadlive2d !== 'undefined') {
           // https://github.com/xiazeyu/live2d-widget-models
-          loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
+          try {
+            loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
+          } catch (error) {
+
+          }
         }
       })
     }
diff --git a/components/Loading.js b/components/Loading.js
index 57ccf401..d7cb08e3 100644
--- a/components/Loading.js
+++ b/components/Loading.js
@@ -1,10 +1,15 @@
+
 /**
  * 主题文件被加载出之前的占位符
  * @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>
+const Loading = (props) => {
+  const { current } = props
+
+  return <>
+  {current || <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/PrismMac.js b/components/PrismMac.js
index 8a4a4c51..c8a93c49 100644
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -25,7 +25,7 @@ const PrismMac = () => {
       }
       loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
       loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
-        console.log('渲染公式图表')
+        // console.log('渲染公式图表')
         if (window?.Prism?.plugins?.autoloader) {
           window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
         }
diff --git a/pages/404.js b/pages/404.js
index 02861a40..3afa60ee 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -11,7 +11,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: false, loading: () => <Loading /> })
+  const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
   return <Layout404 {...props} meta={meta}/>
 }
 
diff --git a/pages/[...slug].js b/pages/[...slug].js
index c3e58d78..00691796 100644
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -24,7 +24,7 @@ const Slug = props => {
 
   // 文章锁🔐
   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 /> })
+  const LayoutSlug = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSlug }), { ssr: true, loading: () => <Loading /> })
 
   useEffect(() => {
     changeLoadingState(false)
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 8d20f44f..17b1fd80 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -16,7 +16,7 @@ const ArchiveIndex = props => {
     type: 'website'
   }
 
-  const LayoutArchive = dynamic(() => import(`@/themes/${theme}/LayoutArchive`).then(async (m) => { return m.LayoutArchive }), { ssr: false, loading: () => <Loading /> })
+  const LayoutArchive = dynamic(() => import(`@/themes/${theme}/LayoutArchive`).then(async (m) => { return m.LayoutArchive }), { ssr: true, loading: () => <Loading /> })
   return <LayoutArchive {...props} meta={meta} />
 }
 
diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
index cd0a4403..246170b9 100644
--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -15,7 +15,7 @@ export default function Category(props) {
   const { siteInfo, posts } = props
   const { locale } = useGlobal()
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props} />
   }
   const meta = {
@@ -28,7 +28,7 @@ export default function Category(props) {
     type: 'website'
   }
 
-  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: false, loading: () => <Loading /> })
+  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
   return <LayoutCategory {...props} meta={meta} />
 }
 
diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
index f1dd286b..f537448a 100644
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -15,7 +15,7 @@ export default function Category(props) {
   const { siteInfo, posts } = props
   const { locale } = useGlobal()
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props} />
   }
   const meta = {
@@ -28,7 +28,7 @@ export default function Category(props) {
     type: 'website'
   }
 
-  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: false, loading: () => <Loading /> })
+  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
   return <LayoutCategory {...props} meta={meta} />
 }
 
diff --git a/pages/index.js b/pages/index.js
index e826dbd9..4fbd5673 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -14,8 +14,8 @@ import Loading from '@/components/Loading'
  */
 const Index = props => {
   const { theme } = useGlobal()
-  const LayoutIndex = dynamic(() => import(`@/themes/${theme}/LayoutIndex`)
-    .then(async (m) => { return m.LayoutIndex }), { ssr: false, loading: () => <Loading /> }
+  const LayoutIndex = dynamic(() => import(`@/themes/${theme}`)
+    .then(async (m) => { return m.LayoutIndex }), { ssr: true, loading: () => <Loading /> }
   )
   return <LayoutIndex {...props} />
 }
diff --git a/pages/page/[page].js b/pages/page/[page].js
index 8af1642b..b94194fc 100644
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -19,7 +19,7 @@ const Page = props => {
     type: 'website'
   }
 
-  const LayoutPage = dynamic(() => import(`@/themes/${theme}/LayoutPage`).then(async (m) => { return m.LayoutPage }), { ssr: false, loading: () => <Loading /> })
+  const LayoutPage = dynamic(() => import(`@/themes/${theme}/LayoutPage`).then(async (m) => { return m.LayoutPage }), { ssr: true, loading: () => <Loading /> })
   return <LayoutPage {...props} meta={meta} />
 }
 
diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
index e0ad07cd..a30ae812 100644
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -17,7 +17,7 @@ const Index = props => {
   }
   const { theme } = useGlobal()
 
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: false, loading: () => <Loading /> })
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, 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 54798107..188cc7b8 100644
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -16,7 +16,7 @@ const Index = props => {
     type: 'website'
   }
   const { theme } = useGlobal()
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: false, loading: () => <Loading /> })
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
   return <LayoutSearch {...props} currentSearch={keyword} meta={meta} />
 }
 
diff --git a/pages/search/index.js b/pages/search/index.js
index f132748d..c7e4f53d 100644
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -34,7 +34,7 @@ const Search = props => {
 
   const { theme } = useGlobal()
 
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: false, loading: () => <Loading /> })
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, 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 b87e954f..c12aace1 100644
--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -10,7 +10,7 @@ const Tag = props => {
   const { tag, siteInfo, posts } = props
 
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props}/>
   }
 
@@ -21,7 +21,7 @@ const Tag = props => {
     slug: 'tag/' + tag,
     type: 'website'
   }
-  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: false, loading: () => <Loading /> })
+  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => <Loading /> })
   return <LayoutTagIndex {...props} meta={meta} />
 }
 
diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js
index 45d01c84..7b89a2da 100644
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -10,7 +10,7 @@ const Tag = props => {
   const { tag, siteInfo, posts } = props
 
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props}/>
   }
 
@@ -21,7 +21,7 @@ const Tag = props => {
     slug: 'tag/' + tag,
     type: 'website'
   }
-  const LayoutTag = dynamic(() => import(`@/themes/${theme}/LayoutTag`).then(async (m) => { return m.LayoutTag }), { ssr: false, loading: () => <Loading /> })
+  const LayoutTag = dynamic(() => import(`@/themes/${theme}/LayoutTag`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => <Loading /> })
   return <LayoutTag {...props} meta={meta} />
 }
 
diff --git a/pages/tag/index.js b/pages/tag/index.js
index 1d2f3a29..e7299896 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -21,7 +21,7 @@ const TagIndex = props => {
     slug: 'tag',
     type: 'website'
   }
-  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: false, loading: () => <Loading /> })
+  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => <Loading /> })
   return <LayoutTagIndex {...props} meta={meta} />
 }
 

From 1513ab8b12c102cb93b03847175a71321eb269a1 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 18:29:12 +0800
Subject: [PATCH 07/19] theme async

---
 lib/memorize.js                          |  0
 lib/utils.js                             | 10 ++++++++++
 pages/[...slug].js                       | 14 +++++++-------
 pages/archive/index.js                   |  2 +-
 pages/category/[category]/index.js       |  4 ++--
 pages/category/[category]/page/[page].js |  4 ++--
 pages/category/index.js                  |  2 +-
 pages/index.js                           | 13 +++++++++----
 pages/page/[page].js                     |  2 +-
 pages/search/[keyword]/index.js          |  2 +-
 pages/search/[keyword]/page/[page].js    |  2 +-
 pages/search/index.js                    |  2 +-
 pages/tag/[tag]/index.js                 |  6 +++---
 pages/tag/[tag]/page/[page].js           |  4 ++--
 pages/tag/index.js                       |  2 +-
 15 files changed, 42 insertions(+), 27 deletions(-)
 create mode 100644 lib/memorize.js

diff --git a/lib/memorize.js b/lib/memorize.js
new file mode 100644
index 00000000..e69de29b
diff --git a/lib/utils.js b/lib/utils.js
index 6677e7df..df39fe64 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -1,5 +1,15 @@
 // 封装异步加载资源的方法
+import { memo } from 'react'
 
+/**
+ * 组件持久化
+ */
+export const memorize = (Component) => {
+  const MemoizedComponent = (props) => {
+    return <Component {...props} />
+  }
+  return memo(MemoizedComponent)
+}
 /**
  * 加载外部资源
  * @param url 地址 例如 https://xx.com/xx.js
diff --git a/pages/[...slug].js b/pages/[...slug].js
index 00691796..b4ac5682 100644
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -5,7 +5,7 @@ import { useGlobal } from '@/lib/global'
 import { useEffect, useState } from 'react'
 import { idToUuid } from 'notion-utils'
 import { useRouter } from 'next/router'
-import { isBrowser } from '@/lib/utils'
+import { isBrowser, memorize } from '@/lib/utils'
 import { getNotion } from '@/lib/notion/getNotion'
 import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
 import md5 from 'js-md5'
@@ -17,7 +17,7 @@ import Loading from '@/components/Loading'
  * @param {*} props
  * @returns
  */
-const Slug = props => {
+const Slug = memorize(props => {
   const { theme, changeLoadingState } = useGlobal()
   const { post, siteInfo } = props
   const router = useRouter()
@@ -60,9 +60,9 @@ const Slug = props => {
   }
 
   /**
-   * 验证文章密码
-   * @param {*} result
-   */
+     * 验证文章密码
+     * @param {*} result
+     */
   const validPassword = passInput => {
     const encrypt = md5(post.slug + passInput)
 
@@ -86,9 +86,9 @@ const Slug = props => {
   }
 
   return (
-    <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
+      <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
   )
-}
+})
 
 export async function getStaticPaths() {
   if (!BLOG.isProd) {
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 17b1fd80..6a247414 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -16,7 +16,7 @@ const ArchiveIndex = props => {
     type: 'website'
   }
 
-  const LayoutArchive = dynamic(() => import(`@/themes/${theme}/LayoutArchive`).then(async (m) => { return m.LayoutArchive }), { ssr: true, loading: () => <Loading /> })
+  const LayoutArchive = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutArchive }), { ssr: true, loading: () => <Loading /> })
   return <LayoutArchive {...props} meta={meta} />
 }
 
diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
index 246170b9..28725614 100644
--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -15,7 +15,7 @@ export default function Category(props) {
   const { siteInfo, posts } = props
   const { locale } = useGlobal()
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props} />
   }
   const meta = {
@@ -28,7 +28,7 @@ export default function Category(props) {
     type: 'website'
   }
 
-  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
+  const LayoutCategory = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
   return <LayoutCategory {...props} meta={meta} />
 }
 
diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
index f537448a..bb7d6d26 100644
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -15,7 +15,7 @@ export default function Category(props) {
   const { siteInfo, posts } = props
   const { locale } = useGlobal()
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props} />
   }
   const meta = {
@@ -28,7 +28,7 @@ export default function Category(props) {
     type: 'website'
   }
 
-  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
+  const LayoutCategory = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
   return <LayoutCategory {...props} meta={meta} />
 }
 
diff --git a/pages/category/index.js b/pages/category/index.js
index 3c74ef59..8c7c6515 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -20,7 +20,7 @@ export default function Category(props) {
     slug: 'category',
     type: 'website'
   }
-  const LayoutCategoryIndex = dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`).then(async (m) => { return m.LayoutCategoryIndex }), { ssr: false })
+  const LayoutCategoryIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategoryIndex }), { ssr: false })
   return <LayoutCategoryIndex {...props} meta={meta} />
 }
 
diff --git a/pages/index.js b/pages/index.js
index 4fbd5673..86ee427a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -6,19 +6,24 @@ import { generateRss } from '@/lib/rss'
 import { generateRobotsTxt } from '@/lib/robots.txt'
 import dynamic from 'next/dynamic'
 import Loading from '@/components/Loading'
+import { memorize } from '@/lib/utils'
 
 /**
  * 首页布局
  * @param {*} props
  * @returns
  */
-const Index = props => {
+const Index = memorize(props => {
   const { theme } = useGlobal()
-  const LayoutIndex = dynamic(() => import(`@/themes/${theme}`)
-    .then(async (m) => { return m.LayoutIndex }), { ssr: true, loading: () => <Loading /> }
+  const LayoutIndex = dynamic(
+    () =>
+      import(`@/themes/${theme}`).then((m) => {
+        return m.LayoutIndex
+      }),
+    { ssr: true, loading: () => <Loading /> }
   )
   return <LayoutIndex {...props} />
-}
+})
 
 /**
  * SSG 获取数据
diff --git a/pages/page/[page].js b/pages/page/[page].js
index b94194fc..252ec566 100644
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -19,7 +19,7 @@ const Page = props => {
     type: 'website'
   }
 
-  const LayoutPage = dynamic(() => import(`@/themes/${theme}/LayoutPage`).then(async (m) => { return m.LayoutPage }), { ssr: true, loading: () => <Loading /> })
+  const LayoutPage = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutPage }), { ssr: true, loading: () => <Loading /> })
   return <LayoutPage {...props} meta={meta} />
 }
 
diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
index a30ae812..dd81f60f 100644
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -17,7 +17,7 @@ const Index = props => {
   }
   const { theme } = useGlobal()
 
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, 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 188cc7b8..57ab7163 100644
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -16,7 +16,7 @@ const Index = props => {
     type: 'website'
   }
   const { theme } = useGlobal()
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
   return <LayoutSearch {...props} currentSearch={keyword} meta={meta} />
 }
 
diff --git a/pages/search/index.js b/pages/search/index.js
index c7e4f53d..a2347808 100644
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -34,7 +34,7 @@ const Search = props => {
 
   const { theme } = useGlobal()
 
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
+  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} />
 }
 
diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js
index c12aace1..1ba4f220 100644
--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -10,7 +10,7 @@ const Tag = props => {
   const { tag, siteInfo, posts } = props
 
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props}/>
   }
 
@@ -21,8 +21,8 @@ const Tag = props => {
     slug: 'tag/' + tag,
     type: 'website'
   }
-  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutTagIndex {...props} meta={meta} />
+  const LayoutTag = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => <Loading /> })
+  return <LayoutTag {...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 7b89a2da..c3fc2009 100644
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -10,7 +10,7 @@ const Tag = props => {
   const { tag, siteInfo, posts } = props
 
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props}/>
   }
 
@@ -21,7 +21,7 @@ const Tag = props => {
     slug: 'tag/' + tag,
     type: 'website'
   }
-  const LayoutTag = dynamic(() => import(`@/themes/${theme}/LayoutTag`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => <Loading /> })
+  const LayoutTag = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => <Loading /> })
   return <LayoutTag {...props} meta={meta} />
 }
 
diff --git a/pages/tag/index.js b/pages/tag/index.js
index e7299896..3f69551e 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -21,7 +21,7 @@ const TagIndex = props => {
     slug: 'tag',
     type: 'website'
   }
-  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => <Loading /> })
+  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => <Loading /> })
   return <LayoutTagIndex {...props} meta={meta} />
 }
 

From b492515eb9c6747e038b4a19c6f5b8c7f494a74e Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 18:31:26 +0800
Subject: [PATCH 08/19] Loading

---
 components/Loading.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Loading.js b/components/Loading.js
index d7cb08e3..50353a96 100644
--- a/components/Loading.js
+++ b/components/Loading.js
@@ -7,7 +7,7 @@ const Loading = (props) => {
   const { current } = props
 
   return <>
-  {current || <div className="w-screen h-screen flex justify-center items-center">
+  {current || <div className="w-screen h-screen flex justify-center items-center bg-white dark:bg-black">
           <h1>Loading... <i className='ml-2 fas fa-spinner animate-spin' /></h1>
       </div>}
   </>

From 8ace4b2f6458b4aa8d51a6d26bff214bbaa705db Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 21:37:45 +0800
Subject: [PATCH 09/19] reading resources

---
 components/Loading.js       | 19 +++++++++++-----
 components/LoadingCover.js  | 15 +++++++++++++
 components/SideBarDrawer.js |  8 +++----
 lib/global.js               | 44 +++++++++++++++++++------------------
 pages/[...slug].js          |  4 ++--
 5 files changed, 57 insertions(+), 33 deletions(-)
 create mode 100644 components/LoadingCover.js

diff --git a/components/Loading.js b/components/Loading.js
index 50353a96..eccd29d2 100644
--- a/components/Loading.js
+++ b/components/Loading.js
@@ -1,15 +1,22 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect } from 'react'
 
 /**
  * 主题文件被加载出之前的占位符
  * @returns
  */
 const Loading = (props) => {
-  const { current } = props
+  const { theme, setOnReading } = useGlobal()
 
-  return <>
-  {current || <div className="w-screen h-screen flex justify-center items-center bg-white dark:bg-black">
-          <h1>Loading... <i className='ml-2 fas fa-spinner animate-spin' /></h1>
-      </div>}
-  </>
+  useEffect(() => {
+    // 返回一个函数，在组件销毁时设置 onReading 为 false
+    return () => {
+      setOnReading(false)
+    }
+  }, [theme])
+
+  return <div className="w-screen h-screen flex justify-center items-center dark:bg-black text-black dark:text-white">
+        <h1 className="text-2xl"><i className='mr-5 fas fa-spinner animate-spin' />Loading...</h1>
+    </div>
 }
 export default Loading
diff --git a/components/LoadingCover.js b/components/LoadingCover.js
new file mode 100644
index 00000000..148425e7
--- /dev/null
+++ b/components/LoadingCover.js
@@ -0,0 +1,15 @@
+
+/**
+ * 加载主题文件时的全局遮罩
+ * @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>
+    </>
+}
+export default LoadingCover
diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
index 0db865cb..422f24ff 100644
--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -29,11 +29,11 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
     if (showStatus) {
-      sideBarDrawer.classList.replace('-ml-60', 'ml-0')
-      sideBarDrawerBackground.classList.replace('hidden', 'block')
+      sideBarDrawer?.classList.replace('-ml-60', 'ml-0')
+      sideBarDrawerBackground?.classList.replace('hidden', 'block')
     } else {
-      sideBarDrawer.classList.replace('ml-0', '-ml-60')
-      sideBarDrawerBackground.classList.replace('block', 'hidden')
+      sideBarDrawer?.classList.replace('ml-0', '-ml-60')
+      sideBarDrawerBackground?.classList.replace('block', 'hidden')
     }
   }
 
diff --git a/lib/global.js b/lib/global.js
index a55a17b3..3dbcb0b0 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -4,6 +4,7 @@ import Router, { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
 import { ALL_THEME, initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
 import NProgress from 'nprogress'
+import LoadingCover from '@/components/LoadingCover'
 
 const GlobalContext = createContext()
 
@@ -14,11 +15,12 @@ const GlobalContext = createContext()
  * @constructor
  */
 export function GlobalContextProvider({ children }) {
-  const [lang, updateLang] = useState(BLOG.LANG)
-  const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG))
-  const [theme, setTheme] = useState(BLOG.THEME)
-  const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark')
-  const [onLoading, changeLoadingState] = useState(false)
+  const [lang, updateLang] = useState(BLOG.LANG) // 默认语言
+  const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG)) // 默认语言
+  const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
+  const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
+  const [onLoading, setOnLoading] = useState(false) // 加载文章数据
+  const [onReading, setOnReading] = useState(true) // 资源加载中
   const router = useRouter()
 
   useEffect(() => {
@@ -30,11 +32,11 @@ export function GlobalContextProvider({ children }) {
   useEffect(() => {
     const handleStart = (url) => {
       NProgress.start()
-      changeLoadingState(true)
+      setOnLoading(true)
     }
     const handleStop = () => {
       NProgress.done()
-      changeLoadingState(false)
+      setOnLoading(false)
     }
 
     router.events.on('routeChangeStart', handleStart)
@@ -66,20 +68,20 @@ export function GlobalContextProvider({ children }) {
   }
 
   return (
-        <GlobalContext.Provider value={
-            {
-              onLoading,
-              changeLoadingState,
-              locale,
-              updateLocale,
-              isDarkMode,
-              updateDarkMode,
-              theme,
-              setTheme,
-              switchTheme,
-              changeTheme
-            }
-        }>
+        <GlobalContext.Provider value={{
+          onLoading,
+          setOnLoading,
+          locale,
+          updateLocale,
+          isDarkMode,
+          updateDarkMode,
+          theme,
+          setTheme,
+          switchTheme,
+          changeTheme,
+          setOnReading
+        }}>
+            <LoadingCover onReading={onReading} setOnReading={setOnReading}/>
             {children}
         </GlobalContext.Provider>
   )
diff --git a/pages/[...slug].js b/pages/[...slug].js
index b4ac5682..56bb1e37 100644
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -18,7 +18,7 @@ import Loading from '@/components/Loading'
  * @returns
  */
 const Slug = memorize(props => {
-  const { theme, changeLoadingState } = useGlobal()
+  const { theme, setOnLoading } = useGlobal()
   const { post, siteInfo } = props
   const router = useRouter()
 
@@ -27,7 +27,7 @@ const Slug = memorize(props => {
   const LayoutSlug = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSlug }), { ssr: true, loading: () => <Loading /> })
 
   useEffect(() => {
-    changeLoadingState(false)
+    setOnLoading(false)
     if (post?.password && post?.password !== '') {
       setLock(true)
     } else {

From 1b5900c35fd6112056f341c3ab4daadcb10b47f9 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 4 Jun 2023 22:05:32 +0800
Subject: [PATCH 10/19] reading

---
 components/Loading.js |  8 +++++---
 lib/global.js         | 15 +++++++++++++--
 pages/[...slug].js    | 28 +++++++++++++---------------
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/components/Loading.js b/components/Loading.js
index eccd29d2..5f5b10d9 100644
--- a/components/Loading.js
+++ b/components/Loading.js
@@ -11,12 +11,14 @@ const Loading = (props) => {
   useEffect(() => {
     // 返回一个函数，在组件销毁时设置 onReading 为 false
     return () => {
-      setOnReading(false)
+      setTimeout(() => {
+        setOnReading(false)
+      }, 500)
     }
   }, [theme])
 
-  return <div className="w-screen h-screen flex justify-center items-center dark:bg-black text-black dark:text-white">
-        <h1 className="text-2xl"><i className='mr-5 fas fa-spinner animate-spin' />Loading...</h1>
+  return <div className="w-screen h-screen flex justify-center items-center bg-black">
+        <h1 className="text-2xl"><i className='mr-5 fas fa-spinner animate-spin' /></h1>
     </div>
 }
 export default Loading
diff --git a/lib/global.js b/lib/global.js
index 3dbcb0b0..db8b3349 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -5,6 +5,7 @@ import BLOG from '@/blog.config'
 import { ALL_THEME, initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
 import NProgress from 'nprogress'
 import LoadingCover from '@/components/LoadingCover'
+import { isBrowser } from './utils'
 
 const GlobalContext = createContext()
 
@@ -19,14 +20,24 @@ export function GlobalContextProvider({ children }) {
   const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG)) // 默认语言
   const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
   const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
-  const [onLoading, setOnLoading] = useState(false) // 加载文章数据
-  const [onReading, setOnReading] = useState(true) // 资源加载中
+  const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
+  const [onReading, setOnReading] = useState(true) // 网页资源加载
   const router = useRouter()
 
   useEffect(() => {
     initLocale(lang, locale, updateLang, updateLocale)
     initDarkMode(isDarkMode, updateDarkMode)
     initTheme(theme, changeTheme)
+    if (isBrowser()) {
+      // 监听用户刷新页面
+      const handleBeforeUnload = (event) => {
+        setOnReading(true)
+      }
+      window.addEventListener('beforeunload', handleBeforeUnload)
+      return () => {
+        window.removeEventListener('beforeunload', handleBeforeUnload)
+      }
+    }
   }, [])
 
   useEffect(() => {
diff --git a/pages/[...slug].js b/pages/[...slug].js
index 56bb1e37..6b80f825 100644
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -26,6 +26,19 @@ const Slug = memorize(props => {
   const [lock, setLock] = useState(post?.password && post?.password !== '')
   const LayoutSlug = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSlug }), { ssr: true, loading: () => <Loading /> })
 
+  /**
+     * 验证文章密码
+     * @param {*} result
+     */
+  const validPassword = passInput => {
+    const encrypt = md5(post.slug + passInput)
+    if (passInput && encrypt === post.password) {
+      setLock(false)
+      return true
+    }
+    return false
+  }
+
   useEffect(() => {
     setOnLoading(false)
     if (post?.password && post?.password !== '') {
@@ -35,7 +48,6 @@ const Slug = memorize(props => {
         post.content = Object.keys(post.blockMap.block).filter(key => post.blockMap.block[key]?.value?.parent_id === post.id)
         post.toc = getPageTableOfContents(post, post.blockMap)
       }
-
       setLock(false)
     }
     router.events.on('routeChangeComplete', () => {
@@ -59,20 +71,6 @@ const Slug = memorize(props => {
     return <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
   }
 
-  /**
-     * 验证文章密码
-     * @param {*} result
-     */
-  const validPassword = passInput => {
-    const encrypt = md5(post.slug + passInput)
-
-    if (passInput && encrypt === post.password) {
-      setLock(false)
-      return true
-    }
-    return false
-  }
-
   props = { ...props, lock, setLock, validPassword }
 
   const meta = {

From 18ca12f176efeb32278e46236de996504c241178 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Tue, 6 Jun 2023 19:01:05 +0800
Subject: [PATCH 11/19] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Loading.js |  2 +-
 pages/index.js        | 35 ++++++++++++++++++++++++-----------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/components/Loading.js b/components/Loading.js
index 5f5b10d9..e7c5f5a1 100644
--- a/components/Loading.js
+++ b/components/Loading.js
@@ -18,7 +18,7 @@ const Loading = (props) => {
   }, [theme])
 
   return <div className="w-screen h-screen flex justify-center items-center bg-black">
-        <h1 className="text-2xl"><i className='mr-5 fas fa-spinner animate-spin' /></h1>
+       <i className='mr-5 fas fa-spinner animate-spin text-2xl' />
     </div>
 }
 export default Loading
diff --git a/pages/index.js b/pages/index.js
index 86ee427a..6aa7fc52 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,25 +5,38 @@ 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'
-import { memorize } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+
+/**
+ * 懒加载默认主题
+ */
+const DefaultLayoutIndex = dynamic(() => import(`@/themes/${BLOG.THEME}`).then(async (m) => {
+  return m.LayoutIndex
+}), { ssr: true })
 
 /**
  * 首页布局
  * @param {*} props
  * @returns
  */
-const Index = memorize(props => {
-  const { theme } = useGlobal()
-  const LayoutIndex = dynamic(
-    () =>
-      import(`@/themes/${theme}`).then((m) => {
+const Index = props => {
+  // 动态切换主题
+  const { theme, setOnReading } = useGlobal()
+  const [LayoutIndex, setLayoutIndex] = useState(DefaultLayoutIndex)
+
+  useEffect(() => {
+    const loadLayout = async () => {
+      const NewLayoutIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => {
+        setOnReading(false)
         return m.LayoutIndex
-      }),
-    { ssr: true, loading: () => <Loading /> }
-  )
+      }), { ssr: true })
+      setLayoutIndex(NewLayoutIndex)
+    }
+    loadLayout()
+  }, [theme])
+
   return <LayoutIndex {...props} />
-})
+}
 
 /**
  * SSG 获取数据

From 02320a822b673785552b56e84749112f333a0b1b Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Tue, 6 Jun 2023 22:10:57 +0800
Subject: [PATCH 12/19] =?UTF-8?q?header=20=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/hexo/components/HeaderArticle.js   | 6 +++++-
 themes/matery/components/HeaderArticle.js | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/themes/hexo/components/HeaderArticle.js b/themes/hexo/components/HeaderArticle.js
index 7e19985a..95997fa3 100644
--- a/themes/hexo/components/HeaderArticle.js
+++ b/themes/hexo/components/HeaderArticle.js
@@ -21,7 +21,11 @@ export default function HeaderArticle({ post, siteInfo }) {
   return (
     <div
       id="header"
-      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn z-10"
+      data-aos="fade-down"
+      data-aos-duration="300"
+      data-aos-once="true"
+      data-aos-anchor-placement="top-bottom"
+      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10"
       style={{ backgroundImage: headerImage }}
     >
       <header id='article-header-cover'
diff --git a/themes/matery/components/HeaderArticle.js b/themes/matery/components/HeaderArticle.js
index 004d76d1..2a526c8a 100644
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -7,9 +7,9 @@ export default function HeaderArticle({ post, siteInfo }) {
         <div
             data-aos="fade-down"
             data-aos-duration="300"
-            data-aos-once="false"
+            data-aos-once="true"
             data-aos-anchor-placement="top-center"
-            id='header' className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black">
+            id='header' className="flex h-96 justify-center align-middle items-center w-full relative bg-black">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             {/* <img
                 src={headerImage}

From a0912d4767592d829c57ba3b8c6ada818096e878 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Tue, 6 Jun 2023 22:33:26 +0800
Subject: [PATCH 13/19] duplicate layout

---
 pages/index.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 6aa7fc52..94334aef 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,7 +5,8 @@ import { useGlobal } from '@/lib/global'
 import { generateRss } from '@/lib/rss'
 import { generateRobotsTxt } from '@/lib/robots.txt'
 import dynamic from 'next/dynamic'
-import { useEffect, useState } from 'react'
+import { Suspense, useEffect, useState } from 'react'
+import Loading from '@/components/Loading'
 
 /**
  * 懒加载默认主题
@@ -26,16 +27,26 @@ const Index = props => {
 
   useEffect(() => {
     const loadLayout = async () => {
-      const NewLayoutIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => {
-        setOnReading(false)
-        return m.LayoutIndex
-      }), { ssr: true })
-      setLayoutIndex(NewLayoutIndex)
+      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)
+      }
     }
+
     loadLayout()
   }, [theme])
 
-  return <LayoutIndex {...props} />
+  return (
+      <Suspense fallback={<Loading/>}>
+        <LayoutIndex {...props} />
+      </Suspense>
+  )
 }
 
 /**

From d1a4e8e9b930b12e0eb0e74d78989fd09c4e7cf0 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Tue, 6 Jun 2023 23:24:18 +0800
Subject: [PATCH 14/19] post-url

---
 lib/notion/getPageProperties.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js
index 185bc008..1d4554df 100644
--- a/lib/notion/getPageProperties.js
+++ b/lib/notion/getPageProperties.js
@@ -172,5 +172,9 @@ function generateCustomizeUrl(postProperties) {
       fullSlug += '/'
     }
   })
+  if (fullSlug.startsWith('/')) {
+    fullSlug = fullSlug.substring(1) // 去掉头部的"/"
+  }
+
   return `${fullSlug}/${(postProperties.slug ?? postProperties.id)}`
 }

From 9247c4d3081a5860af1e4e23a506914c6c4b331b Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Tue, 6 Jun 2023 23:33:12 +0800
Subject: [PATCH 15/19] post - url

---
 themes/hexo/components/BlogPostCard.js     | 3 ++-
 themes/hexo/components/BlogPostCardInfo.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 5882f265..af2192b0 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -2,6 +2,7 @@ import Link from 'next/link'
 import React from 'react'
 import CONFIG_HEXO from '../config_hexo'
 import { BlogPostCardInfo } from './BlogPostCardInfo'
+import BLOG from '@/blog.config'
 // import Image from 'next/image'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
@@ -34,7 +35,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 {/* 图片封面 */}
                 {showPageCover && (
                     <div className="md:w-5/12 overflow-hidden">
-                        <Link href={`/${post.slug}`} passHref legacyBehavior>
+                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                             <div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
                         </Link>
                     </div>
diff --git a/themes/hexo/components/BlogPostCardInfo.js b/themes/hexo/components/BlogPostCardInfo.js
index d89c126b..508114f4 100644
--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/themes/hexo/components/BlogPostCardInfo.js
@@ -2,6 +2,7 @@ import NotionPage from '@/components/NotionPage'
 import Link from 'next/link'
 import TagItemMini from './TagItemMini'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
+import BLOG from '@/blog.config'
 
 /**
  * 博客列表的文字内容
@@ -13,7 +14,7 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
        <div>
          {/* 标题 */}
          <Link
-            href={`/${post.slug}`}
+            href={`${BLOG.SUB_PATH}/${post.slug}`}
             passHref
             className={`replace cursor-pointer hover:underline text-2xl ${showPreview ? 'text-center' : ''
                 } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>

From 00d32c81e08ad8f1d74ea661fb8b50b1f945447c Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 7 Jun 2023 15:39:41 +0800
Subject: [PATCH 16/19] =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=BC=82=E6=AD=A5=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Live2D.js                     |  7 +--
 components/Loading.js                    | 23 ++++-----
 components/LoadingCover.js               | 10 ++--
 lib/global.js                            |  2 +
 pages/404.js                             |  3 +-
 pages/[...slug].js                       | 61 ++++++++++++++----------
 pages/archive/index.js                   | 26 ++++++++--
 pages/category/[category]/index.js       | 33 +++++++++----
 pages/category/[category]/page/[page].js | 31 ++++++++----
 pages/category/index.js                  | 26 ++++++++--
 pages/index.js                           | 32 ++++---------
 pages/page/[page].js                     | 31 +++++++++---
 pages/search/[keyword]/index.js          | 25 ++++++++--
 pages/search/[keyword]/page/[page].js    | 25 ++++++++--
 pages/search/index.js                    | 23 +++++++--
 pages/tag/[tag]/index.js                 | 27 ++++++++---
 pages/tag/[tag]/page/[page].js           | 28 +++++++----
 pages/tag/index.js                       | 24 ++++++++--
 themes/example/Layout404.js              |  2 +
 themes/example/LayoutArchive.js          |  2 +
 themes/example/LayoutCategory.js         |  2 +
 themes/example/LayoutCategoryIndex.js    |  2 +
 themes/example/LayoutIndex.js            |  2 +
 themes/example/LayoutPage.js             |  2 +
 themes/example/LayoutSlug.js             |  2 +
 themes/example/LayoutTag.js              |  2 +
 themes/example/LayoutTagIndex.js         |  2 +
 themes/example/index.js                  | 25 ----------
 themes/fukasawa/Layout404.js             |  2 +
 themes/fukasawa/LayoutArchive.js         |  2 +
 themes/fukasawa/LayoutCategory.js        |  2 +
 themes/fukasawa/LayoutCategoryIndex.js   |  2 +
 themes/fukasawa/LayoutIndex.js           |  2 +
 themes/fukasawa/LayoutPage.js            |  2 +
 themes/fukasawa/LayoutSearch.js          |  2 +
 themes/fukasawa/LayoutSlug.js            |  2 +
 themes/fukasawa/LayoutTag.js             |  3 +-
 themes/fukasawa/LayoutTagIndex.js        |  3 +-
 themes/fukasawa/index.js                 | 25 ----------
 themes/hexo/Layout404.js                 |  1 +
 themes/hexo/LayoutArchive.js             |  2 +
 themes/hexo/LayoutCategory.js            |  2 +
 themes/hexo/LayoutCategoryIndex.js       |  2 +
 themes/hexo/LayoutIndex.js               |  2 +
 themes/hexo/LayoutPage.js                |  2 +
 themes/hexo/LayoutSearch.js              |  2 +
 themes/hexo/LayoutSlug.js                |  2 +
 themes/hexo/LayoutTag.js                 |  2 +
 themes/hexo/LayoutTagIndex.js            |  2 +
 themes/hexo/index.js                     | 25 ----------
 themes/matery/Layout404.js               |  2 +
 themes/matery/LayoutArchive.js           |  2 +
 themes/matery/LayoutCategory.js          |  2 +
 themes/matery/LayoutCategoryIndex.js     |  2 +
 themes/matery/LayoutIndex.js             |  2 +
 themes/matery/LayoutPage.js              |  2 +
 themes/matery/LayoutSearch.js            |  2 +
 themes/matery/LayoutSlug.js              |  2 +
 themes/matery/LayoutTag.js               |  3 +-
 themes/matery/LayoutTagIndex.js          |  3 +-
 themes/matery/index.js                   | 25 ----------
 themes/medium/Layout404.js               |  2 +
 themes/medium/LayoutArchive.js           |  2 +
 themes/medium/LayoutCategory.js          |  2 +
 themes/medium/LayoutCategoryIndex.js     |  1 +
 themes/medium/LayoutIndex.js             |  2 +
 themes/medium/LayoutPage.js              |  2 +
 themes/medium/LayoutSearch.js            |  2 +
 themes/medium/LayoutSlug.js              |  2 +
 themes/medium/LayoutTag.js               |  2 +
 themes/medium/LayoutTagIndex.js          |  2 +
 themes/medium/index.js                   | 25 ----------
 themes/next/Layout404.js                 |  1 +
 themes/next/LayoutArchive.js             |  2 +
 themes/next/LayoutCategory.js            |  2 +
 themes/next/LayoutCategoryIndex.js       |  2 +
 themes/next/LayoutIndex.js               |  5 +-
 themes/next/LayoutPage.js                |  2 +
 themes/next/LayoutSearch.js              |  2 +
 themes/next/LayoutSlug.js                |  2 +
 themes/next/LayoutTag.js                 |  2 +
 themes/next/LayoutTagIndex.js            |  2 +
 themes/next/components/ArticleDetail.js  |  3 +-
 themes/next/config_next.js               |  3 +-
 themes/next/index.js                     | 25 ----------
 themes/nobelium/Layout404.js             |  2 +
 themes/nobelium/LayoutArchive.js         |  2 +
 themes/nobelium/LayoutCategory.js        |  2 +
 themes/nobelium/LayoutCategoryIndex.js   |  2 +
 themes/nobelium/LayoutIndex.js           |  2 +
 themes/nobelium/LayoutPage.js            |  2 +
 themes/nobelium/LayoutSearch.js          |  2 +
 themes/nobelium/LayoutSlug.js            |  2 +
 themes/nobelium/LayoutTag.js             |  2 +
 themes/nobelium/LayoutTagIndex.js        |  2 +
 themes/nobelium/index.js                 | 25 ----------
 themes/simple/Layout404.js               |  2 +
 themes/simple/LayoutArchive.js           |  2 +
 themes/simple/LayoutCategory.js          |  2 +
 themes/simple/LayoutCategoryIndex.js     |  2 +
 themes/simple/LayoutIndex.js             |  2 +
 themes/simple/LayoutPage.js              |  2 +
 themes/simple/LayoutSearch.js            |  2 +
 themes/simple/LayoutSlug.js              |  2 +
 themes/simple/LayoutTag.js               |  2 +
 themes/simple/LayoutTagIndex.js          |  2 +
 themes/simple/index.js                   | 25 ----------
 107 files changed, 467 insertions(+), 338 deletions(-)
 delete mode 100644 themes/example/index.js
 delete mode 100644 themes/fukasawa/index.js
 delete mode 100644 themes/hexo/index.js
 delete mode 100644 themes/matery/index.js
 delete mode 100644 themes/medium/index.js
 delete mode 100644 themes/next/index.js
 delete mode 100644 themes/nobelium/index.js
 delete mode 100644 themes/simple/index.js

diff --git a/components/Live2D.js b/components/Live2D.js
index f75c5438..2fc6327f 100644
--- 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 <></>
   }
 
diff --git a/components/Loading.js b/components/Loading.js
index e7c5f5a1..1cf295cd 100644
--- 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' />
diff --git a/components/LoadingCover.js b/components/LoadingCover.js
index 148425e7..c9ec6752 100644
--- 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
diff --git a/lib/global.js b/lib/global.js
index db8b3349..f96d326a 100644
--- 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)
diff --git a/pages/404.js b/pages/404.js
index 3afa60ee..f23edcec 100644
--- 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}/>
 }
 
diff --git a/pages/[...slug].js b/pages/[...slug].js
index 138a9cda..f0d3f8d2 100644
--- 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() {
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 6a247414..bb095411 100644
--- 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() {
diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
index 28725614..1db1e85c 100644
--- 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 } }) {
diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
index bb7d6d26..7ed2d109 100644
--- 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 } }) {
diff --git a/pages/category/index.js b/pages/category/index.js
index 8c7c6515..d4c6ab00 100644
--- 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() {
diff --git a/pages/index.js b/pages/index.js
index 94334aef..8de156c9 100644
--- 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>
 }
 
 /**
diff --git a/pages/page/[page].js b/pages/page/[page].js
index 252ec566..e3b03ddd 100644
--- 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() {
diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
index dd81f60f..92b18fb3 100644
--- 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>
 }
 
 /**
diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js
index 57ab7163..a279f332 100644
--- 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>
 }
 
 /**
diff --git a/pages/search/index.js b/pages/search/index.js
index a2347808..06fd3984 100644
--- 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>
 }
 
 /**
diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js
index 1ba4f220..8b5729f3 100644
--- 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 } }) {
diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js
index c3fc2009..2adb6c2c 100644
--- 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 } }) {
diff --git a/pages/tag/index.js b/pages/tag/index.js
index 3f69551e..8b8bc1c7 100644
--- 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() {
diff --git a/themes/example/Layout404.js b/themes/example/Layout404.js
index 5f92f0cc..c0992ad3 100644
--- 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
diff --git a/themes/example/LayoutArchive.js b/themes/example/LayoutArchive.js
index 4ba92d8a..81ec0781 100644
--- a/themes/example/LayoutArchive.js
+++ b/themes/example/LayoutArchive.js
@@ -43,3 +43,5 @@ export const LayoutArchive = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutArchive
diff --git a/themes/example/LayoutCategory.js b/themes/example/LayoutCategory.js
index 6d819185..517a5e82 100644
--- 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
diff --git a/themes/example/LayoutCategoryIndex.js b/themes/example/LayoutCategoryIndex.js
index a4c19033..d969516b 100644
--- a/themes/example/LayoutCategoryIndex.js
+++ b/themes/example/LayoutCategoryIndex.js
@@ -24,3 +24,5 @@ export const LayoutCategoryIndex = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutCategoryIndex
diff --git a/themes/example/LayoutIndex.js b/themes/example/LayoutIndex.js
index 94eaac2f..18024d9c 100644
--- a/themes/example/LayoutIndex.js
+++ b/themes/example/LayoutIndex.js
@@ -11,3 +11,5 @@ export const LayoutIndex = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutIndex
diff --git a/themes/example/LayoutPage.js b/themes/example/LayoutPage.js
index 15355018..184251a8 100644
--- a/themes/example/LayoutPage.js
+++ b/themes/example/LayoutPage.js
@@ -8,3 +8,5 @@ export const LayoutPage = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutPage
diff --git a/themes/example/LayoutSlug.js b/themes/example/LayoutSlug.js
index b19f51ff..2ab9c557 100644
--- a/themes/example/LayoutSlug.js
+++ b/themes/example/LayoutSlug.js
@@ -29,3 +29,5 @@ export const LayoutSlug = props => {
         </LayoutBase>
   )
 }
+
+export default LayoutSlug
diff --git a/themes/example/LayoutTag.js b/themes/example/LayoutTag.js
index 06a6d778..f12ae546 100644
--- 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
diff --git a/themes/example/LayoutTagIndex.js b/themes/example/LayoutTagIndex.js
index 0705c2d6..63ffa7ca 100644
--- a/themes/example/LayoutTagIndex.js
+++ b/themes/example/LayoutTagIndex.js
@@ -27,3 +27,5 @@ export const LayoutTagIndex = (props) => {
             </div>   </LayoutBase>
   )
 }
+
+export default LayoutTagIndex
diff --git a/themes/example/index.js b/themes/example/index.js
deleted file mode 100644
index dd762bd4..00000000
--- a/themes/example/index.js
+++ /dev/null
@@ -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
-}
diff --git a/themes/fukasawa/Layout404.js b/themes/fukasawa/Layout404.js
index 183001c9..98ae689a 100644
--- 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
diff --git a/themes/fukasawa/LayoutArchive.js b/themes/fukasawa/LayoutArchive.js
index 495ed6a4..f82f3e35 100644
--- a/themes/fukasawa/LayoutArchive.js
+++ b/themes/fukasawa/LayoutArchive.js
@@ -28,3 +28,5 @@ export const LayoutArchive = (props) => {
       </div>
   </LayoutBase>
 }
+
+export default LayoutArchive
diff --git a/themes/fukasawa/LayoutCategory.js b/themes/fukasawa/LayoutCategory.js
index fa6c8c0d..c633a439 100644
--- 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
diff --git a/themes/fukasawa/LayoutCategoryIndex.js b/themes/fukasawa/LayoutCategoryIndex.js
index 9e9cdd9c..469ab973 100644
--- a/themes/fukasawa/LayoutCategoryIndex.js
+++ b/themes/fukasawa/LayoutCategoryIndex.js
@@ -31,3 +31,5 @@ export const LayoutCategoryIndex = (props) => {
     </LayoutBase>
   )
 }
+
+export default LayoutCategoryIndex
diff --git a/themes/fukasawa/LayoutIndex.js b/themes/fukasawa/LayoutIndex.js
index 47ae1bce..d4e7451b 100644
--- 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
diff --git a/themes/fukasawa/LayoutPage.js b/themes/fukasawa/LayoutPage.js
index a3c39788..c3a85397 100644
--- a/themes/fukasawa/LayoutPage.js
+++ b/themes/fukasawa/LayoutPage.js
@@ -8,3 +8,5 @@ export const LayoutPage = (props) => {
 
   </LayoutBase>
 }
+
+export default LayoutPage
diff --git a/themes/fukasawa/LayoutSearch.js b/themes/fukasawa/LayoutSearch.js
index fcfa35b2..58aeaf88 100644
--- 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
diff --git a/themes/fukasawa/LayoutSlug.js b/themes/fukasawa/LayoutSlug.js
index fb78690c..73e22a00 100644
--- a/themes/fukasawa/LayoutSlug.js
+++ b/themes/fukasawa/LayoutSlug.js
@@ -11,3 +11,5 @@ export const LayoutSlug = (props) => {
     </LayoutBase>
   )
 }
+
+export default LayoutSlug
diff --git a/themes/fukasawa/LayoutTag.js b/themes/fukasawa/LayoutTag.js
index 46e9e0fd..104b6884 100644
--- 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
diff --git a/themes/fukasawa/LayoutTagIndex.js b/themes/fukasawa/LayoutTagIndex.js
index df43fdeb..30f602a6 100644
--- 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
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
deleted file mode 100644
index 58968469..00000000
--- a/themes/fukasawa/index.js
+++ /dev/null
@@ -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
-}
diff --git a/themes/hexo/Layout404.js b/themes/hexo/Layout404.js
index 609b6e7c..fcf2bf2c 100644
--- a/themes/hexo/Layout404.js
+++ b/themes/hexo/Layout404.js
@@ -30,3 +30,4 @@ export const Layout404 = props => {
     </LayoutBase>
   )
 }
+export default Layout404
diff --git a/themes/hexo/LayoutArchive.js b/themes/hexo/LayoutArchive.js
index 94dc9267..44f81c08 100644
--- a/themes/hexo/LayoutArchive.js
+++ b/themes/hexo/LayoutArchive.js
@@ -32,3 +32,5 @@ export const LayoutArchive = (props) => {
     </Card>
   </LayoutBase>
 }
+
+export default LayoutArchive
diff --git a/themes/hexo/LayoutCategory.js b/themes/hexo/LayoutCategory.js
index 7df32650..3aedefef 100644
--- 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
diff --git a/themes/hexo/LayoutCategoryIndex.js b/themes/hexo/LayoutCategoryIndex.js
index 0d0a24d0..bd4e278e 100644
--- a/themes/hexo/LayoutCategoryIndex.js
+++ b/themes/hexo/LayoutCategoryIndex.js
@@ -37,3 +37,5 @@ export const LayoutCategoryIndex = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutCategoryIndex
diff --git a/themes/hexo/LayoutIndex.js b/themes/hexo/LayoutIndex.js
index 48cc29e4..388e69bf 100644
--- 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
diff --git a/themes/hexo/LayoutPage.js b/themes/hexo/LayoutPage.js
index ac32c985..58d35c0a 100644
--- a/themes/hexo/LayoutPage.js
+++ b/themes/hexo/LayoutPage.js
@@ -6,3 +6,5 @@ export const LayoutPage = (props) => {
       <BlogPostListPage {...props}/>
   </LayoutBase>
 }
+
+export default LayoutPage
diff --git a/themes/hexo/LayoutSearch.js b/themes/hexo/LayoutSearch.js
index bf9c6daa..1098e483 100644
--- a/themes/hexo/LayoutSearch.js
+++ b/themes/hexo/LayoutSearch.js
@@ -97,3 +97,5 @@ export const LayoutSearch = props => {
       </LayoutBase>
   )
 }
+
+export default LayoutSearch
diff --git a/themes/hexo/LayoutSlug.js b/themes/hexo/LayoutSlug.js
index 120d4243..9c8ff361 100644
--- a/themes/hexo/LayoutSlug.js
+++ b/themes/hexo/LayoutSlug.js
@@ -93,3 +93,5 @@ export const LayoutSlug = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutSlug
diff --git a/themes/hexo/LayoutTag.js b/themes/hexo/LayoutTag.js
index 36a9ce7d..fa63df85 100644
--- a/themes/hexo/LayoutTag.js
+++ b/themes/hexo/LayoutTag.js
@@ -30,3 +30,5 @@ export const LayoutTag = (props) => {
         </LayoutBase>
   )
 }
+
+export default LayoutTag
diff --git a/themes/hexo/LayoutTagIndex.js b/themes/hexo/LayoutTagIndex.js
index 5e83966a..40e7e234 100644
--- a/themes/hexo/LayoutTagIndex.js
+++ b/themes/hexo/LayoutTagIndex.js
@@ -26,3 +26,5 @@ export const LayoutTagIndex = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutTagIndex
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
deleted file mode 100644
index 8528d5da..00000000
--- a/themes/hexo/index.js
+++ /dev/null
@@ -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
-}
diff --git a/themes/matery/Layout404.js b/themes/matery/Layout404.js
index 609b6e7c..21fcade3 100644
--- a/themes/matery/Layout404.js
+++ b/themes/matery/Layout404.js
@@ -30,3 +30,5 @@ export const Layout404 = props => {
     </LayoutBase>
   )
 }
+
+export default Layout404
diff --git a/themes/matery/LayoutArchive.js b/themes/matery/LayoutArchive.js
index 49accca0..94b40239 100644
--- a/themes/matery/LayoutArchive.js
+++ b/themes/matery/LayoutArchive.js
@@ -32,3 +32,5 @@ export const LayoutArchive = (props) => {
     </Card>
   </LayoutBase>
 }
+
+export default LayoutArchive
diff --git a/themes/matery/LayoutCategory.js b/themes/matery/LayoutCategory.js
index 6e9524ab..a50f3a40 100644
--- a/themes/matery/LayoutCategory.js
+++ b/themes/matery/LayoutCategory.js
@@ -36,3 +36,5 @@ export const LayoutCategory = props => {
         </LayoutBase>
   )
 }
+
+export default LayoutCategory
diff --git a/themes/matery/LayoutCategoryIndex.js b/themes/matery/LayoutCategoryIndex.js
index b6eda2bb..f6fd0023 100644
--- a/themes/matery/LayoutCategoryIndex.js
+++ b/themes/matery/LayoutCategoryIndex.js
@@ -30,3 +30,5 @@ export const LayoutCategoryIndex = props => {
       </LayoutBase>
   )
 }
+
+export default LayoutCategoryIndex
diff --git a/themes/matery/LayoutIndex.js b/themes/matery/LayoutIndex.js
index a25c360a..6c92d2c4 100644
--- 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
diff --git a/themes/matery/LayoutPage.js b/themes/matery/LayoutPage.js
index b0841c1c..e3d72944 100644
--- a/themes/matery/LayoutPage.js
+++ b/themes/matery/LayoutPage.js
@@ -6,3 +6,5 @@ export const LayoutPage = (props) => {
       <BlogPostListPage {...props}/>
   </LayoutBase>
 }
+
+export default LayoutPage
diff --git a/themes/matery/LayoutSearch.js b/themes/matery/LayoutSearch.js
index 94ccbb96..10df7b11 100644
--- a/themes/matery/LayoutSearch.js
+++ b/themes/matery/LayoutSearch.js
@@ -97,3 +97,5 @@ export const LayoutSearch = props => {
       </LayoutBase>
   )
 }
+
+export default LayoutSearch
diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index 362e8be4..6e98ceb3 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -128,3 +128,5 @@ export const LayoutSlug = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutSlug
diff --git a/themes/matery/LayoutTag.js b/themes/matery/LayoutTag.js
index 4f0ac66b..1a2e9054 100644
--- 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
diff --git a/themes/matery/LayoutTagIndex.js b/themes/matery/LayoutTagIndex.js
index d1d19835..f25ba122 100644
--- 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
diff --git a/themes/matery/index.js b/themes/matery/index.js
deleted file mode 100644
index 528e1e80..00000000
--- a/themes/matery/index.js
+++ /dev/null
@@ -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
-}
diff --git a/themes/medium/Layout404.js b/themes/medium/Layout404.js
index 02cdc048..68b656cc 100644
--- 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
diff --git a/themes/medium/LayoutArchive.js b/themes/medium/LayoutArchive.js
index a1449b72..101b7119 100644
--- a/themes/medium/LayoutArchive.js
+++ b/themes/medium/LayoutArchive.js
@@ -45,3 +45,5 @@ export const LayoutArchive = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutArchive
diff --git a/themes/medium/LayoutCategory.js b/themes/medium/LayoutCategory.js
index c20a4cde..a947b70e 100644
--- 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
diff --git a/themes/medium/LayoutCategoryIndex.js b/themes/medium/LayoutCategoryIndex.js
index c9c79254..2c8121ad 100644
--- a/themes/medium/LayoutCategoryIndex.js
+++ b/themes/medium/LayoutCategoryIndex.js
@@ -31,3 +31,4 @@ export const LayoutCategoryIndex = (props) => {
     </LayoutBase>
   )
 }
+export default LayoutCategoryIndex
diff --git a/themes/medium/LayoutIndex.js b/themes/medium/LayoutIndex.js
index 35e80571..41410467 100644
--- 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
diff --git a/themes/medium/LayoutPage.js b/themes/medium/LayoutPage.js
index cec493ce..563df90b 100644
--- a/themes/medium/LayoutPage.js
+++ b/themes/medium/LayoutPage.js
@@ -6,3 +6,5 @@ export const LayoutPage = (props) => {
       <BlogPostListPage {...props} />
   </LayoutBase>
 }
+
+export default LayoutPage
diff --git a/themes/medium/LayoutSearch.js b/themes/medium/LayoutSearch.js
index 0ff29b6d..1aaf3d20 100644
--- a/themes/medium/LayoutSearch.js
+++ b/themes/medium/LayoutSearch.js
@@ -49,3 +49,5 @@ export const LayoutSearch = (props) => {
     </div>}
   </LayoutBase>
 }
+
+export default LayoutSearch
diff --git a/themes/medium/LayoutSlug.js b/themes/medium/LayoutSlug.js
index 401c4a03..dab24ed0 100644
--- a/themes/medium/LayoutSlug.js
+++ b/themes/medium/LayoutSlug.js
@@ -106,3 +106,5 @@ export const LayoutSlug = props => {
         </LayoutBase>
   )
 }
+
+export default LayoutSlug
diff --git a/themes/medium/LayoutTag.js b/themes/medium/LayoutTag.js
index 51a7ca59..bedb51ef 100644
--- 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
diff --git a/themes/medium/LayoutTagIndex.js b/themes/medium/LayoutTagIndex.js
index 1f173bd2..cc9f8c94 100644
--- a/themes/medium/LayoutTagIndex.js
+++ b/themes/medium/LayoutTagIndex.js
@@ -25,3 +25,5 @@ export const LayoutTagIndex = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutTagIndex
diff --git a/themes/medium/index.js b/themes/medium/index.js
deleted file mode 100644
index 81961c58..00000000
--- a/themes/medium/index.js
+++ /dev/null
@@ -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
-}
diff --git a/themes/next/Layout404.js b/themes/next/Layout404.js
index 8c1bc421..61c48d37 100644
--- a/themes/next/Layout404.js
+++ b/themes/next/Layout404.js
@@ -29,3 +29,4 @@ export const Layout404 = props => {
     </div>
   </LayoutBase>
 }
+export default Layout404
diff --git a/themes/next/LayoutArchive.js b/themes/next/LayoutArchive.js
index ebd94ed3..29f6683c 100644
--- a/themes/next/LayoutArchive.js
+++ b/themes/next/LayoutArchive.js
@@ -31,3 +31,5 @@ export const LayoutArchive = (props) => {
     </LayoutBase>
   )
 }
+
+export default LayoutArchive
diff --git a/themes/next/LayoutCategory.js b/themes/next/LayoutCategory.js
index ec71cb95..aaf07970 100644
--- a/themes/next/LayoutCategory.js
+++ b/themes/next/LayoutCategory.js
@@ -19,3 +19,5 @@ export const LayoutCategory = (props) => {
     </div>
   </LayoutBase>
 }
+
+export default LayoutCategory
diff --git a/themes/next/LayoutCategoryIndex.js b/themes/next/LayoutCategoryIndex.js
index 0dd99e0f..ca7d992a 100644
--- a/themes/next/LayoutCategoryIndex.js
+++ b/themes/next/LayoutCategoryIndex.js
@@ -31,3 +31,5 @@ export const LayoutCategoryIndex = (props) => {
     </LayoutBase>
   )
 }
+
+export default LayoutCategoryIndex
diff --git a/themes/next/LayoutIndex.js b/themes/next/LayoutIndex.js
index c43dc3d3..31cfee1c 100644
--- 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
diff --git a/themes/next/LayoutPage.js b/themes/next/LayoutPage.js
index 7cd06dab..710392fd 100644
--- a/themes/next/LayoutPage.js
+++ b/themes/next/LayoutPage.js
@@ -15,3 +15,5 @@ export const LayoutPage = (props) => {
     </LayoutBase>
   )
 }
+
+export default LayoutPage
diff --git a/themes/next/LayoutSearch.js b/themes/next/LayoutSearch.js
index 78664343..31e102fd 100644
--- a/themes/next/LayoutSearch.js
+++ b/themes/next/LayoutSearch.js
@@ -37,3 +37,5 @@ export const LayoutSearch = (props) => {
     </LayoutBase>
   )
 }
+
+export default LayoutSearch
diff --git a/themes/next/LayoutSlug.js b/themes/next/LayoutSlug.js
index 0087bf93..9870d457 100644
--- a/themes/next/LayoutSlug.js
+++ b/themes/next/LayoutSlug.js
@@ -40,3 +40,5 @@ export const LayoutSlug = (props) => {
     </LayoutBase>
   )
 }
+
+export default LayoutSlug
diff --git a/themes/next/LayoutTag.js b/themes/next/LayoutTag.js
index c70307e8..9bf9b0c4 100644
--- a/themes/next/LayoutTag.js
+++ b/themes/next/LayoutTag.js
@@ -20,3 +20,5 @@ export const LayoutTag = (props) => {
         </div>
     </LayoutBase>
 }
+
+export default LayoutTag
diff --git a/themes/next/LayoutTagIndex.js b/themes/next/LayoutTagIndex.js
index 5278dd8f..a8e96067 100644
--- a/themes/next/LayoutTagIndex.js
+++ b/themes/next/LayoutTagIndex.js
@@ -16,3 +16,5 @@ export const LayoutTagIndex = (props) => {
     </div>
   </LayoutBase>
 }
+
+export default LayoutTagIndex
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
index c0c2efac..da882db9 100644
--- 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 (
diff --git a/themes/next/config_next.js b/themes/next/config_next.js
index d341cee0..b1f311a3 100644
--- 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 // 显示文章信息
 
 }
 
diff --git a/themes/next/index.js b/themes/next/index.js
deleted file mode 100644
index 45286719..00000000
--- a/themes/next/index.js
+++ /dev/null
@@ -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
-}
diff --git a/themes/nobelium/Layout404.js b/themes/nobelium/Layout404.js
index 5f92f0cc..c0992ad3 100644
--- 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
diff --git a/themes/nobelium/LayoutArchive.js b/themes/nobelium/LayoutArchive.js
index 4ba92d8a..81ec0781 100644
--- a/themes/nobelium/LayoutArchive.js
+++ b/themes/nobelium/LayoutArchive.js
@@ -43,3 +43,5 @@ export const LayoutArchive = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutArchive
diff --git a/themes/nobelium/LayoutCategory.js b/themes/nobelium/LayoutCategory.js
index 6d819185..517a5e82 100644
--- 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
diff --git a/themes/nobelium/LayoutCategoryIndex.js b/themes/nobelium/LayoutCategoryIndex.js
index 3cf9c10d..6a4f255d 100644
--- a/themes/nobelium/LayoutCategoryIndex.js
+++ b/themes/nobelium/LayoutCategoryIndex.js
@@ -25,3 +25,5 @@ export const LayoutCategoryIndex = (props) => {
     </LayoutBase>
   )
 }
+
+export default LayoutCategoryIndex
diff --git a/themes/nobelium/LayoutIndex.js b/themes/nobelium/LayoutIndex.js
index 8bf7541a..d1e74923 100644
--- a/themes/nobelium/LayoutIndex.js
+++ b/themes/nobelium/LayoutIndex.js
@@ -13,3 +13,5 @@ export const LayoutIndex = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutIndex
diff --git a/themes/nobelium/LayoutPage.js b/themes/nobelium/LayoutPage.js
index 15355018..184251a8 100644
--- a/themes/nobelium/LayoutPage.js
+++ b/themes/nobelium/LayoutPage.js
@@ -8,3 +8,5 @@ export const LayoutPage = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutPage
diff --git a/themes/nobelium/LayoutSearch.js b/themes/nobelium/LayoutSearch.js
index 2da4772c..b1995820 100644
--- a/themes/nobelium/LayoutSearch.js
+++ b/themes/nobelium/LayoutSearch.js
@@ -54,3 +54,5 @@ export const LayoutSearch = props => {
 
     </LayoutBase>
 }
+
+export default LayoutSearch
diff --git a/themes/nobelium/LayoutSlug.js b/themes/nobelium/LayoutSlug.js
index d27628af..ea2cfb3a 100644
--- a/themes/nobelium/LayoutSlug.js
+++ b/themes/nobelium/LayoutSlug.js
@@ -31,3 +31,5 @@ export const LayoutSlug = props => {
         </LayoutBase>
   )
 }
+
+export default LayoutSlug
diff --git a/themes/nobelium/LayoutTag.js b/themes/nobelium/LayoutTag.js
index 2d85004b..55607f00 100644
--- a/themes/nobelium/LayoutTag.js
+++ b/themes/nobelium/LayoutTag.js
@@ -55,3 +55,5 @@ export const LayoutTag = props => {
       </div>
     </LayoutBase >
 }
+
+export default LayoutTag
diff --git a/themes/nobelium/LayoutTagIndex.js b/themes/nobelium/LayoutTagIndex.js
index 0705c2d6..63ffa7ca 100644
--- a/themes/nobelium/LayoutTagIndex.js
+++ b/themes/nobelium/LayoutTagIndex.js
@@ -27,3 +27,5 @@ export const LayoutTagIndex = (props) => {
             </div>   </LayoutBase>
   )
 }
+
+export default LayoutTagIndex
diff --git a/themes/nobelium/index.js b/themes/nobelium/index.js
deleted file mode 100644
index dda0f1a2..00000000
--- a/themes/nobelium/index.js
+++ /dev/null
@@ -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
-}
diff --git a/themes/simple/Layout404.js b/themes/simple/Layout404.js
index 5f92f0cc..c0992ad3 100644
--- 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
diff --git a/themes/simple/LayoutArchive.js b/themes/simple/LayoutArchive.js
index 4ba92d8a..81ec0781 100644
--- a/themes/simple/LayoutArchive.js
+++ b/themes/simple/LayoutArchive.js
@@ -43,3 +43,5 @@ export const LayoutArchive = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutArchive
diff --git a/themes/simple/LayoutCategory.js b/themes/simple/LayoutCategory.js
index 6d819185..517a5e82 100644
--- 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
diff --git a/themes/simple/LayoutCategoryIndex.js b/themes/simple/LayoutCategoryIndex.js
index a4c19033..d969516b 100644
--- a/themes/simple/LayoutCategoryIndex.js
+++ b/themes/simple/LayoutCategoryIndex.js
@@ -24,3 +24,5 @@ export const LayoutCategoryIndex = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutCategoryIndex
diff --git a/themes/simple/LayoutIndex.js b/themes/simple/LayoutIndex.js
index 94eaac2f..18024d9c 100644
--- a/themes/simple/LayoutIndex.js
+++ b/themes/simple/LayoutIndex.js
@@ -11,3 +11,5 @@ export const LayoutIndex = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutIndex
diff --git a/themes/simple/LayoutPage.js b/themes/simple/LayoutPage.js
index 15355018..184251a8 100644
--- a/themes/simple/LayoutPage.js
+++ b/themes/simple/LayoutPage.js
@@ -8,3 +8,5 @@ export const LayoutPage = props => {
     </LayoutBase>
   )
 }
+
+export default LayoutPage
diff --git a/themes/simple/LayoutSearch.js b/themes/simple/LayoutSearch.js
index 1ba8fef7..597e7c25 100644
--- a/themes/simple/LayoutSearch.js
+++ b/themes/simple/LayoutSearch.js
@@ -48,3 +48,5 @@ export const LayoutSearch = props => {
 
     </LayoutBase>
 }
+
+export default LayoutSearch
diff --git a/themes/simple/LayoutSlug.js b/themes/simple/LayoutSlug.js
index 96f42c3e..4f6fc66f 100644
--- a/themes/simple/LayoutSlug.js
+++ b/themes/simple/LayoutSlug.js
@@ -33,3 +33,5 @@ export const LayoutSlug = props => {
         </LayoutBase>
   )
 }
+
+export default LayoutSlug
diff --git a/themes/simple/LayoutTag.js b/themes/simple/LayoutTag.js
index 06a6d778..f12ae546 100644
--- a/themes/simple/LayoutTag.js
+++ b/themes/simple/LayoutTag.js
@@ -8,3 +8,5 @@ export const LayoutTag = props => {
        {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
     </LayoutBase >
 }
+
+export default LayoutTag
diff --git a/themes/simple/LayoutTagIndex.js b/themes/simple/LayoutTagIndex.js
index 0705c2d6..63ffa7ca 100644
--- a/themes/simple/LayoutTagIndex.js
+++ b/themes/simple/LayoutTagIndex.js
@@ -27,3 +27,5 @@ export const LayoutTagIndex = (props) => {
             </div>   </LayoutBase>
   )
 }
+
+export default LayoutTagIndex
diff --git a/themes/simple/index.js b/themes/simple/index.js
deleted file mode 100644
index 7e560470..00000000
--- a/themes/simple/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-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
-}

From d98d1f4c4b7a08ae9cf199f7933ee84f808e6e74 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 7 Jun 2023 15:44:26 +0800
Subject: [PATCH 17/19] 3.15

---
 .env.local               | 2 +-
 package.json             | 2 +-
 pages/[...slug].js       | 2 +-
 themes/hexo/LayoutTag.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.env.local b/.env.local
index 90456af7..11f8351f 100644
--- a/.env.local
+++ b/.env.local
@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.14.0
\ No newline at end of file
+NEXT_PUBLIC_VERSION=3.15.0
\ No newline at end of file
diff --git a/package.json b/package.json
index c0f5452d..67dbcd6c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {
diff --git a/pages/[...slug].js b/pages/[...slug].js
index f0d3f8d2..d62a110a 100644
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -126,7 +126,7 @@ export async function getStaticProps({ params: { slug } }) {
   const from = `slug-props-${fullSlug}`
   const props = await getGlobalNotionData({ from })
   // 在列表内查找文章
-  props.post = props.allPages.find((p) => {
+  props.post = props?.allPages?.find((p) => {
     return p.slug === fullSlug || p.id === idToUuid(fullSlug)
   })
 
diff --git a/themes/hexo/LayoutTag.js b/themes/hexo/LayoutTag.js
index fa63df85..cd72a015 100644
--- a/themes/hexo/LayoutTag.js
+++ b/themes/hexo/LayoutTag.js
@@ -6,7 +6,7 @@ import React from 'react'
 import Link from 'next/link'
 
 export const LayoutTag = (props) => {
-  const tag = props.tagOptions.find((t) => {
+  const tag = props?.tagOptions?.find((t) => {
     return t.name === props.tag
   })
 

From 93fd5b8fe36281b735469a0c470da6829233e8ce Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 7 Jun 2023 15:47:31 +0800
Subject: [PATCH 18/19] fix/ build

---
 components/TwikooCommentCounter.js            | 2 +-
 lib/notion/getAllCategories.js                | 2 +-
 lib/notion/getAllTags.js                      | 2 +-
 themes/fukasawa/components/BlogPostArchive.js | 2 +-
 themes/hexo/components/ArticleRecommend.js    | 2 +-
 themes/hexo/components/BlogPostArchive.js     | 2 +-
 themes/hexo/components/BlogPostListPage.js    | 2 +-
 themes/hexo/components/LatestPostsGroup.js    | 2 +-
 themes/matery/components/ArticleRecommend.js  | 2 +-
 themes/matery/components/BlogPostArchive.js   | 2 +-
 themes/matery/components/BlogPostListPage.js  | 2 +-
 themes/matery/components/LatestPostsGroup.js  | 2 +-
 themes/medium/components/BlogPostListPage.js  | 2 +-
 themes/next/components/BlogPostArchive.js     | 2 +-
 themes/next/components/BlogPostListPage.js    | 2 +-
 themes/next/components/LatestPostsGroup.js    | 2 +-
 themes/next/components/RecommendPosts.js      | 2 +-
 17 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/components/TwikooCommentCounter.js b/components/TwikooCommentCounter.js
index 9688d005..b3b54ca3 100644
--- a/components/TwikooCommentCounter.js
+++ b/components/TwikooCommentCounter.js
@@ -24,7 +24,7 @@ const TwikooCommentCounter = (props) => {
       twikoo.getCommentsCount({
         envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 环境 ID
         // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
-        urls: posts.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
+        urls: posts?.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
         includeReply: true // 评论数是否包括回复，默认：false
       }).then(function (res) {
         // console.log('查询', res)
diff --git a/lib/notion/getAllCategories.js b/lib/notion/getAllCategories.js
index b7700bc1..fd26b9b1 100644
--- a/lib/notion/getAllCategories.js
+++ b/lib/notion/getAllCategories.js
@@ -19,7 +19,7 @@ export function getAllCategories({ allPages, categoryOptions, sliceCount = 0 })
     return []
   }
   // 计数
-  let categories = allPosts.map(p => p.category)
+  let categories = allposts?.map(p => p.category)
   categories = [...categories.flat()]
   const categoryObj = {}
   categories.forEach(category => {
diff --git a/lib/notion/getAllTags.js b/lib/notion/getAllTags.js
index b9144be8..94e21214 100644
--- a/lib/notion/getAllTags.js
+++ b/lib/notion/getAllTags.js
@@ -14,7 +14,7 @@ export function getAllTags({ allPages, sliceCount = 0, tagOptions }) {
     return []
   }
   // 计数
-  let tags = allPosts.map(p => p.tags)
+  let tags = allposts?.map(p => p.tags)
   tags = [...tags.flat()]
   const tagObj = {}
   tags.forEach(tag => {
diff --git a/themes/fukasawa/components/BlogPostArchive.js b/themes/fukasawa/components/BlogPostArchive.js
index c594d7d1..a86210db 100644
--- a/themes/fukasawa/components/BlogPostArchive.js
+++ b/themes/fukasawa/components/BlogPostArchive.js
@@ -21,7 +21,7 @@ const BlogArchiveItem = ({ posts = [], archiveTitle }) => {
           {archiveTitle}
         </div>
         <ul>
-          {posts.map(post => (
+          {posts?.map(post => (
             <li
               key={post.id}
               className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
diff --git a/themes/hexo/components/ArticleRecommend.js b/themes/hexo/components/ArticleRecommend.js
index 9b5a5500..35e6164d 100644
--- a/themes/hexo/components/ArticleRecommend.js
+++ b/themes/hexo/components/ArticleRecommend.js
@@ -28,7 +28,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
         </div>
       </div>
       <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        {recommendPosts.map(post => {
+        {recommendposts?.map(post => {
           const headerImage = post?.page_cover
             ? `url("${post.page_cover}")`
             : `url("${siteInfo?.pageCover}")`
diff --git a/themes/hexo/components/BlogPostArchive.js b/themes/hexo/components/BlogPostArchive.js
index 20887d45..4a746bde 100644
--- a/themes/hexo/components/BlogPostArchive.js
+++ b/themes/hexo/components/BlogPostArchive.js
@@ -21,7 +21,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
           {archiveTitle}
         </div>
         <ul>
-          {posts.map(post => (
+          {posts?.map(post => (
             <li
               key={post.id}
               className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-indigo-500 dark:hover:border-indigo-300 dark:border-indigo-400 transform duration-500"
diff --git a/themes/hexo/components/BlogPostListPage.js b/themes/hexo/components/BlogPostListPage.js
index 9a2c68f7..92008f83 100644
--- a/themes/hexo/components/BlogPostListPage.js
+++ b/themes/hexo/components/BlogPostListPage.js
@@ -21,7 +21,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
       <div id="container" className='w-full'>
         {/* 文章列表 */}
         <div className="space-y-6 px-2">
-          {posts.map(post => (
+          {posts?.map(post => (
             <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
           ))}
         </div>
diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js
index b7f7e558..66f8b862 100644
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -26,7 +26,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
                 {locale.COMMON.LATEST_POSTS}
             </div>
         </div>
-        {latestPosts.map(post => {
+        {latestposts?.map(post => {
           const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
 
           const headerImage = post?.page_cover ? post.page_cover : siteInfo?.pageCover
diff --git a/themes/matery/components/ArticleRecommend.js b/themes/matery/components/ArticleRecommend.js
index 67620599..ed01e521 100644
--- a/themes/matery/components/ArticleRecommend.js
+++ b/themes/matery/components/ArticleRecommend.js
@@ -28,7 +28,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
         </div>
       </div>
       <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        {recommendPosts.map(post => {
+        {recommendposts?.map(post => {
           const headerImage = post?.page_cover
             ? `url("${post.page_cover}")`
             : `url("${siteInfo?.pageCover}")`
diff --git a/themes/matery/components/BlogPostArchive.js b/themes/matery/components/BlogPostArchive.js
index 226f77eb..f90f4c03 100644
--- a/themes/matery/components/BlogPostArchive.js
+++ b/themes/matery/components/BlogPostArchive.js
@@ -21,7 +21,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
           {archiveTitle}
         </div>
         <ul>
-          {posts.map(post => (
+          {posts?.map(post => (
             <li
               key={post.id}
               className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-indigo-500 dark:hover:border-indigo-300 dark:border-indigo-400 transform duration-500"
diff --git a/themes/matery/components/BlogPostListPage.js b/themes/matery/components/BlogPostListPage.js
index cca1a7e9..24b84c15 100644
--- a/themes/matery/components/BlogPostListPage.js
+++ b/themes/matery/components/BlogPostListPage.js
@@ -22,7 +22,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
         <div className='pt-6'></div>
         {/* 文章列表 */}
         <div className="pt-4 flex flex-wrap pb-12" >
-          {posts.map(post => (
+          {posts?.map(post => (
            <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'> <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} /></div>
           ))}
         </div>
diff --git a/themes/matery/components/LatestPostsGroup.js b/themes/matery/components/LatestPostsGroup.js
index cfb44018..ae0d1450 100644
--- a/themes/matery/components/LatestPostsGroup.js
+++ b/themes/matery/components/LatestPostsGroup.js
@@ -25,7 +25,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
         {locale.COMMON.LATEST_POSTS}
       </div>
     </div>
-    {latestPosts.map(post => {
+    {latestposts?.map(post => {
       const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
       const headerImage = post?.page_cover
         ? `url("${post.page_cover}")`
diff --git a/themes/medium/components/BlogPostListPage.js b/themes/medium/components/BlogPostListPage.js
index bd7499dc..db74b74e 100644
--- a/themes/medium/components/BlogPostListPage.js
+++ b/themes/medium/components/BlogPostListPage.js
@@ -22,7 +22,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
       <div className='w-full justify-center'>
         <div id='container'>
         {/* 文章列表 */}
-        {posts.map(post => (
+        {posts?.map(post => (
           <BlogPostCard key={post.id} post={post} />
         ))}
         </div>
diff --git a/themes/next/components/BlogPostArchive.js b/themes/next/components/BlogPostArchive.js
index 91f5527a..df189138 100644
--- a/themes/next/components/BlogPostArchive.js
+++ b/themes/next/components/BlogPostArchive.js
@@ -21,7 +21,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
           {archiveTitle}
         </div>
         <ul>
-          {posts.map(post => (
+          {posts?.map(post => (
             <li
               key={post.id}
               className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
diff --git a/themes/next/components/BlogPostListPage.js b/themes/next/components/BlogPostListPage.js
index 6d10433b..773b59a4 100644
--- a/themes/next/components/BlogPostListPage.js
+++ b/themes/next/components/BlogPostListPage.js
@@ -21,7 +21,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
       <div>
         {/* 文章列表 */}
         <div id="container" className="flex flex-wrap lg:space-y-4 space-y-1">
-          {posts.map(post => (
+          {posts?.map(post => (
             <BlogPostCard key={post.id} post={post} />
           ))}
         </div>
diff --git a/themes/next/components/LatestPostsGroup.js b/themes/next/components/LatestPostsGroup.js
index a12f55b5..01018fa5 100644
--- a/themes/next/components/LatestPostsGroup.js
+++ b/themes/next/components/LatestPostsGroup.js
@@ -25,7 +25,7 @@ const LatestPostsGroup = ({ latestPosts }) => {
         {locale.COMMON.LATEST_POSTS}
       </div>
     </div>
-    {latestPosts.map(post => {
+    {latestposts?.map(post => {
       const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
       return (
         (<Link
diff --git a/themes/next/components/RecommendPosts.js b/themes/next/components/RecommendPosts.js
index 7e680da5..75c8a286 100644
--- a/themes/next/components/RecommendPosts.js
+++ b/themes/next/components/RecommendPosts.js
@@ -16,7 +16,7 @@ const RecommendPosts = ({ recommendPosts }) => {
     <div className="pt-2 border pl-4 py-2 my-4 dark:text-gray-300 ">
        <div className="mb-2 font-bold text-lg">{locale.COMMON.RELATE_POSTS} :</div>
         <ul className="font-light text-sm">
-          {recommendPosts.map(post => (
+          {recommendposts?.map(post => (
             <li className="py-1" key={post.id}>
               <Link href={`/${post.slug}`} className="cursor-pointer hover:underline">
 

From 81e018fe845015838c213e3b7390b7fb2cdae663 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 7 Jun 2023 15:51:07 +0800
Subject: [PATCH 19/19] fix-build

---
 lib/notion/getAllCategories.js               | 2 +-
 lib/notion/getAllTags.js                     | 2 +-
 themes/hexo/components/ArticleRecommend.js   | 2 +-
 themes/hexo/components/BlogPostArchive.js    | 2 +-
 themes/hexo/components/LatestPostsGroup.js   | 2 +-
 themes/matery/components/ArticleRecommend.js | 2 +-
 themes/matery/components/LatestPostsGroup.js | 2 +-
 themes/next/components/BlogPostArchive.js    | 2 +-
 themes/next/components/LatestPostsGroup.js   | 2 +-
 themes/next/components/RecommendPosts.js     | 4 ++--
 10 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/lib/notion/getAllCategories.js b/lib/notion/getAllCategories.js
index fd26b9b1..7cfd4588 100644
--- a/lib/notion/getAllCategories.js
+++ b/lib/notion/getAllCategories.js
@@ -19,7 +19,7 @@ export function getAllCategories({ allPages, categoryOptions, sliceCount = 0 })
     return []
   }
   // 计数
-  let categories = allposts?.map(p => p.category)
+  let categories = allPosts?.map(p => p.category)
   categories = [...categories.flat()]
   const categoryObj = {}
   categories.forEach(category => {
diff --git a/lib/notion/getAllTags.js b/lib/notion/getAllTags.js
index 94e21214..968b8ca3 100644
--- a/lib/notion/getAllTags.js
+++ b/lib/notion/getAllTags.js
@@ -14,7 +14,7 @@ export function getAllTags({ allPages, sliceCount = 0, tagOptions }) {
     return []
   }
   // 计数
-  let tags = allposts?.map(p => p.tags)
+  let tags = allPosts?.map(p => p.tags)
   tags = [...tags.flat()]
   const tagObj = {}
   tags.forEach(tag => {
diff --git a/themes/hexo/components/ArticleRecommend.js b/themes/hexo/components/ArticleRecommend.js
index 35e6164d..9b5a5500 100644
--- a/themes/hexo/components/ArticleRecommend.js
+++ b/themes/hexo/components/ArticleRecommend.js
@@ -28,7 +28,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
         </div>
       </div>
       <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        {recommendposts?.map(post => {
+        {recommendPosts.map(post => {
           const headerImage = post?.page_cover
             ? `url("${post.page_cover}")`
             : `url("${siteInfo?.pageCover}")`
diff --git a/themes/hexo/components/BlogPostArchive.js b/themes/hexo/components/BlogPostArchive.js
index 4a746bde..f90f4c03 100644
--- a/themes/hexo/components/BlogPostArchive.js
+++ b/themes/hexo/components/BlogPostArchive.js
@@ -42,7 +42,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
           ))}
         </ul>
       </div>
-    );
+    )
   }
 }
 
diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js
index 66f8b862..b7f7e558 100644
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -26,7 +26,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
                 {locale.COMMON.LATEST_POSTS}
             </div>
         </div>
-        {latestposts?.map(post => {
+        {latestPosts.map(post => {
           const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
 
           const headerImage = post?.page_cover ? post.page_cover : siteInfo?.pageCover
diff --git a/themes/matery/components/ArticleRecommend.js b/themes/matery/components/ArticleRecommend.js
index ed01e521..67620599 100644
--- a/themes/matery/components/ArticleRecommend.js
+++ b/themes/matery/components/ArticleRecommend.js
@@ -28,7 +28,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
         </div>
       </div>
       <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        {recommendposts?.map(post => {
+        {recommendPosts.map(post => {
           const headerImage = post?.page_cover
             ? `url("${post.page_cover}")`
             : `url("${siteInfo?.pageCover}")`
diff --git a/themes/matery/components/LatestPostsGroup.js b/themes/matery/components/LatestPostsGroup.js
index ae0d1450..cfb44018 100644
--- a/themes/matery/components/LatestPostsGroup.js
+++ b/themes/matery/components/LatestPostsGroup.js
@@ -25,7 +25,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
         {locale.COMMON.LATEST_POSTS}
       </div>
     </div>
-    {latestposts?.map(post => {
+    {latestPosts.map(post => {
       const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
       const headerImage = post?.page_cover
         ? `url("${post.page_cover}")`
diff --git a/themes/next/components/BlogPostArchive.js b/themes/next/components/BlogPostArchive.js
index df189138..a5a1ac6f 100644
--- a/themes/next/components/BlogPostArchive.js
+++ b/themes/next/components/BlogPostArchive.js
@@ -42,7 +42,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
           ))}
         </ul>
       </div>
-    );
+    )
   }
 }
 
diff --git a/themes/next/components/LatestPostsGroup.js b/themes/next/components/LatestPostsGroup.js
index 01018fa5..a12f55b5 100644
--- a/themes/next/components/LatestPostsGroup.js
+++ b/themes/next/components/LatestPostsGroup.js
@@ -25,7 +25,7 @@ const LatestPostsGroup = ({ latestPosts }) => {
         {locale.COMMON.LATEST_POSTS}
       </div>
     </div>
-    {latestposts?.map(post => {
+    {latestPosts.map(post => {
       const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
       return (
         (<Link
diff --git a/themes/next/components/RecommendPosts.js b/themes/next/components/RecommendPosts.js
index 75c8a286..26d9010d 100644
--- a/themes/next/components/RecommendPosts.js
+++ b/themes/next/components/RecommendPosts.js
@@ -16,7 +16,7 @@ const RecommendPosts = ({ recommendPosts }) => {
     <div className="pt-2 border pl-4 py-2 my-4 dark:text-gray-300 ">
        <div className="mb-2 font-bold text-lg">{locale.COMMON.RELATE_POSTS} :</div>
         <ul className="font-light text-sm">
-          {recommendposts?.map(post => (
+          {recommendPosts.map(post => (
             <li className="py-1" key={post.id}>
               <Link href={`/${post.slug}`} className="cursor-pointer hover:underline">
 
@@ -27,6 +27,6 @@ const RecommendPosts = ({ recommendPosts }) => {
           ))}
         </ul>
     </div>
-  );
+  )
 }
 export default RecommendPosts