ui: add 404 page

XPoet · Nov 22, 2023 · 5b74110 · 5b74110
1 parent 82cef1d
commit 5b74110
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...ce/css/layout/_partial/page-template.styl → source/css/layout/page-template.styl b/...ce/css/layout/_partial/page-template.styl → source/css/layout/page-template.styl
diff --git 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"