动态Theme 初版

blog.config.js

@@ -9,6 +9,7 @@ const BLOG = {
   NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
   NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
 
+  THEME: process.env.NEXT_PUBLIC_THEME || 'Next', // 主题， 支持 ['Next','Hexo',"Fukasawa','Medium']
   LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
   SINCE: 2021, // e.g if leave this empty, current year will be used.
   BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
@@ -43,7 +44,7 @@ const BLOG = {
   COMMENT_UTTERRANCES_REPO: process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/
 
   // gitalk评论插件 更多参考 https://gitalk.github.io/
-  COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // 你的Github仓库名，例如 'NotionNext' 
+  COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // 你的Github仓库名，例如 'NotionNext'
   COMMENT_GITALK_OWNER: process.env.NEXT_PUBLIC_COMMENT_GITALK_OWNER || '', // 你的用户名 e.g tangly1024
   COMMENT_GITALK_ADMIN: process.env.NEXT_PUBLIC_COMMENT_GITALK_ADMIN || '', // 管理员用户名、一般是自己 e.g 'tangly1024'
   COMMENT_GITALK_CLIENT_ID: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取

lib/global.js

@@ -2,6 +2,7 @@ import lang from './lang'
 import { useContext, createContext, useState } from 'react'
 import Router from 'next/router'
 import { initDarkMode } from './theme'
+import BLOG from '@/blog.config'
 const GlobalContext = createContext()
 let hasInit = false
 
@@ -15,6 +16,7 @@ export function GlobalContextProvider ({ children }) {
   const [locale, updateLocale] = useState(generateLocaleDict('en-US'))
   const [isDarkMode, updateDarkMode] = useState(false)
   const [onLoading, changeLoadingState] = useState(false)
+  const [theme, setTheme] = useState(BLOG.THEME)
   Router.events.on('routeChangeStart', (...args) => {
     changeLoadingState(true)
   })
@@ -33,7 +35,7 @@ export function GlobalContextProvider ({ children }) {
   }, 100)
 
   return (
-    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode }}>
+    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode, theme, setTheme }}>
       {children}
     </GlobalContext.Provider>
   )

pages/index.js

@@ -1,9 +1,12 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutIndex, THEME_CONFIG } from '@/themes'
+import { LayoutIndex, THEME_CONFIG, ThemeMap } from '@/themes'
+import { useGlobal } from '@/lib/global'
 
 const Index = (props) => {
+  const { theme } = useGlobal()
+  console.log('模板', ThemeMap[theme].LayoutIndex)
   return <LayoutIndex {...props}/>
 }
 

themes/index.js

@@ -2,8 +2,16 @@
  * 修改 from 后面的路径，实现主题切换
  */
 
-// export * from './Empty' //  空主题
-// export * from './NEXT'
-// export * from './Fukasawa'
-export * from './Hexo'
-// export * from './Medium'
+import * as Next from './Next'
+import * as Empty from './Empty'
+import * as Fukasawa from './Fukasawa'
+import * as Hexo from './Hexo'
+import * as Medium from './Medium'
+export * from './Medium'
+export const ThemeMap = {
+  Next,
+  Empty,
+  Fukasawa,
+  Hexo,
+  Medium
+}