From 9482b2ac18f49b21da5a91a7b4590f0ff4fc77d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=87=E8=B6=A3=E4=BF=9D=E7=BD=97?= Date: Fri, 1 Dec 2023 23:01:44 +0800 Subject: [PATCH] Feat: Dynamic Page Route MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 动态路由页面 + 404 异常捕获 --- .../common/article/article.module.less | 55 +++++++++++++++++++ app/root.tsx | 43 +++++++++++++++ app/routes/$.tsx | 39 +++++++++++++ app/routes/note.$year.$id.tsx | 4 +- app/types/api.page.d.ts | 14 +++++ app/utils/index.ts | 2 +- 6 files changed, 154 insertions(+), 3 deletions(-) create mode 100644 app/routes/$.tsx create mode 100644 app/types/api.page.d.ts diff --git a/app/components/common/article/article.module.less b/app/components/common/article/article.module.less index 4f34906..feed626 100644 --- a/app/components/common/article/article.module.less +++ b/app/components/common/article/article.module.less @@ -9,6 +9,61 @@ } } + h2, h3 { + font-size: 1.2em; + } + + h1 { + margin-top: 5rem; + font-size: 1.75em; + position: relative; + margin-bottom: 1em; + padding-bottom: .25em; + display: inline-block; + scroll-margin-top: 7em; + + &:first-child { + margin-top: 0; + } + + &::before { + content: ""; + left: 0; + bottom: 0; + position: absolute; + + width: 1.5em; + height: 4px; + display: block; + border-radius: 4px; + background-color: rgb(244 114 182 / var(--tw-text-opacity)); + } + } + + h2 { + margin-top: 2em; + scroll-margin-top: 4em; + + &:first-child { + margin-top: 0; + } + } + + a { + color:rgb(244 114 182 / var(--tw-bg-opacity)); + } + + img { + border-radius: .75rem; + } + + em { + font-size: smaller; + font-style: normal; + padding: .15rem .5rem; + border-radius: .75rem; + } + pre { tab-size: 4; padding: 1em; diff --git a/app/root.tsx b/app/root.tsx index 94c344e..48e3be3 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -7,13 +7,56 @@ import { Outlet, Scripts, ScrollRestoration, + isRouteErrorResponse, + useRouteError, } from "@remix-run/react"; import Header from "./components/layout/header"; import Spinner from "./components/common/spinner"; import Footer from "./components/layout/footer"; +import { siteTitle } from "~/utils"; import "./index.css"; +export function ErrorBoundary() { + const error = useRouteError(); + const isRouteError = isRouteErrorResponse(error); + + const [statusCode, message] = (() => { + if (isRouteError) { + return [error.status, error.statusText]; + } + + if (error instanceof Error) { + return [500, error.message]; + } + + return [500, "未知异常"]; + })(); + + return ( + + + + + {siteTitle(statusCode)} + + + + +
+
+

+ {statusCode} +

+

{message}

+
+