本文章分为两部分#

适配多语言的404界面#

打开src/i18n/i18nKey.ts

1
  license = "license",
2
  friends = "friends",
3

4
  // 404 page
5
  notFound = "notFound",
6
  notFoundTitle = "notFoundTitle",
7
  notFoundMessage = "notFoundMessage",
8
  backToHome = "backToHome",
9
  viewArchive = "viewArchive",

再分别打开languages下的en.ts和zh_CN.ts
en.ts

1
  [Key.license]: "License",
2
  [Key.friends]: "Friends",
3

4
  // 404 page
5
  [Key.notFound]: "Page Not Found",
6
  [Key.notFoundTitle]: "Oops! Page Not Found",
7
  [Key.notFoundMessage]: "The page you are looking for doesn't exist. It may have been moved or deleted.",
8
  [Key.backToHome]: "Back to Home",
9
  [Key.viewArchive]: "View Archive",

zh_CN.ts

1
  [Key.license]: "许可协议",
2
  [Key.friends]: "友链",
3

4
  // 404 page
5
  [Key.notFound]: "页面未找到",
6
  [Key.notFoundTitle]: "哎呀！页面走丢了",
7
  [Key.notFoundMessage]: "您访问的页面不存在，可能已被删除或链接有误。",
8
  [Key.backToHome]: "返回首页",
9
  [Key.viewArchive]: "查看归档",

最后在src/pages目录下创建404.astro

1
---
2
import { Icon } from "astro-icon/components";
3
import MainGridLayout from "../layouts/MainGridLayout.astro";
4
import I18nKey from "../i18n/i18nKey";
5
import { i18n } from "../i18n/translation";
6
import { url } from "../utils/url-utils";
7
import { siteConfig } from "../config";
8
---
9

10
<MainGridLayout title={i18n(I18nKey.notFound)} description={i18n(I18nKey.notFoundMessage)}>
11
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-96">
12
        <div class="card-base z-10 px-6 md:px-12 py-8 md:py-12 relative w-full">
13
            <!-- 404 Content -->
14
            <div class="flex flex-col items-center text-center space-y-6">
15
                <!-- Large 404 Number -->
16
                <div class="relative opacity-0 animate-fade-in-up">
17
                    <div class="text-8xl md:text-9xl font-bold bg-gradient-to-br from-[var(--primary)] to-[oklch(0.65_0.18_var(--hue))] bg-clip-text text-transparent select-none">
18
                        404
19
                    </div>
20
                    <!-- Decorative elements -->
21
                    <div class="absolute -top-4 -right-4 w-8 h-8 bg-[var(--primary)] rounded-full opacity-20 animate-pulse"></div>
22
                    <div class="absolute -bottom-2 -left-2 w-6 h-6 bg-[var(--primary)] rounded-full opacity-30 animate-pulse" style="animation-delay: 0.5s;"></div>
23
                </div>
24

25
                <!-- Title and Message -->
26
                <div class="space-y-3 max-w-md opacity-0 animate-fade-in-up animate-delay-100">
27
                    <h1 class="text-2xl md:text-3xl font-bold text-[var(--primary)]">
28
                        {i18n(I18nKey.notFoundTitle)}
29
                    </h1>
30
                    <p class="text-75 text-base md:text-lg leading-relaxed">
31
                        {i18n(I18nKey.notFoundMessage)}
32
                    </p>
33
                </div>
34

35
                <!-- Illustration -->
36
                <div class="py-4 opacity-0 animate-fade-in-up animate-delay-200">
37
                    <div class="relative w-32 h-32 mx-auto animate-float">
38
                        <!-- Simple geometric illustration -->
39
                        <div class="absolute inset-0 bg-gradient-to-br from-[var(--primary)] to-[oklch(0.65_0.18_var(--hue))] rounded-full opacity-10"></div>
40
                        <div class="absolute inset-4 bg-[var(--card-bg)] rounded-full border-2 border-[var(--primary)] border-opacity-20"></div>
41
                        <div class="absolute inset-0 flex items-center justify-center">
42
                            <Icon name="fa6-solid:location-crosshairs" class="w-12 h-12 text-[var(--primary)] opacity-60" />
43
                        </div>
44
                    </div>
45
                </div>
46

47
                <!-- Action Buttons -->
48
                <div class="flex flex-col sm:flex-row gap-3 pt-4 opacity-0 animate-fade-in-up animate-delay-300">
49
                    <a href={url("/")}
50
                       class="btn-regular px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105 active:scale-95 flex items-center justify-center gap-2">
51
                        <Icon name="fa6-solid:house" class="w-4 h-4" />
52
                        {i18n(I18nKey.backToHome)}
53
                    </a>
