From 44d67569206d7d33111e9de4b6c0d0db8e3f64ac Mon Sep 17 00:00:00 2001 From: Zhenye Dong Date: Tue, 5 Nov 2024 00:09:46 +0800 Subject: [PATCH 1/2] fix: language switching now strictly follows URL path - Remove localStorage dependency for language persistence - Add route change listener for language updates - Simplify language switching logic - Fix language reset issue when refreshing /en pages --- lib/global.js | 28 +++++++++++++++++++++++++++- lib/lang.js | 31 +++++++++---------------------- 2 files changed, 36 insertions(+), 23 deletions(-) diff --git a/lib/global.js b/lib/global.js index f526e165..8f8850f3 100644 --- a/lib/global.js +++ b/lib/global.js @@ -87,9 +87,35 @@ export function GlobalContextProvider(props) { } } + // 添加路由变化时的语言处理 + useEffect(() => { + const handleRouteChange = (url) => { + // 从路径中提取语言前缀 + const pathSegments = url.split('/') + const pathLang = pathSegments[1] + + // 检查是否是有效的语言路径 + if (pathLang === 'en' || pathLang === 'zh') { + const targetLang = pathLang === 'en' ? 'en-US' : 'zh-CN' + + // 直接更新语言，不使用 localStorage + updateLang(targetLang) + updateLocale(generateLocaleDict(targetLang)) + } + } + + // 初始化时处理当前路径 + handleRouteChange(router.asPath) + + // 监听路由变化 + router.events.on('routeChangeComplete', handleRouteChange) + return () => { + router.events.off('routeChangeComplete', handleRouteChange) + } + }, [router]) + useEffect(() => { initDarkMode(updateDarkMode, defaultDarkMode) - initLocale(lang, locale, updateLang, updateLocale) if ( NOTION_CONFIG?.REDIRECT_LANG && JSON.parse(NOTION_CONFIG?.REDIRECT_LANG) diff --git a/lib/lang.js b/lib/lang.js index 0436b80f..ac2f0682 100644 --- a/lib/lang.js +++ b/lib/lang.js @@ -70,34 +70,21 @@ export function generateLocaleDict(langString) { */ export function initLocale(lang, locale, changeLang, changeLocale) { if (isBrowser) { - // 用户请求的语言 - let queryLang = - getQueryVariable('locale') || - getQueryVariable('lang') || - loadLangFromLocalStorage() + // 只使用 URL 参数，忽略 localStorage + const queryLang = getQueryVariable('locale') || getQueryVariable('lang') if (queryLang) { - // 用正则表达式匹配有效的语言标识符例如zh-CN（可选的 -CN 部分） - queryLang = queryLang.match(/[a-zA-Z]{2}(?:-[a-zA-Z]{2})?/) - if (queryLang) { - queryLang = queryLang[0] + const match = queryLang.match(/[a-zA-Z]{2}(?:-[a-zA-Z]{2})?/) + if (match) { + const targetLang = match[0] + changeLang(targetLang) + const targetLocale = generateLocaleDict(targetLang) + changeLocale(targetLocale) } } - - let currentLang = lang - if (queryLang && queryLang !== lang) { - currentLang = queryLang - } - - changeLang(currentLang) - saveLangToLocalStorage(currentLang) - - const targetLocale = generateLocaleDict(currentLang) - if (JSON.stringify(locale) !== JSON.stringify(currentLang)) { - changeLocale(targetLocale) - } } } + /** * 读取语言 * @returns {*} From 4d7b0f550da54f9047b56abae5267e7f6011eaa0 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Fri, 8 Nov 2024 17:03:23 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=A0=B9=E6=8D=AEurl=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E8=AF=AD=E8=A8=80=E5=89=8D=E7=BC=80=EF=BC=8C=E5=A4=84=E7=90=86?= =?UTF-8?q?=E7=AB=99=E7=82=B9=E6=98=BE=E7=A4=BA=E7=9A=84=E7=BF=BB=E8=AF=91?= =?UTF-8?q?=E8=AF=AD=E8=A8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/global.js | 24 +----------------------- lib/lang.js | 18 ++++++++++++------ 2 files changed, 13 insertions(+), 29 deletions(-) diff --git a/lib/global.js b/lib/global.js index 8f8850f3..a4297187 100644 --- a/lib/global.js +++ b/lib/global.js @@ -89,29 +89,7 @@ export function GlobalContextProvider(props) { // 添加路由变化时的语言处理 useEffect(() => { - const handleRouteChange = (url) => { - // 从路径中提取语言前缀 - const pathSegments = url.split('/') - const pathLang = pathSegments[1] - - // 检查是否是有效的语言路径 - if (pathLang === 'en' || pathLang === 'zh') { - const targetLang = pathLang === 'en' ? 'en-US' : 'zh-CN' - - // 直接更新语言，不使用 localStorage - updateLang(targetLang) - updateLocale(generateLocaleDict(targetLang)) - } - } - - // 初始化时处理当前路径 - handleRouteChange(router.asPath) - - // 监听路由变化 - router.events.on('routeChangeComplete', handleRouteChange) - return () => { - router.events.off('routeChangeComplete', handleRouteChange) - } + initLocale(router.locale, changeLang, updateLocale) }, [router]) useEffect(() => { diff --git a/lib/lang.js b/lib/lang.js index ac2f0682..9eda4da9 100644 --- a/lib/lang.js +++ b/lib/lang.js @@ -65,13 +65,19 @@ export function generateLocaleDict(langString) { } /** - * 初始化站点翻译 - * 根据用户当前浏览器语言进行切换 + * 站点翻译 + * 借助router中的locale机制，根据locale自动切换对应的语言 */ -export function initLocale(lang, locale, changeLang, changeLocale) { +export function initLocale(locale, changeLang, updateLocale) { if (isBrowser) { - // 只使用 URL 参数，忽略 localStorage - const queryLang = getQueryVariable('locale') || getQueryVariable('lang') + // 根据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 if (queryLang) { const match = queryLang.match(/[a-zA-Z]{2}(?:-[a-zA-Z]{2})?/) @@ -79,7 +85,7 @@ export function initLocale(lang, locale, changeLang, changeLocale) { const targetLang = match[0] changeLang(targetLang) const targetLocale = generateLocaleDict(targetLang) - changeLocale(targetLocale) + updateLocale(targetLocale) } } }