3.2

2026-03-01 10:51:12 +08:00
1 parent df4ef82e4e
commit 98069884e5
@@ -1,11 +1,153 @@
 {{ define "main" }}
 <div id="pjax-container">
-    <h1 class="post-title" itemprop="name headline">
-        404 - 页面没找到
-    </h1>
-    <p>你想查看的页面已被转移或删除了</p>
-    <p>
-        <a href="{{ .Site.BaseURL }}" class="button"><button type="submit" class="submit">回到首页</button></a>
-    </p>
+    <div class="error-container">
+        <div class="error-content">
+            <div class="error-code">404</div>
+            <h1 class="error-title">页面未找到</h1>
+            <p class="error-desc">抱歉，你访问的页面似乎已经去流浪了...</p>
+            
+            <div class="error-actions">
+                <a href="{{ .Site.BaseURL }}" class="error-btn primary">
+                    <i class="ri-home-4-line"></i> 返回首页
+                </a>
+                <a href="javascript:history.back()" class="error-btn secondary" id="back-btn">
+                    <i class="ri-arrow-left-line"></i> 返回上一页
+                </a>
+            </div>
+            <script>
+                // 尝试将返回上一页按钮转换为真实的链接，以便支持 PJAX
+                (function() {
+                    var backBtn = document.getElementById('back-btn');
+                    if (backBtn && document.referrer && document.referrer.indexOf(window.location.host) !== -1) {
+                        backBtn.href = document.referrer;
+                    }
+                })();
+            </script>
+        </div>
+    </div>
+
+    <style>
+    .error-container {
+        min-height: 60vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 20px;
+        animation: fadeIn 0.8s ease-out;
+    }
+
+    .error-content {
+        max-width: 600px;
+        width: 100%;
+    }
+
+    .error-code {
+        font-size: 120px;
+        font-weight: 900;
+        line-height: 1;
+        background: linear-gradient(135deg, var(--link-color-light), var(--sanji-color));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-bottom: 20px;
+        text-shadow: 4px 4px 0px rgba(0,0,0,0.05);
+        font-family: 'Georgia', serif;
+    }
+
+    [data-theme="dark"] .error-code {
+        background: linear-gradient(135deg, var(--link-color-dark), var(--sanji-color));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-shadow: 4px 4px 0px rgba(255,255,255,0.05);
+    }
+
+    .error-title {
+        font-size: 24px;
+        font-weight: bold;
+        margin-bottom: 15px;
+        color: var(--text-title-color);
+    }
+
+    [data-theme="dark"] .error-title {
+        color: var(--text-title-dark-color);
+    }
+
+    .error-desc {
+        font-size: 16px;
+        color: var(--erji-color);
+        margin-bottom: 40px;
+    }
+
+    .error-actions {
+        display: flex;
+        gap: 20px;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .error-btn {
+        padding: 12px 30px;
+        border-radius: 50px;
+        text-decoration: none;
+        font-size: 16px;
+        transition: all 0.3s ease;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        border: 1px solid transparent;
+    }
+
+    .error-btn.primary {
+        background-color: var(--text-title-color);
+        color: #fff;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    }
+
+    [data-theme="dark"] .error-btn.primary {
+        background-color: var(--text-title-dark-color);
+        color: #000;
+        box-shadow: 0 4px 15px rgba(255,255,255,0.1);
+    }
+
+    .error-btn.primary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+    }
+
+    .error-btn.secondary {
+        background-color: transparent;
+        color: var(--text-content-color);
+        border-color: var(--frame-color);
+    }
+
+    [data-theme="dark"] .error-btn.secondary {
+        color: var(--text-content-dark-color);
+        border-color: var(--frame-dark-color);
+    }
+
+    .error-btn.secondary:hover {
+        background-color: var(--bankuai-color);
+        transform: translateY(-2px);
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
+    @media (max-width: 768px) {
+        .error-code {
+            font-size: 80px;
+        }
+        .error-actions {
+            flex-direction: column;
+            gap: 15px;
+        }
+        .error-btn {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+    </style>
 </div>
 {{ end }}