diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index 9c3b046a..f1f8784d 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -1,5 +1,5 @@
import { useGlobal } from '@/lib/global'
-import { saveDarkModeToCookies } from '@/lib/theme'
+import { saveDarkModeToCookies } from '@/themes/theme'
const DarkModeButton = (props) => {
const { isDarkMode, updateDarkMode } = useGlobal()
diff --git a/components/DebugPanel.js b/components/DebugPanel.js
index 2a037ce8..4bbdbab9 100644
--- a/components/DebugPanel.js
+++ b/components/DebugPanel.js
@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
import { useEffect, useState } from 'react'
import Select from './Select'
import { useGlobal } from '@/lib/global'
-import { ALL_THEME } from '@/lib/theme'
+import { ALL_THEME } from '@/themes/theme'
import { useRouter } from 'next/router'
/**
@@ -32,7 +32,7 @@ const DebugPanel = () => {
}
function handleUpdateDebugTheme(newTheme) {
- console.log('触发切换主题', newTheme)
+ console.log('切换主题', newTheme)
const query = { ...router.query, theme: newTheme }
router.push({ pathname: router.pathname, query })
}
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index c9ceaa3d..8fba9304 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -1,7 +1,7 @@
import { useGlobal } from '@/lib/global'
import React from 'react'
import { Draggable } from './Draggable'
-import { ALL_THEME } from '@/lib/theme'
+import { ALL_THEME } from '@/themes/theme'
import { useRouter } from 'next/router'
/**
*
@@ -17,7 +17,6 @@ const ThemeSwitch = () => {
const newTheme = e.target.value
const query = router.query
query.theme = newTheme
- console.log('切换主题', newTheme)
router.push({ pathname: router.pathname, query })
}
diff --git a/lib/global.js b/lib/global.js
index 78c92e8a..d64853e4 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -2,10 +2,10 @@ import { generateLocaleDict, initLocale } from './lang'
import { createContext, useContext, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import BLOG from '@/blog.config'
-import { ALL_THEME, initDarkMode } from '@/lib/theme'
+import { ALL_THEME, initDarkMode } from '@/themes/theme'
import NProgress from 'nprogress'
import LoadingCover from '@/components/LoadingCover'
-import { getQueryParam, getQueryVariable, isBrowser } from './utils'
+import { getQueryVariable, isBrowser } from './utils'
const GlobalContext = createContext()
@@ -19,7 +19,7 @@ export function GlobalContextProvider({ children }) {
const router = useRouter()
const [lang, updateLang] = useState(BLOG.LANG) // 默认语言
const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG)) // 默认语言
- const [theme, setTheme] = useState(getQueryParam(router.asPath, 'theme') || BLOG.THEME) // 默认博客主题
+ const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
const [onReading, setOnReading] = useState(false) // 网页资源加载
@@ -47,7 +47,6 @@ export function GlobalContextProvider({ children }) {
const { theme } = router.query
if (theme && !url.includes(`theme=${theme}`)) {
const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${theme}`
- console.log('检查newUrl', newUrl)
router.push(newUrl)
}
setOnLoading(true)
@@ -57,7 +56,7 @@ export function GlobalContextProvider({ children }) {
setOnLoading(false)
}
- const queryTheme = getQueryVariable('theme')
+ const queryTheme = getQueryVariable('theme') || BLOG.THEME
setTheme(queryTheme)
router.events.on('routeChangeStart', handleStart)
diff --git a/next.config.js b/next.config.js
index c789c2d0..726eaae4 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,6 +2,9 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true'
})
+const { THEME } = require('./blog.config')
+const path = require('path')
+
module.exports = withBundleAnalyzer({
images: {
// 图片压缩
@@ -64,6 +67,10 @@ module.exports = withBundleAnalyzer({
// 'react-dom': 'preact/compat'
// })
// }
+
+ // 动态主题:添加 resolve.alias 配置,将动态路径映射到实际路径
+ config.resolve.alias['@theme-components'] = path.resolve(__dirname, 'themes', THEME)
+
return config
}
})
diff --git a/pages/404.js b/pages/404.js
index 57d95461..2a521d7c 100644
--- a/pages/404.js
+++ b/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
}
diff --git a/pages/[...slug].js b/pages/[...slug].js
index 88a5a2d8..f28b0a42 100644
--- a/pages/[...slug].js
+++ b/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 }>
-
-
+ return
}
export async function getStaticPaths() {
diff --git a/pages/_app.js b/pages/_app.js
index 981170e8..9cee751f 100644
--- a/pages/_app.js
+++ b/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 (
-
+
diff --git a/pages/_document.js b/pages/_document.js
index d9e0b447..c053a632 100644
--- a/pages/_document.js
+++ b/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 {