From 5b74110dd8f7f668eae680d50d4e45935ea115bc Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Wed, 22 Nov 2023 21:44:29 +0800
Subject: [PATCH] ui: add 404 page

---
 languages/en.yml                                |  1 +
 languages/zh-CN.yml                             |  1 +
 languages/zh-TW.yml                             |  3 ++-
 layout/404.ejs                                  |  8 ++++++++
 layout/page.ejs                                 |  4 ++++
 scripts/events/generate-404-page.js             | 14 ++++++++++++++
 source/css/layout/404.styl                      | 17 +++++++++++++++++
 .../layout/{_partial => }/page-template.styl    |  0
 source/css/style.styl                           |  3 ++-
 9 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 layout/404.ejs
 create mode 100644 scripts/events/generate-404-page.js
 create mode 100644 source/css/layout/404.styl
 rename source/css/layout/{_partial => }/page-template.styl (100%)

diff --git a/languages/en.yml b/languages/en.yml
index c849eb583..45098970b 100644
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -99,3 +99,4 @@ comment:
   reload: Click to reload
   loading: Loading comment plugin
   config_error: "Please fill in the required configuration items for %s comment plugin"
+page_not_found: Page Not Found
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 20afeed87..1aea47db7 100644
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -99,3 +99,4 @@ comment:
   reload: 点击重新加载
   loading: 正在加载评论插件
   config_error: "请完整填写 %s 评论插件必需的配置项"
+page_not_found: 页面找不到
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
index 80c4fc039..4817c53aa 100644
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -98,4 +98,5 @@ comment:
   fail_tip: 評論插件加載失敗
   reload: 點擊重新加載
   loading: 正在加載評論插件
-  config_error: "請完整填寫 %s 評論插件必需的配置項"
+  config_error: "請完整填寫 %s 評論外掛程式必需的設定項"
+page_not_found: 頁面缺失
diff --git a/layout/404.ejs b/layout/404.ejs
new file mode 100644
index 000000000..55a25c893
--- /dev/null
+++ b/layout/404.ejs
@@ -0,0 +1,8 @@
+<div class="fade-in-down-animation">
+    <div class="error-404-container border-box">
+        <div class="text-1 border-box flex-center">404</div>
+        <div class="text-2 border-box flex-center">
+            <%- __('page_not_found') %>
+        </div>
+    </div>
+</div>
diff --git a/layout/page.ejs b/layout/page.ejs
index 8f4f6c635..42cd33577 100644
--- a/layout/page.ejs
+++ b/layout/page.ejs
@@ -43,6 +43,10 @@
 
                     <%- partial('_partial/tagcloud') %>
 
+                <% } else if (page.type === '404') { %>
+
+                    <%- partial('404') %>
+
                 <% } else { %>
 
                     <%- partial('page-template') %>
diff --git a/scripts/events/generate-404-page.js b/scripts/events/generate-404-page.js
new file mode 100644
index 000000000..be3509f67
--- /dev/null
+++ b/scripts/events/generate-404-page.js
@@ -0,0 +1,14 @@
+/* global hexo */
+
+'use strict'
+
+hexo.extend.generator.register('generate-404-page', function () {
+  return {
+    path: '404.html',
+    layout: ['page'],
+    data: {
+      type: '404',
+      title: '404'
+    }
+  }
+})
diff --git a/source/css/layout/404.styl b/source/css/layout/404.styl
new file mode 100644
index 000000000..3c06e06c6
--- /dev/null
+++ b/source/css/layout/404.styl
@@ -0,0 +1,17 @@
+.error-404-container {
+  .text-1 {
+    width 100%
+    height 10rem
+    color var(--text-color-3)
+    font-weight 600
+    font-size 10rem
+  }
+
+  .text-2 {
+    width 100%
+    height 3rem
+    color var(--text-color-4)
+    font-size 2rem
+    letter-spacing 1px
+  }
+}
diff --git a/source/css/layout/_partial/page-template.styl b/source/css/layout/page-template.styl
similarity index 100%
rename from source/css/layout/_partial/page-template.styl
rename to source/css/layout/page-template.styl
diff --git a/source/css/style.styl b/source/css/style.styl
index ea484ee70..0efca0e2e 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -17,7 +17,6 @@
 @import "layout/_partial/archive-list.styl"
 @import "layout/_partial/footer.styl"
 @import "layout/_partial/paginator.styl"
-@import "layout/_partial/page-template.styl"
 @import "layout/_partial/first-screen.styl"
 @import "layout/_partial/image-mask.styl"
 @import "layout/category-list.styl"
@@ -28,6 +27,8 @@
 @import "layout/article-content.styl"
 @import "layout/category-content.styl"
 @import "layout/tag-content.styl"
+@import "layout/404.styl"
+@import "layout/page-template.styl"
 @import "layout/_partial/tagcloud.styl"
 @import "layout/_partial/common/empty-content.styl"
 @import "layout/_partial/post/post-share.styl"