动态主题初版本完成

pages/404.js

@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 /**
  * 自定义404界面
@@ -7,7 +8,7 @@ import { useGlobal } from '@/lib/global'
  */
 
 export default function Custom404 (props) {
-  const { ThemeComponents } = useGlobal()
-
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   return <ThemeComponents.Layout404 {...props}/>
 }

pages/[slug].js

@@ -3,6 +3,7 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import Custom404 from './404'
+import * as ThemeMap from '@/themes'
 
 /**
  * 根据notion的slug访问页面，针对类型为Page的页面
@@ -10,7 +11,8 @@ import Custom404 from './404'
  * @returns
  */
 const Slug = (props) => {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   if (!props.post) {
     return <Custom404 {...props} />
   }

pages/archive/index.js

@@ -1,9 +1,11 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 const ArchiveIndex = (props) => {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   return <ThemeComponents.LayoutArchive {...props}/>
 }
 

pages/article/[slug].js

@@ -3,6 +3,7 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import Custom404 from '../404'
+import * as ThemeMap from '@/themes'
 
 /**
  * 根据notion的slug访问页面
@@ -10,7 +11,8 @@ import Custom404 from '../404'
  * @returns
  */
 const Slug = (props) => {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   if (!props.post) {
     return <Custom404 {...props} />
   }

pages/category/[category].js

@@ -1,9 +1,11 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 export default function Category (props) {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   return <ThemeComponents.LayoutCategory {...props} />
 }
 

pages/category/index.js

@@ -1,9 +1,11 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 export default function Category (props) {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   return <ThemeComponents.LayoutCategoryIndex {...props}/>
 }
 

pages/index.js

@@ -1,12 +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'
 const Index = (props) => {
-  const { ThemeComponents } = useGlobal()
-  // return <ThemeComponents.Next.LayoutIndex {...props}/>
-  console.log(ThemeComponents)
-  // return <></>
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   return <ThemeComponents.LayoutIndex {...props}/>
 }
 

pages/page/[page].js

@@ -3,9 +3,11 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import Custom404 from '../404'
+import * as ThemeMap from '@/themes'
 
 const Page = (props) => {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   if (!props?.meta) {
     return <Custom404 {...props} />
   }

pages/search/[keyword].js

@@ -2,6 +2,7 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
+import * as ThemeMap from '@/themes'
 
 const Index = (props) => {
   const { keyword } = props
@@ -12,7 +13,8 @@ const Index = (props) => {
     type: 'website'
   }
 
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   return <ThemeComponents.LayoutSearch {...props} meta={meta} currentSearch={keyword} />
 }
 

pages/search/index.js

@@ -2,31 +2,7 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
-
-/**
- * 浏览器前端搜索
- */
-export async function getStaticProps () {
-  const {
-    allPosts,
-    categories,
-    tags,
-    postCount,
-    latestPosts,
-    customNav
-  } = await getGlobalNotionData({ from: 'search-props', pageType: ['Post'] })
-  return {
-    props: {
-      posts: allPosts,
-      tags,
-      categories,
-      postCount,
-      latestPosts,
-      customNav
-    },
-    revalidate: 1
-  }
-}
+import * as ThemeMap from '@/themes'
 
 const Search = (props) => {
   const { posts } = props
@@ -51,11 +27,30 @@ const Search = (props) => {
     type: 'website'
   }
 
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
 
   return <ThemeComponents.LayoutSearch {...props} posts={filteredPosts} meta={meta} currentSearch={searchKey} />
 }
 
+/**
+ * 浏览器前端搜索
+ */
+export async function getStaticProps () {
+  const { allPosts, categories, tags, postCount, latestPosts, customNav } = await getGlobalNotionData({ from: 'search-props', pageType: ['Post'] })
+  return {
+    props: {
+      posts: allPosts,
+      tags,
+      categories,
+      postCount,
+      latestPosts,
+      customNav
+    },
+    revalidate: 1
+  }
+}
+
 function getSearchKey () {
   const router = useRouter()
   if (router.query && router.query.s) {

pages/tag/[tag].js

@@ -1,8 +1,10 @@
 import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
+import * as ThemeMap from '@/themes'
 
 const Tag = (props) => {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   return <ThemeComponents.LayoutTag {...props} />
 }
 

pages/tag/index.js

@@ -1,9 +1,11 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 const TagIndex = (props) => {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   return <ThemeComponents.LayoutTagIndex {...props} />
 }