切换主题

components/ThemeSwitch.js

@@ -15,7 +15,9 @@ const ThemeSwitch = () => {
   // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
   const onSelectChange = (e) => {
     const newTheme = e.target.value
-    const query = { ...router.query, theme: newTheme }
+    const query = router.query
+    query.theme = newTheme
+    console.log('切换主题', newTheme)
     router.push({ pathname: router.pathname, query })
   }
 

lib/global.js

@@ -5,7 +5,7 @@ import BLOG from '@/blog.config'
 import { ALL_THEME, initDarkMode } from '@/lib/theme'
 import NProgress from 'nprogress'
 import LoadingCover from '@/components/LoadingCover'
-import { getQueryParam, isBrowser } from './utils'
+import { getQueryParam, getQueryVariable, isBrowser } from './utils'
 
 const GlobalContext = createContext()
 
@@ -46,18 +46,20 @@ export function GlobalContextProvider({ children }) {
       NProgress.start()
       const { theme } = router.query
       if (theme && !url.includes(`theme=${theme}`)) {
-        // TODO
         const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${theme}`
+        console.log('检查newUrl', newUrl)
         router.push(newUrl)
       }
       setOnLoading(true)
     }
     const handleStop = () => {
       NProgress.done()
-      setTheme(getQueryParam(router.asPath, 'theme') || BLOG.THEME)
       setOnLoading(false)
     }
 
+    const queryTheme = getQueryVariable('theme')
+    setTheme(queryTheme)
+
     router.events.on('routeChangeStart', handleStart)
     router.events.on('routeChangeError', handleStop)
     router.events.on('routeChangeComplete', handleStop)

lib/theme.js

@@ -24,53 +24,47 @@ export const ALL_THEME = [
  */
 export const getLayoutByTheme = (router) => {
   const theme = getQueryParam(router.asPath, 'theme') || BLOG.THEME
-  let Layout = null
-  // 根据路由 pages的文件名加载主题文件
-  switch (router.pathname) {
+  const layout = getLayoutNameByPath(router.pathname)
+  console.log('加载组件', theme, layout)
+  return dynamic(() => import(`@/themes/${theme}/${layout}`), { ssr: true })
+}
+
+/**
+ * 路径 对应的Layout名称
+ * @param {*} path
+ * @returns
+ */
+export const getLayoutNameByPath = (path) => {
+  switch (path) {
     case '/':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutIndex`), { ssr: true })
-      break
+      return 'LayoutIndex'
     case '/page/[page]':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutPage`), { ssr: true })
-      break
+      return 'LayoutPage'
     case '/archive':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutArchive`), { ssr: true })
-      break
+      return 'LayoutArchive'
     case '/search':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutSearch`), { ssr: true })
-      break
+      return 'LayoutSearch'
     case '/search/[keyword]':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutSearch`), { ssr: true })
-      break
+      return 'LayoutSearch'
     case '/search/[keyword]/page/[page]':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutSearch`), { ssr: true })
-      break
+      return 'LayoutSearch'
     case '/404':
-      Layout = dynamic(() => import(`@/themes/${theme}/Layout404`), { ssr: true })
-      break
+      return 'Layout404'
     case '/tag':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`), { ssr: true })
-      break
+      return 'LayoutTagIndex'
     case '/tag/[tag]':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutTag`), { ssr: true })
-      break
+      return 'LayoutTag'
     case '/tag/[tag]/page/[page]':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutTag`), { ssr: true })
-      break
+      return 'LayoutTag'
     case '/category':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`), { ssr: true })
-      break
+      return 'LayoutCategoryIndex'
     case '/category/[category]':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutCategory`), { ssr: true })
-      break
+      return 'LayoutCategory'
     case '/category/[category]/page/[page]':
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutCategory`), { ssr: true })
-      break
+      return 'LayoutCategory'
     default:
-      Layout = dynamic(() => import(`@/themes/${theme}/LayoutSlug`), { ssr: true })
-      break
+      return 'LayoutSlug'
   }
-  return Layout
 }
 
 /**