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)

lib/lang.js

@@ -1,87 +1,12 @@
+import zhCN from './lang/zh-CN'
+import enUS from './lang/en-US'
+import zhHK from './lang/zh-HK'
+import zhTW from './lang/zh-TW'
 const lang = {
-  en: {
-    NAV: {
-      INDEX: 'Blog',
-      RSS: 'RSS',
-      SEARCH: 'Search',
-      ABOUT: 'About',
-      NAVIGATOR: 'Navigator',
-      MAIL: 'E-Mail'
-    },
-    PAGINATION: {
-      PREV: 'Prev',
-      NEXT: 'Next'
-    },
-    SEARCH: {
-      ARTICLES: 'Search Articles',
-      TAGS: 'Search in'
-    },
-    POST: {
-      BACK: 'Back',
-      TOP: 'Top'
-    }
-  },
-  'zh-CN': {
-    NAV: {
-      INDEX: '首页',
-      RSS: '订阅',
-      SEARCH: '搜索',
-      ABOUT: '关于',
-      NAVGATION: '导航',
-      MAIL: '邮箱'
-    },
-    PAGINATION: {
-      PREV: '上一页',
-      NEXT: '下一页'
-    },
-    SEARCH: {
-      ARTICLES: '搜索文章',
-      TAGS: '搜索标签'
-    },
-    POST: {
-      BACK: '返回上页',
-      TOP: '回到顶部'
-    }
-  },
-  'zh-HK': {
-    NAV: {
-      INDEX: '網誌',
-      RSS: '訂閱',
-      SEARCH: '搜尋',
-      ABOUT: '關於',
-      NAVGATION: '導航',
-      MAIL: '電郵'
-    },
-    PAGINATION: {
-      PREV: '上一頁',
-      NEXT: '下一頁'
-    },
-    SEARCH: {
-      ARTICLES: '搜尋文章',
-      TAGS: '搜尋標簽'
-    },
-    POST: {
-      BACK: '返回',
-      TOP: '回到頂端'
-    }
-  },
-  'zh-TW': {
-    NAV: {
-      INDEX: '部落格',
-      RSS: '訂閱',
-      SEARCH: '搜尋',
-      ABOUT: '關於',
-      NAVGATION: '導航',
-      MAIL: '電郵'
-    },
-    PAGINATION: {
-      PREV: '上一頁',
-      NEXT: '下一頁'
-    },
-    POST: {
-      BACK: '返回',
-      TOP: '回到頂端'
-    }
-  }
+  'en-US': enUS,
+  'zh-CN': zhCN,
+  'zh-HK': zhHK,
+  'zh-TW': zhTW
 }
+
 export default lang

lib/lang/en-US.js

@@ -0,0 +1,31 @@
+export default {
+  NAV: {
+    INDEX: 'Blog',
+    RSS: 'RSS',
+    SEARCH: 'Search',
+    ABOUT: 'About',
+    MAIL: 'E-Mail'
+  },
+  COMMON: {
+    MORE: 'More',
+    LATEST_POSTS: 'Latest posts',
+    TAGS: 'Tags',
+    CATEGORY: 'Category',
+    SHARE: 'Share',
+    SCAN_QR_CODE: 'Scan QRCode',
+    URL_COPIED: 'URL has copied!',
+    TABLE_OF_CONTENTS: 'Table of Contents'
+  },
+  PAGINATION: {
+    PREV: 'Prev',
+    NEXT: 'Next'
+  },
+  SEARCH: {
+    ARTICLES: 'Search Articles',
+    TAGS: 'Search in'
+  },
+  POST: {
+    BACK: 'Back',
+    TOP: 'Top'
+  }
+}

lib/lang/zh-CN.js

@@ -0,0 +1,32 @@
+export default {
+  NAV: {
+    INDEX: '首页',
+    RSS: '订阅',
+    SEARCH: '搜索',
+    ABOUT: '关于',
+    NAVIGATOR: '导航',
+    MAIL: '邮箱'
+  },
+  COMMON: {
+    MORE: '更多',
+    LATEST_POSTS: '最新文章',
+    TAGS: '标签',
+    CATEGORY: '分类',
+    SHARE: '分享',
+    SCAN_QR_CODE: '扫一扫二维码',
+    URL_COPIED: '链接已复制！',
+    TABLE_OF_CONTENTS: '目录'
+  },
+  PAGINATION: {
+    PREV: '上一页',
+    NEXT: '下一页'
+  },
+  SEARCH: {
+    ARTICLES: '搜索文章',
+    TAGS: '搜索标签'
+  },
+  POST: {
+    BACK: '返回上页',
+    TOP: '回到顶部'
+  }
+}

lib/lang/zh-HK.js

@@ -0,0 +1,21 @@
+export default {
+  NAV: {
+    INDEX: '網誌',
+    RSS: '訂閱',
+    SEARCH: '搜尋',
+    ABOUT: '關於',
+    MAIL: '電郵'
+  },
+  PAGINATION: {
+    PREV: '上一頁',
+    NEXT: '下一頁'
+  },
+  SEARCH: {
+    ARTICLES: '搜尋文章',
+    TAGS: '搜尋標簽'
+  },
+  POST: {
+    BACK: '返回',
+    TOP: '回到頂端'
+  }
+}

lib/lang/zh-TW.js

@@ -0,0 +1,21 @@
+export default {
+  NAV: {
+    INDEX: '部落格',
+    RSS: '訂閱',
+    SEARCH: '搜尋',
+    ABOUT: '關於',
+    MAIL: '電郵'
+  },
+  PAGINATION: {
+    PREV: '上一頁',
+    NEXT: '下一頁'
+  },
+  SEARCH: {
+    ARTICLES: '搜尋文章',
+    TAGS: '搜尋標簽'
+  },
+  POST: {
+    BACK: '返回',
+    TOP: '回到頂端'
+  }
+}

lib/rss.js

@@ -1,7 +1,7 @@
 import { Feed } from 'feed'
 import BLOG from '@/blog.config'
 
-export function generateRss(posts) {
+export function generateRss (posts) {
   const year = new Date().getFullYear()
   const feed = new Feed({
     title: BLOG.title,