diff --git a/lib/global.js b/lib/global.js index d1357434..dd1c6da9 100644 --- a/lib/global.js +++ b/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 ( - + {children} ) } -/** - * 获取当前语言字典 - * @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 diff --git a/lib/lang.js b/lib/lang.js index 0c4131fe..dd552f0e 100644 --- a/lib/lang.js +++ b/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) + } + } +}