fix: 🐛 修復 i18n 無法套用語言變體

lib/global.js

@@ -8,12 +8,7 @@ import {
 import { useUser } from '@clerk/nextjs'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useState } from 'react'
-import {
-  generateLocaleDict,
-  initLocale,
-  redirectUserLang,
-  saveLangToLocalStorage
-} from './lang'
+import { generateLocaleDict, initLocale, redirectUserLang } from './lang'
 
 /**
  * 全局上下文
@@ -81,7 +76,6 @@ export function GlobalContextProvider(props) {
 
   function changeLang(lang) {
     if (lang) {
-      saveLangToLocalStorage(lang)
       updateLang(lang)
       updateLocale(generateLocaleDict(lang))
     }

lib/lang.js

@@ -8,6 +8,7 @@ import zhCN from './lang/zh-CN'
 import zhHK from './lang/zh-HK'
 import zhTW from './lang/zh-TW'
 import { extractLangPrefix } from './utils/pageId'
+import { useRouter } from 'next/router'
 
 /**
  * 在这里配置所有支持的语言
@@ -70,15 +71,9 @@ export function generateLocaleDict(langString) {
  */
 export function initLocale(locale, changeLang, updateLocale) {
   if (isBrowser) {
-    // 根据router中的locale对象判断当前语言：表现为前缀中包含 zh、en 等。
-    let pathLocaleLang = null
-    if (locale === 'en' || locale === 'zh') {
-      pathLocaleLang = locale === 'en' ? 'en-US' : 'zh-CN'
-    }
     // 如果有query参数切换语言则优先
     const queryLang =
-      getQueryVariable('locale') || getQueryVariable('lang') || pathLocaleLang
-
+      getQueryVariable('locale') || getQueryVariable('lang') || locale
     if (queryLang) {
       const match = queryLang.match(/[a-zA-Z]{2}(?:-[a-zA-Z]{2})?/)
       if (match) {
@@ -91,22 +86,6 @@ export function initLocale(locale, changeLang, updateLocale) {
   }
 }
 
-/**
- * 读取语言
- * @returns {*}
- */
-export const loadLangFromLocalStorage = () => {
-  return localStorage.getItem('lang')
-}
-
-/**
- * 保存语言
- * @param newTheme
- */
-export const saveLangToLocalStorage = lang => {
-  localStorage.setItem('lang', lang)
-}
-
 /**
  *  检测用户的预研偏好，跳转至对应的多语言网站
  * @param {*} lang
@@ -143,3 +122,13 @@ export const redirectUserLang = (lang, pageId) => {
     }
   }
 }
+
+/**
+ * 获取当前 Next.js 路由下的 locale
+ * @returns 当前路由下的 locale
+ */
+export function getCurrentLang() {
+  const router = useRouter()
+  let currentLang = router.locale
+  return currentLang
+}

lib/notion/convertInnerUrl.js

@@ -1,6 +1,6 @@
 import { idToUuid } from 'notion-utils'
 import { checkStrIsNotionId, getLastPartOfUrl, isBrowser } from '../utils'
-import { loadLangFromLocalStorage } from '@/lib/lang'
+import { getCurrentLang } from '@/lib/lang'
 
 /**
  * 处理页面内连接跳转:
@@ -18,10 +18,10 @@ export const convertInnerUrl = allPages => {
   if (!allAnchorTags) {
     return
   }
-  const { origin, pathname } = window.location;
+  const { origin, pathname } = window.location
   const currentURL = origin + pathname
   const currentPathLang = pathname.split('/').filter(Boolean)[0]
-  const lang = loadLangFromLocalStorage().split(/[-_]/)[0]
+  const lang = getCurrentLang
   const langPrefix = lang === currentPathLang ? '/' + lang : ''
   for (const anchorTag of allAnchorTags) {
     // url替换成slug
@@ -50,4 +50,4 @@ export const convertInnerUrl = allPages => {
       }
     }
   }
-}
+}

next.config.js

@@ -15,7 +15,7 @@ const themes = scanSubdirectories(path.resolve(__dirname, 'themes'))
 const locales = (function () {
   // 根据BLOG_NOTION_PAGE_ID 检查支持多少种语言数据.
   // 支持如下格式配置多个语言的页面id xxx,zh:xxx,en:xxx
-  const langs = [BLOG.LANG.slice(0, 2)]
+  const langs = [BLOG.LANG]
   if (BLOG.NOTION_PAGE_ID.indexOf(',') > 0) {
     const siteIds = BLOG.NOTION_PAGE_ID.split(',')
     for (let index = 0; index < siteIds.length; index++) {
@@ -84,15 +84,19 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true
   },
-  output: process.env.EXPORT ? 'export' : process.env.NEXT_BUILD_STANDALONE === 'true' ? 'standalone' : undefined,
+  output: process.env.EXPORT
+    ? 'export'
+    : process.env.NEXT_BUILD_STANDALONE === 'true'
+      ? 'standalone'
+      : undefined,
   staticPageGenerationTimeout: 120,
   // 多语言， 在export时禁用
   i18n: process.env.EXPORT
     ? undefined
     : {
-        defaultLocale: BLOG.LANG.slice(0, 2),
+        defaultLocale: BLOG.LANG,
         // 支持的所有多语言,按需填写即可
-        locales
+        locales: locales
       },
   images: {
     // 图片压缩