最簡單的方式實現所有自定義異常頁面（如 404、500 等）是通過 靜態資源文件 或 模板引擎 來實現。
方法 1：使用靜態資源文件（最簡單）
Spring Boot 默認會在 src/main/resources/static 或 src/main/resources/public 目錄下查找靜態資源文件。你可以直接在這些目錄中放置自定義的錯誤頁面文件。
在 src/main/resources/static/error 目錄下創建錯誤頁面文件：
- 404.html：自定義 404 頁面
- 500.html：自定義 500 頁面
- error.html：通用錯誤頁面（如果沒有匹配的狀態碼，會使用此頁面）
目錄結構
src/main/resources/static/error/
├── 404.html
├── 500.html
└── error.html
404.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>404 - 頁面未找到</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"><script src="https://cdn.tailwindcss.com"></script><style>body {min-height: 1024px;display: flex;flex-direction: column;}.main-content {flex: 1;}@keyframes float {0% { transform: translateY(0px); }50% { transform: translateY(-20px); }100% { transform: translateY(0px); }}.floating {animation: float 3s ease-in-out infinite;}.hover-scale {transition: transform 0.3s ease;}.hover-scale:hover {transform: scale(1.05);}</style>
</head>
<body class="bg-gray-50">
<div class="w-[1440px] mx-auto main-content flex flex-col items-center justify-center"><div class="text-center"><img src="https://ai-public.mastergo.com/ai/img_res/c0f93458673669a270d60c3eabee0378.jpg"alt="迷路的小狗"class="w-[400px] h-[400px] object-cover floating mb-8"><h1 class="text-[120px] font-bold text-primary mb-4">404</h1><p class="text-2xl text-gray-600 mb-6">嗚嗚，這個頁面可能被調皮的小狗叼走啦～</p><p class="text-lg text-gray-500 mb-8">別擔心，讓我們一起去找找其他好玩的地方吧！</p><div class="flex gap-4 justify-center mb-16"><button class="bg-primary text-white px-8 py-3 text-lg font-semibold hover-scale !rounded-button whitespace-nowrap">返回首頁</button><button class="bg-white border-2 border-primary text-primary px-8 py-3 text-lg font-semibold hover-scale !rounded-button whitespace-nowrap">返回上一頁</button></div></div>
</div><footer class="w-[1440px] mx-auto py-8 border-t border-gray-200"><div class="flex justify-between items-center px-8"><div class="flex items-center gap-6"><span class="text-gray-600">聯系我們：400-888-8888</span><div class="flex gap-4"><a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-weixin text-xl w-8 h-8 flex items-center justify-center"></i></a><a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-weibo text-xl w-8 h-8 flex items-center justify-center"></i></a><a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-qq text-xl w-8 h-8 flex items-center justify-center"></i></a></div></div></div>
</footer>
</body>
</html>
適合簡單的靜態頁面。
方法 2：使用模板引擎（如 Thymeleaf）
在 src/main/resources/templates/error 目錄下創建錯誤頁面文件：
- 404.html：自定義 404 頁面
- 500.html：自定義 500 頁面
- error.html：通用錯誤頁面
目錄結構
src/main/resources/templates/error/
├── 404.html
├── 500.html
└── error.html
404.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>404 Not Found</title>
</head>
<body><h1>404 - Page Not Found</h1><p>The page you are looking for does not exist.</p><p>Error: <span th:text="${error}"></span></p>
</body>
</html>
模板優點：支持動態內容。
運行測試
當訪問不存在的頁面會顯示404.html網頁
)
![CTF雜項——[suctf 2019]簽到題](http://pic.xiahunao.cn/CTF雜項——[suctf 2019]簽到題)
