多语言版本自动切换语言处理

lib/global.js

@@ -1,8 +1,17 @@
-import { generateLocaleDict, initLocale, saveLangToLocalStorage } from './lang'
-import { createContext, useContext, useEffect, useState } from 'react'
+import {
+  THEMES,
+  initDarkMode,
+  saveDarkModeToLocalStorage
+} from '@/themes/theme'
+import { APPEARANCE, LANG, NOTION_PAGE_ID, THEME } from 'blog.config'
 import { useRouter } from 'next/router'
-import { THEMES, initDarkMode, saveDarkModeToLocalStorage } from '@/themes/theme'
-import { APPEARANCE, LANG, THEME } from 'blog.config'
+import { createContext, useContext, useEffect, useState } from 'react'
+import {
+  generateLocaleDict,
+  initLocale,
+  redirectUserLang,
+  saveLangToLocalStorage
+} from './lang'
 const GlobalContext = createContext()
 
 /**
@@ -12,9 +21,18 @@ const GlobalContext = createContext()
  * @constructor
  */
 export function GlobalContextProvider(props) {
-  const { post, children, siteInfo, categoryOptions, tagOptions, NOTION_CONFIG } = props
+  const {
+    post,
+    children,
+    siteInfo,
+    categoryOptions,
+    tagOptions,
+    NOTION_CONFIG
+  } = props
   const [lang, updateLang] = useState(NOTION_CONFIG?.LANG || LANG) // 默认语言
-  const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG?.LANG || LANG)) // 默认语言
+  const [locale, updateLocale] = useState(
+    generateLocaleDict(NOTION_CONFIG?.LANG || LANG)
+  ) // 默认语言
   const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || THEME) // 默认博客主题
   const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE
   const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
@@ -48,6 +66,7 @@ export function GlobalContextProvider(props) {
 
   /**
    * 更新语言
+   * 这里是代码级别的多语言，整个站点和文章内容的多语言不在此处理
    */
   function changeLang(lang) {
     if (lang) {
@@ -60,6 +79,7 @@ export function GlobalContextProvider(props) {
   useEffect(() => {
     initDarkMode(updateDarkMode, defaultDarkMode)
     initLocale(lang, locale, updateLang, updateLocale)
+    redirectUserLang(NOTION_PAGE_ID)
   }, [])
 
   // 加载进度条

lib/lang.js

@@ -6,6 +6,7 @@ import trTR from './lang/tr-TR'
 import zhCN from './lang/zh-CN'
 import zhHK from './lang/zh-HK'
 import zhTW from './lang/zh-TW'
+import { extractLangPrefix } from './utils/pageId'
 
 /**
  * 在这里配置所有支持的语言
@@ -102,3 +103,36 @@ export const loadLangFromLocalStorage = () => {
 export const saveLangToLocalStorage = lang => {
   localStorage.setItem('lang', lang)
 }
+
+/**
+ *  检测用户的预研偏好，跳转至对应的多语言网站
+ * @param {*} lang
+ * @param {*} pageId
+ *
+ */
+export const redirectUserLang = (lang, pageId) => {
+  if (!isBrowser) {
+    return
+  }
+  // 只在首页处理跳转
+  if (!window.location.pathname === '/') {
+    return
+  }
+
+  const userLang =
+    getQueryVariable('locale') ||
+    getQueryVariable('lang') ||
+    window?.navigator?.language
+  const siteIds = pageId.split(',')
+
+  // 默认是进首页; 如果检测到有一个多语言匹配了用户浏览器，则自动跳转过去
+  for (let index = 0; index < siteIds.length; index++) {
+    const siteId = siteIds[index]
+    const prefix = extractLangPrefix(siteId)
+    if (prefix === userLang) {
+      if (window.location.pathname.indexOf(prefix) < 0) {
+        window.location.href = '/' + prefix
+      }
+    }
+  }
+}