feature:

网页根据浏览器本地化语言
2026-05-14 07:26:52 +00:00 · 2021-12-01 12:35:34 +08:00
parent 85f5c266b1
commit 2d567b309f
16 changed files with 214 additions and 122 deletions
--- 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
--- 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
--- 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 => {
--- 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>
--- 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>
--- 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
--- 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>
--- 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}/>
          </>
--- 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)
--- 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
--- a/lib/lang/en-US.js
+++ 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'
+  }
+}
--- a/lib/lang/zh-CN.js
+++ 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: '回到顶部'
+  }
+}
--- a/lib/lang/zh-HK.js
+++ 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: '回到頂端'
+  }
+}
--- a/lib/lang/zh-TW.js
+++ 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: '回到頂端'
+  }
+}
--- 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,
--- 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} />
              ))}