动态主题初版本完成

tangly1024 · tangly1024 · commit 24007eed1aae · 2022-03-09T17:28:47.000+08:00
diff --git a/jsconfig.json b/jsconfig.json
@@ -5,7 +5,6 @@
       "@/*": ["./*"],
       "@/components/*": ["components/*"],
       "@/data/*": ["data/*"],
-      "@/layouts/*": ["theme/*"],
       "@/lib/*": ["lib/*"],
       "@/styles/*": ["styles/*"]
     }
diff --git a/lib/global.js b/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>
   )
diff --git a/pages/404.js b/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}/>
 }
diff --git a/pages/[slug].js b/pages/[slug].js
@@ -3,14 +3,16 @@ 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的页面
  * @param {*} props
  * @returns
  */
 const Slug = (props) => {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   if (!props.post) {
     return <Custom404 {...props} />
   }
diff --git a/pages/archive/index.js b/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}/>
 }
 
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
@@ -3,14 +3,16 @@ 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访问页面
  * @param {*} props
  * @returns
  */
 const Slug = (props) => {
-  const { ThemeComponents } = useGlobal()
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   if (!props.post) {
     return <Custom404 {...props} />
   }
diff --git a/pages/category/[category].js b/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} />
 }
 
diff --git a/pages/category/index.js b/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}/>
 }
 
diff --git a/pages/index.js b/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}/>
 }
 
diff --git a/pages/page/[page].js b/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} />
   }
diff --git a/pages/search/[keyword].js b/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} />
 }
 
diff --git a/pages/search/index.js b/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) {
diff --git a/pages/tag/[tag].js b/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} />
 }
 
diff --git a/pages/tag/index.js b/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} />
 }
 
diff --git a/themes/Empty/LayoutPage.js b/themes/Empty/LayoutPage.js
@@ -1,4 +1,4 @@
-import LayoutBase from '../Empty/LayoutBase'
+import LayoutBase from './LayoutBase'
 
 export const LayoutPage = (props) => {
   const { page } = props
diff --git a/themes/Medium/components/BottomMenuBar.js b/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 (
diff --git a/themes/Medium/components/TopNavBar.js b/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'
 
 /**
  * 顶部导航栏 + 菜单

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,6 @@`
`5`	`5`	`"@/": ["./"],`
`6`	`6`	`"@/components/": ["components/"],`
`7`	`7`	`"@/data/": ["data/"],`
`8`		`- "@/layouts/": ["theme/"],`
`9`	`8`	`"@/lib/": ["lib/"],`
`10`	`9`	`"@/styles/": ["styles/"]`
`11`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'`
`2`	`2`	`import BLOG from '@/blog.config'`
`3`	`3`	`import { useGlobal } from '@/lib/global'`
`4`	`4`	`import { getDataFromCache } from '@/lib/cache/cache_manager'`
	`5`	`+import * as ThemeMap from '@/themes'`
`5`	`6`
`6`	`7`	`const Index = (props) => {`
`7`	`8`	`const { keyword } = props`
`@@ -12,7 +13,8 @@ const Index = (props) => {`
`12`	`13`	`type: 'website'`
`13`	`14`	`}`
`14`	`15`
`15`		`- const { ThemeComponents } = useGlobal()`
	`16`	`+ const { theme } = useGlobal()`
	`17`	`+ const ThemeComponents = ThemeMap[theme]`
`16`	`18`	`return <ThemeComponents.LayoutSearch {...props} meta={meta} currentSearch={keyword} />`
`17`	`19`	`}`
`18`	`20`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import LayoutBase from '../Empty/LayoutBase'`
	`1`	`+import LayoutBase from './LayoutBase'`
`2`	`2`
`3`	`3`	`export const LayoutPage = (props) => {`
`4`	`4`	`const { page } = props`