- 形如此的链接,或部分
+
-
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
new file mode 100644
index 00000000..db8cbd85
--- /dev/null
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import clsx from 'clsx'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'
+import { translate } from '@docusaurus/Translate'
+import { useLocation } from '@docusaurus/router'
+import IconLanguage from '@theme/Icon/Language'
+import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'
+import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'
+
+import ToggleLikeDropdownNavbarItem from '../ToggleLikeDropdownNavbarItem'
+import styles from './styles.module.css'
+
+export default function LocaleDropdownNavbarItem({
+ mobile,
+ dropdownItemsBefore,
+ dropdownItemsAfter,
+ queryString = '',
+ ...props
+}: Props): JSX.Element {
+ const {
+ i18n: { currentLocale, locales, localeConfigs },
+ } = useDocusaurusContext()
+ const alternatePageUtils = useAlternatePageUtils()
+ const { search, hash } = useLocation()
+
+ const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
+ const baseTo = `pathname://${alternatePageUtils.createUrl({
+ locale,
+ fullyQualified: false,
+ })}`
+ // preserve ?search#hash suffix on locale switches
+ const to = `${baseTo}${search}${hash}${queryString}`
+ return {
+ label: localeConfigs[locale]!.label,
+ lang: localeConfigs[locale]!.htmlLang,
+ to,
+ target: '_self',
+ autoAddBaseUrl: false,
+ className:
+ // eslint-disable-next-line no-nested-ternary
+ locale === currentLocale
+ ? // Similar idea as DefaultNavbarItem: select the right Infima active
+ // class name. This cannot be substituted with isActive, because the
+ // target URLs contain `pathname://` and therefore are not NavLinks!
+ mobile
+ ? 'menu__link--active'
+ : 'dropdown__link--active'
+ : '',
+ }
+ })
+
+ const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]
+
+ // Mobile is handled a bit differently
+ const dropdownLabel = mobile
+ ? translate({
+ message: 'Languages',
+ id: 'theme.navbar.mobileLanguageDropdown.label',
+ description: 'The label for the mobile language switcher dropdown',
+ })
+ : localeConfigs[currentLocale]!.label
+
+ return (
+
-
+
+ {icon} + {props.label} + > + } + onClick={(e) => { + e.preventDefault() + toggleCollapsed() + }} + > + {props.children ?? props.label} + ++ {items.map((childItemProps, i) => ( + ++ ))} +
+ )
+}
+
+export default function ToggleLikeDropdownNavbarItem({
+ mobile = false,
+ ...props
+}: Props): JSX.Element {
+ const Comp = mobile
+ ? ToggleLikeDropdownNavbarItemMobile
+ : ToggleLikeDropdownNavbarItemDesktop
+ return
-
+ {items.map((childItemProps, i) => (
+