动态主题初版本完成

jsconfig.json

@@ -5,7 +5,6 @@
       "@/*": ["./*"],
       "@/components/*": ["components/*"],
       "@/data/*": ["data/*"],
-      "@/layouts/*": ["theme/*"],
       "@/lib/*": ["lib/*"],
       "@/styles/*": ["styles/*"]
     }

lib/global.js

@@ -3,7 +3,6 @@ import { useContext, createContext, useState } from 'react'
 import Router from 'next/router'
 import { initDarkMode } from './theme'
 import BLOG from '@/blog.config'
-import * as ThemeMap from '@/themes'
 const GlobalContext = createContext()
 let hasInit = false
 
@@ -18,8 +17,6 @@ export function GlobalContextProvider ({ children }) {
   const [isDarkMode, updateDarkMode] = useState(false)
   const [onLoading, changeLoadingState] = useState(false)
   const [theme, setTheme] = useState(BLOG.THEME)
-  console.log('ThemeMap', ThemeMap)
-  const ThemeComponents = ThemeMap[theme]
 
   Router.events.on('routeChangeStart', (...args) => {
     changeLoadingState(true)
@@ -39,7 +36,7 @@ export function GlobalContextProvider ({ children }) {
   }, 100)
 
   return (
-    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode, theme, setTheme, ThemeComponents }}>
+    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode, theme, setTheme }}>
       {children}
     </GlobalContext.Provider>
   )

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

themes/Empty/LayoutPage.js

@@ -1,4 +1,4 @@
-import LayoutBase from '../Empty/LayoutBase'
+import LayoutBase from './LayoutBase'
 
 export const LayoutPage = (props) => {
   const { page } = props

themes/Medium/components/BottomMenuBar.js

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import React from 'react'
-import JumpToTopButton from '@/themes/Medium/components/JumpToTopButton'
+import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar ({ className }) {
   return (

themes/Medium/components/TopNavBar.js

@@ -1,6 +1,6 @@
-import LogoBar from '@/themes/Medium/components/LogoBar'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import LogoBar from './LogoBar'
 
 /**
  * 顶部导航栏 + 菜单