feature:

网页根据浏览器本地化语言

lib/global.js

@@ -12,9 +12,13 @@ const GlobalContext = createContext()
  * @constructor
  */
 export function GlobalContextProvider ({ children }) {
-  const locale = getCurrentLocale()
+  const [locale, changeLocale] = useState(generateLocaleDict('en-US'))
   const [theme, changeTheme] = useState(loadUserThemeFromCookies())
-  useEffect(() => { initTheme(theme, changeTheme) })
+  // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作
+  useEffect(() => {
+    initTheme(theme, changeTheme)
+    initLocale(locale, changeLocale)
+  })
 
   return (
     <GlobalContext.Provider value={{ locale, theme, changeTheme }}>{children}</GlobalContext.Provider>
@@ -25,29 +29,49 @@ export function GlobalContextProvider ({ children }) {
  * 获取当前语言字典
  * @returns 不同语言对应字典
  */
-const getCurrentLocale = () => {
-  if (BLOG.lang.slice(0, 2).toLowerCase() === 'zh') {
-    switch (BLOG.lang.toLowerCase()) {
+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':
-        return lang['zh-CN']
+        userLocale = lang['zh-CN']
+        break
       case 'zh-hk':
-        return lang['zh-HK']
+        userLocale = lang['zh-HK']
+        break
       case 'zh-tw':
-        return lang['zh-TW']
+        userLocale = lang['zh-TW']
+        break
       default:
-        return lang['zh-TW']
+        userLocale = lang['zh-CN']
     }
-  } else {
-    return lang.en
   }
+  const resLocale = mergeDeep({}, lang['en-US'], userLocale)
+  console.log('当前:', langString, resLocale)
+  return resLocale
 }
 
+/**
+ * 初始化语言
+ * 根据用户当前浏览器语言进行切换
+ */
+const initLocale = (locale, changeLocale) => {
+  if (window) {
+    const targetLocale = generateLocaleDict(window.navigator.language)
+    if (JSON.stringify(locale) !== JSON.stringify(targetLocale)) {
+      changeLocale(targetLocale)
+    }
+  }
+}
 /**
  * 初始化主题
  * @param theme 用户默认主题state
  * @param changeTheme 更改主题ChangeState函数
- * @description 主题样式相关 由于Server采用服务端静态渲染，无法获取前端Cookie配置，故在渲染hooks中做初始化主题
+ * @description 读取cookie中存的用户主题
  */
 const initTheme = (theme, changeTheme) => {
   if (!theme) {
@@ -84,4 +108,35 @@ export const saveTheme = (newTheme) => {
   cookie.save('theme', newTheme, { path: '/' })
 }
 
+/**
+ * 深度合并两个对象
+ * @param target
+ * @param sources
+ */
+export function mergeDeep (target, ...sources) {
+  if (!sources.length) return target
+  const source = sources.shift()
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} })
+        mergeDeep(target[key], source[key])
+      } else {
+        Object.assign(target, { [key]: source[key] })
+      }
+    }
+  }
+  return mergeDeep(target, ...sources)
+}
+
+/**
+ * 对象检查
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject (item) {
+  return (item && typeof item === 'object' && !Array.isArray(item))
+}
+
 export const useGlobal = () => useContext(GlobalContext)