Webpack优化动态主题加载

pages/404.js

@@ -1,5 +1,7 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 /**
  * 404
@@ -7,12 +9,14 @@ import { useGlobal } from '@/lib/global'
  * @returns
  */
 const NoFound = props => {
-  const { Layout } = props
   const { siteInfo } = useGlobal()
   const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
 
   props = { ...props, meta }
 
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
+
   return <Layout {...props} />
 }
 

pages/[...slug].js

@@ -1,14 +1,14 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { Suspense, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { idToUuid } from 'notion-utils'
 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 Loading from '@/components/Loading'
+import { getLayoutByTheme } from '@/themes/theme'
 
 /**
  * 根据notion的slug访问页面
@@ -16,9 +16,12 @@ import Loading from '@/components/Loading'
  * @returns
  */
 const Slug = props => {
-  const { post, siteInfo, Layout } = props
+  const { post, siteInfo } = props
   const router = useRouter()
 
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
+
   // 文章锁🔐
   const [lock, setLock] = useState(post?.password && post?.password !== '')
 
@@ -77,9 +80,7 @@ const Slug = props => {
   }
   props = { ...props, lock, meta, setLock, validPassword }
 
-  return <Suspense fallback={<Loading />}>
-        <Layout {...props} />
-    </Suspense>
+  return <Layout {...props} />
 }
 
 export async function getStaticPaths() {

pages/_app.js

@@ -19,8 +19,6 @@ import dynamic from 'next/dynamic'
 
 // 自定义样式css和js引入
 import ExternalScript from '@/components/ExternalScript'
-import { useRouter } from 'next/router'
-import { getLayoutByTheme } from '@/lib/theme'
 
 // 各种扩展插件 动画等
 const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))
@@ -33,12 +31,9 @@ const MyApp = ({ Component, pageProps }) => {
     }
   }, [])
 
-  // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
-
   return (
         <GlobalContextProvider>
-            <Component {...pageProps} Layout={Layout} />
+            <Component {...pageProps}/>
             <ExternalPlugins {...pageProps} />
             <ExternalScript />
         </GlobalContextProvider>

pages/_document.js

@@ -2,7 +2,6 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import BLOG from '@/blog.config'
 import CommonScript from '@/components/CommonScript'
-import Loading from '@/components/Loading'
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -22,7 +21,6 @@ class MyDocument extends Document {
                     <Main />
                     <NextScript />
                 </body>
-                <Loading />
             </Html>
     )
   }

pages/archive/index.js

@@ -2,11 +2,16 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 const ArchiveIndex = props => {
-  const { siteInfo, Layout } = props
+  const { siteInfo } = props
   const { locale } = useGlobal()
 
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
+
   const meta = {
     title: `${locale.NAV.ARCHIVE} | ${siteInfo?.title}`,
     description: siteInfo?.description,

pages/category/[category]/index.js

@@ -2,6 +2,8 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 /**
  * 分类页
@@ -9,9 +11,12 @@ import BLOG from '@/blog.config'
  * @returns
  */
 export default function Category(props) {
-  const { siteInfo, Layout } = props
+  const { siteInfo } = props
   const { locale } = useGlobal()
 
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
+
   const meta = {
     title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
       siteInfo?.title || ''

pages/category/[category]/page/[page].js

@@ -2,15 +2,20 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 /**
  * 分类页
  * @param {*} props
  * @returns
  */
+
 export default function Category(props) {
-  const { siteInfo, Layout } = props
+  const { siteInfo } = props
   const { locale } = useGlobal()
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
 
   const meta = {
     title: `${props.category} | ${locale.COMMON.CATEGORY} | ${

pages/category/index.js

@@ -2,6 +2,8 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 /**
  * 分类首页
@@ -10,7 +12,10 @@ import BLOG from '@/blog.config'
  */
 export default function Category(props) {
   const { locale } = useGlobal()
-  const { siteInfo, Layout } = props
+  const { siteInfo } = props
+
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
 
   const meta = {
     title: `${locale.COMMON.CATEGORY} | ${siteInfo?.title}`,

pages/index.js

@@ -4,13 +4,17 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { generateRss } from '@/lib/rss'
 import { generateRobotsTxt } from '@/lib/robots.txt'
 
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 /**
  * 首页布局
  * @param {*} props
  * @returns
  */
+
 const Index = props => {
-  const { Layout } = props
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
   return <Layout {...props} />
 }
 

pages/page/[page].js

@@ -1,6 +1,8 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 /**
  * 文章列表分页
@@ -8,7 +10,11 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
  * @returns
  */
 const Page = props => {
-  const { siteInfo, Layout } = props
+  const { siteInfo } = props
+
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
+
   const meta = {
     title: `${props?.page} | Page | ${siteInfo?.title}`,
     description: siteInfo?.description,

pages/search/[keyword]/index.js

@@ -2,11 +2,16 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 const Index = props => {
-  const { keyword, siteInfo, Layout } = props
+  const { keyword, siteInfo } = props
   const { locale } = useGlobal()
 
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
+
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
     description: siteInfo?.title,

pages/search/[keyword]/page/[page].js

@@ -2,11 +2,16 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 const Index = props => {
-  const { keyword, siteInfo, Layout } = props
+  const { keyword, siteInfo } = props
   const { locale } = useGlobal()
 
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
+
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
     description: siteInfo?.title,

pages/search/index.js

@@ -2,11 +2,15 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
+import { getLayoutByTheme } from '@/themes/theme'
 
 const Search = props => {
-  const { posts, siteInfo, Layout } = props
+  const { posts, siteInfo } = props
   const { locale } = useGlobal()
 
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
+
   const router = useRouter()
   const keyword = getSearchKey(router)
 

pages/tag/[tag]/index.js

@@ -1,6 +1,8 @@
 import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 /**
  * 标签下的文章列表
@@ -9,7 +11,10 @@ import BLOG from '@/blog.config'
  */
 const Tag = props => {
   const { locale } = useGlobal()
-  const { tag, siteInfo, Layout } = props
+  const { tag, siteInfo } = props
+
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
 
   const meta = {
     title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,

pages/tag/[tag]/page/[page].js

@@ -1,10 +1,15 @@
 import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 const Tag = props => {
   const { locale } = useGlobal()
-  const { tag, siteInfo, Layout } = props
+  const { tag, siteInfo } = props
+
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
 
   const meta = {
     title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,

pages/tag/index.js

@@ -1,6 +1,8 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
 
 /**
  * 标签首页
@@ -9,7 +11,10 @@ import BLOG from '@/blog.config'
  */
 const TagIndex = props => {
   const { locale } = useGlobal()
-  const { siteInfo, Layout } = props
+  const { siteInfo } = props
+
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
 
   const meta = {
     title: `${locale.COMMON.TAGS} | ${siteInfo?.title}`,