Webpack优化动态主题加载

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)

lib/theme.js

@@ -1,135 +0,0 @@
-import cookie from 'react-cookies'
-import BLOG from '@/blog.config'
-import { getQueryParam, getQueryVariable } from './utils'
-import dynamic from 'next/dynamic'
-
-/**
- * 所有主题枚举
- */
-export const ALL_THEME = [
-  'hexo',
-  'matery',
-  'next',
-  'medium',
-  'fukasawa',
-  'nobelium',
-  'example',
-  'simple'
-]
-
-/**
- * 加载主题文件
- * @param {*} router
- * @returns
- */
-export const getLayoutByTheme = (router) => {
-  const theme = getQueryParam(router.asPath, 'theme') || BLOG.THEME
-  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 '/':
-      return 'LayoutIndex'
-    case '/page/[page]':
-      return 'LayoutPage'
-    case '/archive':
-      return 'LayoutArchive'
-    case '/search':
-      return 'LayoutSearch'
-    case '/search/[keyword]':
-      return 'LayoutSearch'
-    case '/search/[keyword]/page/[page]':
-      return 'LayoutSearch'
-    case '/404':
-      return 'Layout404'
-    case '/tag':
-      return 'LayoutTagIndex'
-    case '/tag/[tag]':
-      return 'LayoutTag'
-    case '/tag/[tag]/page/[page]':
-      return 'LayoutTag'
-    case '/category':
-      return 'LayoutCategoryIndex'
-    case '/category/[category]':
-      return 'LayoutCategory'
-    case '/category/[category]/page/[page]':
-      return 'LayoutCategory'
-    default:
-      return 'LayoutSlug'
-  }
-}
-
-/**
- * 初始化主题 , 优先级 query > cookies > systemPrefer
- * @param isDarkMode
- * @param updateDarkMode 更改主题ChangeState函数
- * @description 读取cookie中存的用户主题
- */
-export const initDarkMode = (isDarkMode, updateDarkMode) => {
-  const queryMode = getQueryVariable('mode')
-  if (queryMode) {
-    isDarkMode = queryMode === 'dark'
-  } else if (!isDarkMode) {
-    isDarkMode = isPreferDark()
-  }
-  updateDarkMode(isDarkMode)
-  saveDarkModeToCookies(isDarkMode)
-  document.getElementsByTagName('html')[0].setAttribute('class', isDarkMode ? 'dark' : 'light')
-}
-
-/**
- * 是否优先深色模式， 根据系统深色模式以及当前时间判断
- * @returns {*}
- */
-export function isPreferDark() {
-  if (BLOG.APPEARANCE === 'dark') {
-    return true
-  }
-  if (BLOG.APPEARANCE === 'auto') {
-    // 系统深色模式或时间是夜间时，强行置为夜间模式
-    const date = new Date()
-    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-    return prefersDarkMode || (BLOG.APPEARANCE_DARK_TIME && (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
-  }
-  return false
-}
-
-/**
- * 读取深色模式
- * @returns {*}
- */
-export const loadDarkModeFromCookies = () => {
-  return cookie.load('darkMode')
-}
-
-/**
-   * 保存深色模式
-   * @param newTheme
-   */
-export const saveDarkModeToCookies = (newTheme) => {
-  cookie.save('darkMode', newTheme, { path: '/' })
-}
-
-/**
- * 读取默认主题
- * @returns {*}
- */
-export const loadThemeFromCookies = () => {
-  return cookie.load('theme')
-}
-
-/**
-   * 保存默认主题
-   * @param newTheme
-   */
-export const saveThemeToCookies = (newTheme) => {
-  cookie.save('theme', newTheme, { path: '/' })
-}