fix: 🐛 修復 i18n

PR tangly1024#3222 tangly1024#3223

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/lang/en-US.js

@@ -69,7 +69,8 @@ export default {
     WORD_COUNT: 'Words',
     READ_TIME: 'Read Time',
     NEXT_POST: 'Next',
-    PREV_POST: 'Prev'
+    PREV_POST: 'Prev',
+    NOT_FOUND: 'Page not found.'
   },
   PAGINATION: {
     PREV: 'Prev',
@@ -89,6 +90,6 @@ export default {
     EMAIL: 'Email'
   },
   AI_SUMMARY: {
-    NAME: 'AI intelligent summary',
+    NAME: 'AI intelligent summary'
   }
 }

lib/lang/fr-FR.js

@@ -38,7 +38,8 @@ export default {
     SUBMIT: 'Valider',
     POST_TIME: 'Date de publication',
     LAST_EDITED_TIME: 'Date de modification',
-    RECENT_COMMENTS: 'Nouveau commentaire'
+    RECENT_COMMENTS: 'Nouveau commentaire',
+    NOT_FOUND: ''
   },
   PAGINATION: {
     PREV: 'PREV',
@@ -53,6 +54,6 @@ export default {
     TOP: 'Haut'
   },
   AI_SUMMARY: {
-    NAME: "Résumé intelligent par l'IA",
+    NAME: "Résumé intelligent par l'IA"
   }
 }

lib/lang/ja-JP.js

@@ -45,7 +45,8 @@ export default {
     DEBUG_CLOSE: 'デバッグをオフにする',
     THEME_SWITCH: 'テーマの切り替え',
     ANNOUNCEMENT: 'お知らせ',
-    START_READING: '読み始める'
+    START_READING: '読み始める',
+    NOT_FOUND: ''
   },
   PAGINATION: {
     PREV: '前のページ',
@@ -60,6 +61,6 @@ export default {
     TOP: '上に戻る'
   },
   AI_SUMMARY: {
-    NAME: 'AIインテリジェントサマリー',
+    NAME: 'AIインテリジェントサマリー'
   }
 }

lib/lang/tr-TR.js

@@ -40,7 +40,8 @@ export default {
     DEBUG_OPEN: 'Hata Ayıklama',
     DEBUG_CLOSE: 'Kapat',
     THEME_SWITCH: 'Temayı Değiştir',
-    ANNOUNCEMENT: 'Duyuru'
+    ANNOUNCEMENT: 'Duyuru',
+    NOT_FOUND: ''
   },
   PAGINATION: {
     PREV: 'Önceki',
@@ -55,6 +56,6 @@ export default {
     TOP: 'Yukarı'
   },
   AI_SUMMARY: {
-    NAME: 'Yapay Zeka Akıllı Özet',
+    NAME: 'Yapay Zeka Akıllı Özet'
   }
 }

lib/lang/zh-CN.js

@@ -69,7 +69,8 @@ export default {
     WORD_COUNT: '字数',
     READ_TIME: '阅读时长',
     NEXT_POST: '下一篇',
-    PREV_POST: '上一篇'
+    PREV_POST: '上一篇',
+    NOT_FOUND: '页面未找到'
   },
   PAGINATION: {
     PREV: '上页',
@@ -89,6 +90,6 @@ export default {
     EMAIL: '邮箱'
   },
   AI_SUMMARY: {
-    NAME: 'AI智能摘要',
+    NAME: 'AI智能摘要'
   }
 }

lib/lang/zh-HK.js

@@ -39,7 +39,8 @@ export default {
     POST_TIME: '發表於',
     LAST_EDITED_TIME: '最後更新',
     NEXT_POST: '下一篇',
-    PREV_POST: '上一篇'
+    PREV_POST: '上一篇',
+    NOT_FOUND: ''
   },
   PAGINATION: {
     PREV: '上一頁',
@@ -54,6 +55,6 @@ export default {
     TOP: '回到頁頂'
   },
   AI_SUMMARY: {
-    NAME: 'AI 智能摘要',
+    NAME: 'AI 智能摘要'
   }
 }

lib/lang/zh-TW.js

@@ -69,7 +69,8 @@ export default {
     WORD_COUNT: '字數',
     READ_TIME: '閱讀時間',
     NEXT_POST: '下一篇',
-    PREV_POST: '上一篇'
+    PREV_POST: '上一篇',
+    NOT_FOUND: '未找到該頁面'
   },
   PAGINATION: {
     PREV: '上一頁',
@@ -89,6 +90,6 @@ export default {
     EMAIL: '電子信箱'
   },
   AI_SUMMARY: {
-    NAME: 'AI 智慧摘要',
+    NAME: 'AI 智慧摘要'
   }
 }

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: {
     // 图片压缩

themes/hexo/index.js

@@ -330,6 +330,7 @@ const LayoutSlug = props => {
  */
 const Layout404 = props => {
   const router = useRouter()
+  const { locale } = useGlobal()
   useEffect(() => {
     // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
@@ -351,7 +352,7 @@ const Layout404 = props => {
             404
           </h2>
           <div className='inline-block text-left h-32 leading-10 items-center'>
-            <h2 className='m-0 p-0'>頁面未找到</h2>
+            <h2 className='m-0 p-0'>{locale.COMMON.NOT_FOUND}</h2>
           </div>
         </div>
       </div>