From 0b03ca57bce54b5c362ad4d4dbdc037bdee12a3b Mon Sep 17 00:00:00 2001 From: Luffy <52o@qq52o.cn> Date: Thu, 16 Jan 2025 10:29:38 +0800 Subject: [PATCH] fix: match browser default language error --- src/theme/Layout/BrowserLanguage.tsx | 57 ++++++++++------------------ src/theme/Layout/index.tsx | 4 +- 2 files changed, 23 insertions(+), 38 deletions(-) diff --git a/src/theme/Layout/BrowserLanguage.tsx b/src/theme/Layout/BrowserLanguage.tsx index 631bc987e..6e36c3c3b 100644 --- a/src/theme/Layout/BrowserLanguage.tsx +++ b/src/theme/Layout/BrowserLanguage.tsx @@ -1,4 +1,4 @@ -import React, {useEffect} from 'react'; +import { useEffect } from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; const LANGUAGE_PREFERENCE_KEY = '_lang_browser_'; @@ -6,52 +6,37 @@ const LANGUAGE_PREFERENCE_KEY = '_lang_browser_'; export default function BrowserLanguageRedirect() { const { siteConfig: { - i18n: {defaultLocale, locales}, + i18n: { defaultLocale }, }, } = useDocusaurusContext(); useEffect(() => { - window.addEventListener('languagechange', () => { - localStorage.setItem(LANGUAGE_PREFERENCE_KEY, navigator.language); - }) - const currentPath = window.location.pathname; const storageLocale = localStorage.getItem('_lang_user_') || localStorage.getItem(LANGUAGE_PREFERENCE_KEY); - const storageLocaleIsDefault = storageLocale === defaultLocale; - - if (storageLocale) { - if (storageLocaleIsDefault) { - if (currentPath === '/') return; - return; - } else { - if (currentPath.startsWith(`/${storageLocale}`)) { - return; - } else { - window.location.pathname = `/${storageLocale}${currentPath}`; - return; - } + + const isZhCN = navigator.language.toLowerCase() === 'zh-cn'; + const isStoredZhCN = storageLocale === 'zh-CN'; + + if ((isZhCN || isStoredZhCN) && !currentPath.startsWith('/zh-CN')) { + if (isZhCN) { + localStorage.setItem(LANGUAGE_PREFERENCE_KEY, 'zh-CN'); } - } else { - const browserLanguage = navigator.language.toLowerCase(); - const matchedLocale = locales.find(locale => - browserLanguage === locale.toLowerCase() || - browserLanguage.startsWith(locale.toLowerCase() + '-') - ); - if (matchedLocale) { - localStorage.setItem(LANGUAGE_PREFERENCE_KEY, matchedLocale); - window.location.pathname = `/${matchedLocale}${currentPath}`; - } else { - window.location.pathname = currentPath; + if (isStoredZhCN || storageLocale === null) { + window.location.pathname = `/zh-CN${currentPath}`; } } - // remove the event listener + const handleLanguageChange = () => { + if (navigator.language.toLowerCase() === 'zh-cn') { + localStorage.setItem(LANGUAGE_PREFERENCE_KEY, 'zh-CN'); + } + }; + window.addEventListener('languagechange', handleLanguageChange); + return () => { - window.removeEventListener('languagechange', () => { - localStorage.setItem(LANGUAGE_PREFERENCE_KEY, navigator.language); - }) - } - }, []); + window.removeEventListener('languagechange', handleLanguageChange); + }; + }, [defaultLocale]); return null; } diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index 927bf0ab5..ad7de5c10 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -23,7 +23,7 @@ import LayoutProvider from '@theme/Layout/Provider'; import ErrorPageContent from '@theme/ErrorPageContent'; import type {Props} from '@theme/Layout'; import mixpanel from 'mixpanel-browser'; -// import BrowserLanguage from './BrowserLanguage'; +import BrowserLanguage from './BrowserLanguage'; import styles from './styles.module.css'; @@ -58,7 +58,7 @@ export default function Layout(props: Props): JSX.Element { - {/* */} +