diff --git a/blog.config.js b/blog.config.js
index ba52c635..2b8432be 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -4,7 +4,7 @@ const BLOG = {
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
   description: '分享有趣的技术与思考',
-  lang: 'zh-CN', // ['zh-CN','en-US']
+  lang: 'zh-CN', // ['zh-CN','en-US'] default lang => see /lib/lang.js for more.
   notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   defaultImgCover: 'https://avatars.githubusercontent.com/u/15920488', // default image cover
diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js
index 3acb7ec7..0b20eddc 100644
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -2,12 +2,7 @@ import Link from 'next/link'
 import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
-  return <>
-    <section
-      className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
-      <div className='w-32'>文章分类</div>
-    </section>
-    <div>
+  return <div>
       <div id='category-list' className='dark:border-gray-600 dark:bg-gray-800 w-66'>
         {Object.keys(categories).map(category => {
           return <Link key={category} href={`/category/${category}`}>
@@ -16,7 +11,6 @@ const CategoryGroup = ({ currentCategory, categories }) => {
         })}
       </div>
     </div>
-  </>
 }
 
 export default CategoryGroup
diff --git a/components/LatestPosts.js b/components/LatestPosts.js
index 20a5e9a4..ac8e94b9 100644
--- a/components/LatestPosts.js
+++ b/components/LatestPosts.js
@@ -2,6 +2,7 @@ import Link from 'next/link'
 import BLOG from '@/blog.config'
 import { formatDateFmt } from '@/lib/formatDate'
 import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 最新文章列表
@@ -24,11 +25,12 @@ const LatestPosts = ({ posts }) => {
 
   // 获取当前路径
   const currentPath = useRouter().asPath
+  const { locale } = useGlobal()
 
   return <>
     <section
       className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
-      <div className='w-32'>最近更新</div>
+      <div className='w-32'>{locale.COMMON.LATEST_POSTS}</div>
     </section>
     <div>
       {postsSortByDate.map(post => {
diff --git a/components/ShareBar.js b/components/ShareBar.js
index 215646dc..775520bd 100644
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -4,6 +4,7 @@ import React from 'react'
 import { createPopper } from '@popperjs/core'
 import copy from 'copy-to-clipboard'
 import QRCode from 'qrcode.react'
+import { useGlobal } from '@/lib/global'
 
 const ShareBar = ({ post }) => {
   const router = useRouter()
@@ -13,6 +14,7 @@ const ShareBar = ({ post }) => {
   const [qrCodeShow, setQrCodeShow] = React.useState(false)
   const btnRef = React.createRef()
   const popoverRef = React.createRef()
+  const { locale } = useGlobal()
 
   const openPopover = () => {
     createPopper(btnRef.current, popoverRef.current, {
@@ -26,13 +28,13 @@ const ShareBar = ({ post }) => {
 
   const copyUrl = () => {
     copy(shareUrl)
-    alert('当前链接已复制到剪贴板')
+    alert(locale.COMMON.URL_COPIED)
   }
 
   return <>
     <div
       className='py-2 text-gray-500 text-center space-x-2 flex inline-block my-1 dark:text-gray-200 overflow-visible'>
-      <div className='hidden md:block text-gray-800 dark:text-gray-300 mr-2 my-2'>分享本文:</div>
+      <div className='hidden md:block text-gray-800 dark:text-gray-300 mr-2 my-2'>{locale.COMMON.SHARE}:</div>
       <div className='text-3xl cursor-pointer'>
         <a className='fa fa-facebook-square hover:text-red-600'
            href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} />
@@ -61,7 +63,7 @@ const ShareBar = ({ post }) => {
               />
             </div>
             <span className='bg-white text-black font-semibold p-1 mb-0 rounded-t-lg text-sm mx-auto mr-10'>
-            扫一扫分享
+            {locale.COMMON.SCAN_QR_CODE}
           </span>
           </div>
         </a>
diff --git a/components/SideBar.js b/components/SideBar.js
index 0e89154b..78885bcb 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -7,6 +7,7 @@ import CategoryGroup from '@/components/CategoryGroup'
 import Toc from '@/components/Toc'
 import SearchInput from '@/components/SearchInput'
 import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 侧边栏
@@ -21,6 +22,7 @@ import Link from 'next/link'
  * @constructor
  */
 const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
+  const { locale } = useGlobal()
   return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
     <section>
       <InfoCard />
@@ -42,6 +44,10 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {/* 分类  */}
       {categories && (
         <section className='mt-2'>
+          <section
+            className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
+            <div className='w-32'>{locale.COMMON.CATEGORY}</div>
+          </section>
           <CategoryGroup currentCategory={currentCategory} categories={categories} />
         </section>
       )}
@@ -58,8 +64,8 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
         <section className='mt-2'>
           <section
             className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap justify-between'>
-            <div>标签</div>
-            <div><Link href='/tag'><div className='hover:underline cursor-pointer opacity-50'>更多标签</div></Link></div>
+            <div>{locale.COMMON.TAGS}</div>
+            <div><Link href='/tag'><div className='hover:underline cursor-pointer opacity-50'>{locale.COMMON.MORE}</div></Link></div>
           </section>
           <div className='px-5'>
             <TagGroups tags={tags} currentTag={currentTag} />
@@ -72,7 +78,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       <section id='left-toc' className='sticky top-0 bg-white dark:bg-gray-800'>
         <div
           className='border-b text-2xl bg-white font-bold text-black dark:bg-gray-700 dark:text-white py-6 px-6'>
-          文章目录
+          {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
         <Toc toc={post.toc} />
       </section>
diff --git a/components/TagItem.js b/components/TagItem.js
index 6466b4b6..f3e9cf1c 100644
--- a/components/TagItem.js
+++ b/components/TagItem.js
@@ -5,7 +5,7 @@ const TagItem = ({ tag, selected }) => {
   return (
   <Link href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
     <li
-      className={`notion-${tag.color}_background list-none cursor-pointer hover:bg-gray-300 rounded-xl 
+      className={`notion-${tag.color}_background list-none cursor-pointer hover:bg-gray-300 rounded-md 
       duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap
                   dark:hover:bg-gray-800 dark:hover:text-white hover:text-black
                  ${selected
diff --git a/components/TagItemMini.js b/components/TagItemMini.js
index f0131486..7b959db1 100644
--- a/components/TagItemMini.js
+++ b/components/TagItemMini.js
@@ -2,11 +2,11 @@ import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false }) => {
   return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
-    <div className={`cursor-pointer inline-block rounded hover:bg-gray-500 
+    <div className={`cursor-pointer inline-block rounded hover:bg-gray-500 duration-200
       mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white
        ${selected
       ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
-      : `text-gray-500 dark:text-gray-600 hover:shadow-xl hover:text-white dark:hover:bg-gray-600 dark:border-gray-600 notion-${tag.color}_background `}` }>
+      : `text-gray-600 dark:text-gray-600 hover:shadow-xl hover:text-white dark:hover:bg-gray-600 dark:border-gray-600 notion-${tag.color}_background `}` }>
     <div> <i className='fa fa-tag mr-2 py-0.5'/>{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
     </div>
   </Link>
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index 9dca938d..e137d126 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -1,5 +1,6 @@
 import Toc from '@/components/Toc'
 import React, { useImperativeHandle, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 目录抽屉栏
@@ -19,7 +20,7 @@ const TocDrawer = ({ post, cRef }) => {
   const switchVisible = () => {
     switchShowDrawer(!showDrawer)
   }
-
+  const { locale } = useGlobal()
   return <>
     <div className='fixed top-0 right-0 z-40'>
       {/* 侧边菜单 */}
@@ -28,7 +29,7 @@ const TocDrawer = ({ post, cRef }) => {
           {post && <>
             <div
               className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
-              文章目录
+              {locale.COMMON.TABLE_OF_CONTENTS}
             </div>
             <Toc toc={post.toc}/>
           </>
diff --git a/lib/global.js b/lib/global.js
index 5911e9c3..7e81a0c8 100644
--- a/lib/global.js
+++ b/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)
diff --git a/lib/lang.js b/lib/lang.js
index 0cfba361..0c4131fe 100644
--- a/lib/lang.js
+++ b/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
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
new file mode 100644
index 00000000..d8fdfca8
--- /dev/null
+++ b/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'
+  }
+}
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
new file mode 100644
index 00000000..6a6b11cd
--- /dev/null
+++ b/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: '回到顶部'
+  }
+}
diff --git a/lib/lang/zh-HK.js b/lib/lang/zh-HK.js
new file mode 100644
index 00000000..6a05df55
--- /dev/null
+++ b/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: '回到頂端'
+  }
+}
diff --git a/lib/lang/zh-TW.js b/lib/lang/zh-TW.js
new file mode 100644
index 00000000..a62d7ca5
--- /dev/null
+++ b/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: '回到頂端'
+  }
+}
diff --git a/lib/rss.js b/lib/rss.js
index 4766cd4b..8f25e5fc 100644
--- a/lib/rss.js
+++ b/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,
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 86f790c8..cfc27311 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -24,6 +24,7 @@ import 'prismjs/components/prism-typescript'
 import RecommendPosts from '@/components/RecommendPosts'
 import TocDrawer from '@/components/TocDrawer'
 import TocDrawerButton from '@/components/TocDrawerButton'
+import { useGlobal } from '@/lib/global'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -41,6 +42,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
   const targetRef = useRef(null)
   const drawerRight = useRef(null)
   const url = BLOG.link + useRouter().asPath
+  const { locale } = useGlobal()
 
   return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} categories={categories}>
     <Progress targetRef={targetRef} />
@@ -71,7 +73,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
         <div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'>
           <div className='flex-nowrap flex'>
             <div className='py-2 opacity-50'>
-              分类：
+              {locale.COMMON.CATEGORY}：
             </div>
             <Link href={`/category/${post.category}`} passHref>
               <div className='cursor-pointer text-md py-2 mx-3 hover:underline'><i
@@ -120,9 +122,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
         <section
           className='overflow-auto dark:bg-gray-800 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
           <ul>
-            <li><strong>本文作者：</strong>{BLOG.author}</li>
-            <li><strong>本文链接：</strong> <a href={url}>{url}</a> 《{post.title}》</li>
-            <li><strong>版权声明：</strong> 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
+            <li>本文作者: {BLOG.author}</li>
+            <li>本文链接: <a href={url}>{url}</a></li>
+            <li>版权声明: 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
           </ul>
         </section>
 
@@ -130,7 +132,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
 
            {post.tagItems && (
             <div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
-              <div className='hidden md:block dark:text-gray-300'>标签：</div>
+              <div className='hidden md:block dark:text-gray-300'>{locale.COMMON.TAGS}：</div>
               {post.tagItems.map(tag => (
                 <TagItem key={tag.name} tag={tag} />
               ))}