feat: 添加404页面用于处理未找到的路由

This commit is contained in:
二叉树树
2025-09-06 20:38:16 +08:00
parent 13fab64bb7
commit 28214f6fd0

56
src/pages/404.astro Normal file
View File

@@ -0,0 +1,56 @@
---
import Layout from "@/layouts/Layout.astro";
import MainGridLayout from "@/layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
import { siteConfig } from "@/config";
---
<Layout title="页面未找到">
<MainGridLayout>
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
<!-- 404 图标 -->
<div class="mb-8">
<div class="relative">
<div class="text-8xl md:text-9xl font-bold text-[var(--primary)] opacity-20">
404
</div>
<div class="absolute inset-0 flex items-center justify-center">
<Icon name="fa6-solid:face-sad-tear" class="text-6xl md:text-7xl text-[var(--primary)]" />
</div>
</div>
</div>
<!-- 错误信息 -->
<div class="card-base p-8 max-w-md mx-auto mb-8">
<h1 class="text-2xl md:text-3xl font-bold text-90 mb-4">
页面走丢了
</h1>
<p class="text-75 mb-6 leading-relaxed">
抱歉,您访问的页面不存在或已被移动。
<br>
请检查URL是否正确或者返回首页继续浏览。
</p>
<!-- 导航按钮 -->
<div class="flex flex-col sm:flex-row gap-3 justify-center">
<a href="/" class="btn-regular-dark px-6 py-3 rounded-lg text-white font-medium">
<Icon name="fa6-solid:house" class="mr-2" />
返回首页
</a>
<a href="/archive/" class="btn-regular px-6 py-3 rounded-lg font-medium">
<Icon name="fa6-solid:box-archive" class="mr-2" />
文章归档
</a>
</div>
</div>
<!-- 返回提示 -->
<div class="mt-8 text-50 text-sm">
<p class="flex items-center justify-center">
<Icon name="fa6-solid:clock-rotate-left" class="mr-2" />
您也可以使用浏览器的后退按钮返回上一页
</p>
</div>
</div>
</MainGridLayout>
</Layout>