读取URL主题

lib/global.js

@@ -1,8 +1,8 @@
-import lang from './lang'
-import { useContext, createContext, useState } from 'react'
+import { generateLocaleDict, initLocale } from './lang'
+import { createContext, useContext, useEffect, useState } from 'react'
 import Router from 'next/router'
-import { ALL_THEME, initDarkMode } from './theme'
 import BLOG from '@/blog.config'
+import { ALL_THEME, initDarkMode } from '@/lib/theme'
 
 const GlobalContext = createContext()
 let hasInit = false
@@ -27,69 +27,26 @@ export function GlobalContextProvider ({ children }) {
     changeLoadingState(false)
   })
 
-  // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作
-  setTimeout(() => {
+  useEffect(() => {
     if (!hasInit) {
-      hasInit = true
       initLocale(locale, updateLocale)
       initDarkMode(isDarkMode, updateDarkMode)
-      // 读取浏览器参数中的主题
-      const userTheme = Router?.router?.query?.theme
-      if (userTheme && ALL_THEME.indexOf(userTheme) > -1) {
-        setTheme(userTheme)
-      }
+      hasInit = true
     }
-  }, 50)
+    // 读取浏览器参数中的主题
+    const userTheme = Router?.router?.query?.theme
+    if (userTheme && ALL_THEME.indexOf(userTheme) > -1 && theme !== userTheme) {
+      setTheme(userTheme)
+    }
+  })
 
   return (
-    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode, theme, setTheme }}>
+    <GlobalContext.Provider value={{ onLoading, locale, updateLocale, isDarkMode, updateDarkMode, theme, setTheme }}>
       {children}
     </GlobalContext.Provider>
   )
 }
 
-/**
- * 获取当前语言字典
- * @returns 不同语言对应字典
- */
-const generateLocaleDict = (langString) => {
-  let userLocale = lang['en-US']
-  if (!langString) {
-    return userLocale
-  }
-  if (langString.slice(0, 2).toLowerCase() === 'zh') {
-    switch (langString.toLowerCase()) {
-      case 'zh-cn':
-      case 'zh-sg':
-        userLocale = lang['zh-CN']
-        break
-      case 'zh-hk':
-        userLocale = lang['zh-HK']
-        break
-      case 'zh-tw':
-        userLocale = lang['zh-TW']
-        break
-      default:
-        userLocale = lang['zh-CN']
-    }
-  }
-  const resLocale = mergeDeep({}, lang['en-US'], userLocale)
-  return resLocale
-}
-
-/**
- * 初始化语言
- * 根据用户当前浏览器语言进行切换
- */
-const initLocale = (locale, changeLocale) => {
-  if (typeof window !== 'undefined') {
-    const targetLocale = generateLocaleDict(window.navigator.language)
-    if (JSON.stringify(locale) !== JSON.stringify(targetLocale)) {
-      changeLocale(targetLocale)
-    }
-  }
-}
-
 /**
  * 深度合并两个对象
  * @param target

lib/lang.js

@@ -2,6 +2,7 @@ import zhCN from './lang/zh-CN'
 import enUS from './lang/en-US'
 import zhHK from './lang/zh-HK'
 import zhTW from './lang/zh-TW'
+import { mergeDeep } from '@/lib/global'
 const lang = {
   'en-US': enUS,
   'zh-CN': zhCN,
@@ -10,3 +11,44 @@ const lang = {
 }
 
 export default lang
+
+/**
+ * 获取当前语言字典
+ * @returns 不同语言对应字典
+ */
+export function generateLocaleDict (langString) {
+  let userLocale = lang['en-US']
+  if (!langString) {
+    return userLocale
+  }
+  if (langString.slice(0, 2).toLowerCase() === 'zh') {
+    switch (langString.toLowerCase()) {
+      case 'zh-cn':
+      case 'zh-sg':
+        userLocale = lang['zh-CN']
+        break
+      case 'zh-hk':
+        userLocale = lang['zh-HK']
+        break
+      case 'zh-tw':
+        userLocale = lang['zh-TW']
+        break
+      default:
+        userLocale = lang['zh-CN']
+    }
+  }
+  return mergeDeep({}, lang['en-US'], userLocale)
+}
+
+/**
+ * 初始化语言
+ * 根据用户当前浏览器语言进行切换
+ */
+export function initLocale (locale, changeLocale) {
+  if (typeof window !== 'undefined') {
+    const targetLocale = generateLocaleDict(window.navigator.language)
+    if (JSON.stringify(locale) !== JSON.stringify(targetLocale)) {
+      changeLocale(targetLocale)
+    }
+  }
+}