File size: 3,570 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import { generateLocaleDict, initLocale, saveLangToCookies } from './lang'
import { createContext, useContext, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { THEMES, initDarkMode, saveDarkModeToCookies } from '@/themes/theme'
import { APPEARANCE, LANG, THEME } from 'blog.config'
const GlobalContext = createContext()
/**
* 定义全局变量，包括语言、主题、深色模式、加载状态
* @param children
* @returns {JSX.Element}
* @constructor
*/
export function GlobalContextProvider(props) {
const { post, children, siteInfo, categoryOptions, tagOptions, NOTION_CONFIG } = props
const [lang, updateLang] = useState(NOTION_CONFIG?.LANG || LANG) // 默认语言
const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG?.LANG || LANG)) // 默认语言
const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || THEME) // 默认博客主题
const [isDarkMode, updateDarkMode] = useState(NOTION_CONFIG?.APPEARANCE || APPEARANCE === 'dark') // 默认深色模式
const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
const router = useRouter()
// 是否全屏
const fullWidth = post?.fullWidth ?? false
// 切换主题
function switchTheme() {
const query = router.query
const currentTheme = query.theme || theme
const currentIndex = THEMES.indexOf(currentTheme)
const newIndex = currentIndex < THEMES.length - 1 ? currentIndex + 1 : 0
const newTheme = THEMES[newIndex]
query.theme = newTheme
router.push({ pathname: router.pathname, query })
return newTheme
}
// 切换深色模式
const toggleDarkMode = () => {
const newStatus = !isDarkMode
saveDarkModeToCookies(newStatus)
updateDarkMode(newStatus)
const htmlElement = document.getElementsByTagName('html')[0]
htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
}
/**
* 更新语言
*/
function changeLang(lang) {
if (lang) {
saveLangToCookies(lang)
updateLang(lang)
updateLocale(generateLocaleDict(lang))
}
}
useEffect(() => {
initDarkMode(updateDarkMode)
initLocale(lang, locale, updateLang, updateLocale)
}, [])
// 加载进度条
useEffect(() => {
const handleStart = (url) => {
const { theme } = router.query
if (theme && !url.includes(`theme=${theme}`)) {
const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${theme}`
router.push(newUrl)
}
setOnLoading(true)
}
const handleStop = () => {
setOnLoading(false)
}
router.events.on('routeChangeStart', handleStart)
router.events.on('routeChangeError', handleStop)
router.events.on('routeChangeComplete', handleStop)
return () => {
router.events.off('routeChangeStart', handleStart)
router.events.off('routeChangeComplete', handleStop)
router.events.off('routeChangeError', handleStop)
}
}, [router])
return (
<GlobalContext.Provider value={{
fullWidth,
NOTION_CONFIG,
toggleDarkMode,
onLoading,
setOnLoading,
lang,
changeLang,
locale,
updateLocale,
isDarkMode,
updateDarkMode,
theme,
setTheme,
switchTheme,
siteInfo,
categoryOptions,
tagOptions
}}>
{children}
</GlobalContext.Provider>
)
}
export const useGlobal = () => useContext(GlobalContext)
|