多语言切换

lib/global.js

@@ -14,7 +14,8 @@ const GlobalContext = createContext()
  * @constructor
  */
 export function GlobalContextProvider({ children }) {
-  const [locale, updateLocale] = useState(generateLocaleDict('en-US'))
+  const [lang, updateLang] = useState(BLOG.LANG)
+  const [locale, updateLocale] = useState(generateLocaleDict(lang))
   const [isDarkMode, updateDarkMode] = useState(false)
   const [onLoading, changeLoadingState] = useState(false)
   const [theme, setTheme] = useState(BLOG.THEME)
@@ -43,7 +44,7 @@ export function GlobalContextProvider({ children }) {
   }
 
   useEffect(() => {
-    initLocale(locale, updateLocale)
+    initLocale(lang, locale, updateLang, updateLocale)
     initDarkMode(isDarkMode, updateDarkMode)
     initTheme(theme, changeTheme)
   }, [])

lib/lang.js

@@ -3,6 +3,7 @@ import enUS from './lang/en-US'
 import zhHK from './lang/zh-HK'
 import zhTW from './lang/zh-TW'
 import frFR from '@/lib/lang/fr-FR'
+import cookie from 'react-cookies'
 import { getQueryVariable, isBrowser, mergeDeep } from './utils'
 
 const lang = {
@@ -43,16 +44,37 @@ export function generateLocaleDict(langString) {
 }
 
 /**
- * 初始化语言
+ * 初始化站点翻译
  * 根据用户当前浏览器语言进行切换
  */
-export function initLocale(locale, changeLocale) {
+export function initLocale(lang, locale, changeLang, changeLocale) {
   if (isBrowser()) {
-    const browserLocale = window.navigator.language
-    const queryLocale = getQueryVariable('lang')
-    const targetLocale = generateLocaleDict(queryLocale || browserLocale)
+    const queryLang = getQueryVariable('lang') || window.navigator.language
+    let currentLang = lang
+    if (queryLang !== lang) {
+      currentLang = queryLang
+    }
+    changeLang(currentLang)
+    saveLangToCookies(currentLang)
+
+    const targetLocale = generateLocaleDict(queryLang)
     if (JSON.stringify(locale) !== JSON.stringify(targetLocale)) {
       changeLocale(targetLocale)
     }
   }
 }
+/**
+ * 读取语言
+ * @returns {*}
+ */
+export const loadLangFromCookies = () => {
+  return cookie.load('lang')
+}
+
+/**
+     * 保存语言
+     * @param newTheme
+     */
+export const saveLangToCookies = (lang) => {
+  cookie.save('lang', lang, { path: '/' })
+}