|
1 | | -import React, { useState } from "react"; |
2 | | -import { useMount } from "ahooks"; |
| 1 | +import React from "react"; |
| 2 | +import { useLocation } from "@docusaurus/router"; |
3 | 3 | import Link from "@docusaurus/Link"; |
4 | 4 | import useBaseUrl from "@docusaurus/useBaseUrl"; |
5 | 5 | import { translate } from "@docusaurus/Translate"; |
6 | | -import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment"; |
7 | | -import docusaurusConfig from "@generated/docusaurus.config"; |
8 | | -// https://github.com/facebook/docusaurus/issues/6953 |
9 | | -// https://github.com/facebook/docusaurus/issues/6096 |
| 6 | +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; |
| 7 | + |
10 | 8 | export default function HomeBreadcrumbItem() { |
11 | | - const canUseDOM = ExecutionEnvironment.canUseDOM; |
12 | | - const [menuName, setMenuName] = useState(""); |
13 | | - const pathname = canUseDOM ? window?.location?.pathname : "/"; |
14 | | - const menu = canUseDOM ? `/${pathname?.split("/")[1]}/` : "/"; |
| 9 | + const { siteConfig } = useDocusaurusContext(); |
| 10 | + const { pathname } = useLocation(); |
| 11 | + |
| 12 | + // 从配置中获取 navbar items |
| 13 | + const navbarItems = |
| 14 | + ( |
| 15 | + siteConfig?.themeConfig?.navbar as { |
| 16 | + items?: { to: string; label: string }[]; |
| 17 | + } |
| 18 | + )?.items || []; |
| 19 | + |
| 20 | + // 计算 menu 和 menuName |
| 21 | + const menu = `/${pathname.split("/")[1] || ""}/`; |
| 22 | + const menuName = |
| 23 | + navbarItems.find((item) => item.to === menu)?.label || "Home"; |
| 24 | + |
| 25 | + // 生成链接 |
15 | 26 | const homeHref = useBaseUrl(menu); |
16 | | - useMount(() => { |
17 | | - if (canUseDOM) { |
18 | | - const menuItems = (docusaurusConfig?.themeConfig?.navbar as any)?.items; |
19 | | - setMenuName(menuItems?.find((item) => item.to === menu)?.label); |
20 | | - } |
21 | | - }); |
| 27 | + |
22 | 28 | return ( |
23 | 29 | <li className="breadcrumbs__item"> |
24 | 30 | <Link |
|
0 commit comments