54
                    <a href={url("/archive")}
55
                       class="btn-card px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105 active:scale-95 flex items-center justify-center gap-2 border border-[var(--line-divider)]">
56
                        <Icon name="fa6-solid:box-archive" class="w-4 h-4" />
57
                        {i18n(I18nKey.viewArchive)}
58
                    </a>
59
                    <a href={url("/about")}
60
                       class="btn-card px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105 active:scale-95 flex items-center justify-center gap-2 border border-[var(--line-divider)]">
61
                        <Icon name="fa6-solid:circle-info" class="w-4 h-4" />
62
                        {i18n(I18nKey.about)}
63
                    </a>
64
                </div>
65

66
                <!-- Additional Help Text -->
67
                <div class="pt-6 text-sm text-50">
68
                    <p class="transition-all duration-300">
69
                        {siteConfig.lang === 'zh_CN' ? '如果您认为这是一个错误，请联系网站管理员。' : 'If you believe this is an error, please contact the site administrator.'}
70
                    </p>
71
                </div>
72
            </div>
73
        </div>
74
    </div>
75
</MainGridLayout>
76

77
<style>
78
    @keyframes float {
79
        0%, 100% { transform: translateY(0px); }
80
        50% { transform: translateY(-10px); }
81
    }
82

83
    @keyframes fadeInUp {
84
        from {
85
            opacity: 0;
86
            transform: translateY(30px);
87
        }
88
        to {
89
            opacity: 1;
90
            transform: translateY(0);
91
        }
92
    }
93

94
    .animate-float {
95
        animation: float 3s ease-in-out infinite;
96
    }
97

98
    .animate-fade-in-up {
99
        animation: fadeInUp 0.6s ease-out forwards;
100
    }
101

102
    .animate-delay-100 {
103
        animation-delay: 0.1s;
104
    }
105

106
    .animate-delay-200 {
107
        animation-delay: 0.2s;
108
    }
109

110
    .animate-delay-300 {
111
        animation-delay: 0.3s;
112
    }
113

114
    .animate-delay-400 {
115
        animation-delay: 0.4s;
116
    }
117
</style>

单语言404.astro#

此方法直接在src/pages目录下创建404.astro即可
由于我没有语言的404，这里附上二叉树树的404界面
预览： 2x-404

1
---
2
import Layout from "@/layouts/Layout.astro";
3
import MainGridLayout from "@/layouts/MainGridLayout.astro";
4
import { Icon } from "astro-icon/components";
5
import { siteConfig } from "@/config";
6
---
7

8
<Layout title="页面未找到">
9
        <MainGridLayout>
10
                <div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
11
                        <!-- 404 图标 -->
12
                        <div class="mb-8">
13
                                <div class="relative">
14
                                        <div class="text-8xl md:text-9xl font-bold text-[var(--primary)] opacity-20">
15
                                                404
16
                                        </div>
17
                                        <div class="absolute inset-0 flex items-center justify-center">
18
                                                <Icon name="fa6-solid:face-sad-tear" class="text-6xl md:text-7xl text-[var(--primary)]" />
19
                                        </div>
20
                                </div>
21
                        </div>
22

23
                        <!-- 错误信息 -->
24
                        <div class="card-base p-8 max-w-md mx-auto mb-8">
25
                                <h1 class="text-2xl md:text-3xl font-bold text-90 mb-4">
26
                                        页面走丢了
27
                                </h1>
28
                                <p class="text-75 mb-6 leading-relaxed">
29
                                        抱歉，您访问的页面不存在或已被移动。
30
                                        <br>
31
                                        请检查URL是否正确，或者返回首页继续浏览。
32
                                </p>
33

34
                                <!-- 导航按钮 -->
35
                                <div class="flex flex-col sm:flex-row gap-3 justify-center">
36
                                        <a href="/" class="btn-regular-dark px-6 py-3 rounded-lg text-white font-medium">
37
                                                <Icon name="fa6-solid:house" class="mr-2" />
38
                                                返回首页
39
                                        </a>
40
                                        <a href="/archive/" class="btn-regular px-6 py-3 rounded-lg font-medium">
41
                                                <Icon name="fa6-solid:box-archive" class="mr-2" />
42
                                                文章归档
43
                                        </a>
44
                                </div>
45
                        </div>
46

47
                        <!-- 返回提示 -->
48
                        <div class="mt-8 text-50 text-sm">
49
                                <p class="flex items-center justify-center">
50
                                        <Icon name="fa6-solid:clock-rotate-left" class="mr-2" />
51
                                        您也可以使用浏览器的后退按钮返回上一页
52
                                </p>
53
                        </div>
54
                </div>
55
        </MainGridLayout>
56
</Layout>