feat: Custom 404 page

zhongyunWan · Oct 25, 2024 · 8bd5aa1 · 8bd5aa1
1 parent b3f7b05
commit 8bd5aa1
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 35 deletions.
diff --git a/docusaurus/src/constants/index.ts b/docusaurus/src/constants/index.ts
@@ -88,4 +88,27 @@ const ZH_TRANSLATIONS: DocSearchTranslations = {
   },
 };
 
-export { EN_TRANSLATIONS, ZH_TRANSLATIONS };
+const EN_NOT_FOUND_CONFIG = {
+  title: "Page Not Found",
+  descriptions: [
+    "We could not find what you were looking for.",
+    "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.",
+  ],
+  homeBtnText: "Back to Home",
+};
+
+const ZH_NOT_FOUND_CONFIG = {
+  title: "找不到页面",
+  descriptions: [
+    "我们找不到您要找的页面",
+    "请联系原始链接来源网站的所有者，并告知他们链接已损坏",
+  ],
+  homeBtnText: "返回首页",
+};
+
+export {
+  EN_TRANSLATIONS,
+  ZH_TRANSLATIONS,
+  ZH_NOT_FOUND_CONFIG,
+  EN_NOT_FOUND_CONFIG,
+};
diff --git a/docusaurus/src/theme/NotFound/Content/index.tsx b/docusaurus/src/theme/NotFound/Content/index.tsx
@@ -1,36 +1,53 @@
-import React from 'react';
-import clsx from 'clsx';
-import Translate from '@docusaurus/Translate';
-import type {Props} from '@theme/NotFound/Content';
-import Heading from '@theme/Heading';
+import React, { useMemo } from "react";
+import clsx from "clsx";
+import { useLocation } from "react-router-dom";
+import type { Props } from "@theme/NotFound/Content";
+import Heading from "@theme/Heading";
+import { Button } from "antd";
+import { EN_NOT_FOUND_CONFIG, ZH_NOT_FOUND_CONFIG } from "@site/src/constants";
+
+export default function NotFoundContent({ className }: Props): JSX.Element {
+  const { pathname } = useLocation();
+
+  const getHomeHref = () => {
+    try {
+      const pathSegments = pathname
+        .split("/")
+        .filter((segment) => segment !== "");
+
+      // 截取前三个路径段
+      const basePathSegments = pathSegments.slice(0, 3);
+      const basePath = `/${basePathSegments.join("/")}/guide`;
+      return basePath;
+    } catch (error) {
+      console.error("Invalid URL:", error);
+      return "";
+    }
+  };
+
+  const contentConfig = useMemo(() => {
+    const lang =
+      pathname?.split("/")?.find((item) => ["zh", "en"].includes(item)) || "en";
+
+    if (lang === "en") {
+      return EN_NOT_FOUND_CONFIG;
+    }
+    return ZH_NOT_FOUND_CONFIG;
+  }, [pathname]);
 
-export default function NotFoundContent({className}: Props): JSX.Element {
   return (
-    <main className={clsx('container margin-vert--xl', className)}>
+    <main className={clsx("container margin-vert--xl", className)}>
       <div className="row">
         <div className="col col--6 col--offset-3">
           <Heading as="h1" className="hero__title">
-            <Translate
-              id="theme.NotFound.title"
-              description="The title of the 404 page">
-              Page Not Found
-            </Translate>
+            {contentConfig.title}
           </Heading>
-          <p>
-            <Translate
-              id="theme.NotFound.p1"
-              description="The first paragraph of the 404 page">
-              We could not find what you were looking for.
-            </Translate>
-          </p>
-          <p>
-            <Translate
-              id="theme.NotFound.p2"
-              description="The 2nd paragraph of the 404 page">
-              Please contact the owner of the site that linked you to the
-              original URL and let them know their link is broken.
-            </Translate>
-          </p>
+          {contentConfig.descriptions?.map((desc) => (
+            <p>{desc}</p>
+          ))}
+          <Button type="primary" href={getHomeHref()}>
+            {contentConfig.homeBtnText}
+          </Button>
         </div>
       </div>
     </main>

diff --git a/docusaurus/src/theme/NotFound/index.tsx b/docusaurus/src/theme/NotFound/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import {translate} from '@docusaurus/Translate';
-import {PageMetadata} from '@docusaurus/theme-common';
-import Layout from '@theme/Layout';
-import NotFoundContent from '@theme/NotFound/Content';
+import React from "react";
+import { translate } from "@docusaurus/Translate";
+import { PageMetadata } from "@docusaurus/theme-common";
+import Layout from "@theme/Layout";
+import NotFoundContent from "@theme/NotFound/Content";
 
 export default function Index(): JSX.Element {
   const title = translate({
-    id: 'theme.NotFound.title',
-    message: 'Page Not Found',
+    id: "theme.NotFound.title",
+    message: "Page Not Found",
   });
   return (
     <>