feat: 重构时间线组件，优化页面渲染逻辑，添加未授权页面跳转功能

public/css/page/index.css

@@ -45,137 +45,6 @@
     text-align: center;
 }
 
-.time-line {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    position: relative;
-}
-
-.time-line:before {
-    content: "";
-    width: 3px;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.37);
-    backdrop-filter: blur(12px);
-    left: 50%;
-    top: 0;
-    position: absolute;
-    transform: translateX(-50%);
-}
-
-.time-line::after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 100%;
-    width: 0;
-    height: 0;
-    border-top: 12px solid rgba(255, 255, 255, 0.37);
-    border-right: 7px solid transparent;
-    border-left: 7px solid transparent;
-    backdrop-filter: blur(12px);
-    transform: translateX(-50%);
-}
-
-.time-line a {
-    color: rgb(219, 255, 121);
-    text-decoration: underline;
-    font-weight: 600;
-    transition: color 0.2s, background 0.2s;
-    border-radius: 8px;
-    padding: 1px 4px;
-}
-.time-line a:hover {
-    color: #fff;
-    background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%);
-    text-decoration: none;
-}
-
-.time-line-item {
-    color: white;
-    width: 900px;
-    margin: 20px auto;
-    position: relative;
-}
-
-.time-line-item:first-child {
-    margin-top: 0;
-}
-
-.time-line-item:last-child {
-    margin-bottom: 50px;
-}
-
-.timeline-icon {
-    position: absolute;
-    width: 100px;
-    height: 50px;
-    background-color: #ee4d4d7a;
-    backdrop-filter: blur(12px);
-    left: 50%;
-    top: 0;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-.time-line-item-title {
-    background-color: #ee4d4d7a;
-    backdrop-filter: blur(12px);
-    height: 50px;
-    line-height: 50px;
-    padding: 0 20px;
-}
-
-.time-line-item:nth-child(odd) .time-line-item-content {
-    color: white;
-    width: 50%;
-    padding-right: 80px;
-}
-
-.time-line-item:nth-child(odd) .time-line-item-content::before {
-    content: "";
-    position: absolute;
-    left: calc(50% - 80px);
-    top: 20px;
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-bottom: 7px solid transparent;
-    border-left: 7px solid #ee4d4d7a;
-    backdrop-filter: blur(12px);
-}
-
-.time-line-item:nth-child(even) .time-line-item-content {
-    float: right;
-    width: 50%;
-    padding-left: 80px;
-}
-
-.time-line-item:nth-child(even) .time-line-item-content::before {
-    content: "";
-    position: absolute;
-    right: calc(50% - 80px);
-    top: 20px;
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-bottom: 7px solid transparent;
-    border-right: 7px solid #ee4d4d7a;
-    backdrop-filter: blur(12px);
-}
-
-.time-line-item-desc {
-    background-color: #ffffff54;
-    backdrop-filter: blur(12px);
-    color: #fff;
-    padding: 20px;
-    line-height: 1.4;
-}
-
 @media screen and (max-width: 768px) {
     .home-hero {
         margin: 0;

src/controllers/Page/PageController.js

@@ -8,10 +8,10 @@ class PageController {
         this.siteConfigService = new SiteConfigService()
     }
     async indexGet(ctx) {
-        const user = ctx.state.user
+        return await ctx.render("page/index/index", {}, { includeSite: true, includeUser: true })
-        return await ctx.render("page/index/index", {
+    }
-            user: user,
+    async indexNoAuth(ctx) {
-        }, { includeSite: true })
+        return await ctx.render("page/auth/no-auth", {})
     }
 
     async loginPost(ctx) {
@@ -39,9 +39,10 @@ class PageController {
     static createRoutes() {
         const controller = new PageController()
         const router = new Router({ auth: "try" })
-        router.get("/", controller.indexGet.bind(controller))
+        // 首页
-
+        router.get("/", controller.indexGet.bind(controller), { auth: false  })
-        router.get("/no-auth", controller.pageGet("page/auth/no-auth"), { auth: false })
+        // 未授权报错页
+        router.get("/no-auth", controller.indexNoAuth.bind(controller), { auth: false })
 
         router.get("/article/:id", controller.pageGet("page/articles/index"), { auth: false })
         router.get("/articles", controller.pageGet("page/articles/index"), { auth: false })

src/middlewares/Views/index.js

@@ -18,7 +18,7 @@ function viewsMiddleware(path, { engineSource = consolidate, extension = "html",
 
         // 将 render 注入到 context 和 response 对象中
         ctx.response.render = ctx.render = function (relPath, locals = {}, renderOptions) {
-            renderOptions = assign({ includeSite: false, includeUser: false }, renderOptions || {})
+            renderOptions = assign({ includeSite: true, includeUser: false }, renderOptions || {})
             return getPaths(path, relPath, extension).then(async paths => {
                 const suffix = paths.ext
                 const site = await siteConfigService.getAll()

src/utils/router/RouteAuth.js

@@ -28,7 +28,7 @@ export default function RouteAuth(options = {}) {
         if (auth === true) {
             if (!ctx.state.user) {
                 if (ctx.accepts('html')) {
-                    ctx.redirect('/no-auth')
+                    ctx.redirect('/no-auth?from=' + ctx.request.url)
                     return
                 }
                 ctx.status = 401

src/views/htmx/timeline.pug

@@ -0,0 +1,178 @@
+- var _dataList = timeLine || [] 
+ul.time-line
+    each item in _dataList
+        li.time-line-item 
+            .timeline-icon 
+                div #{item.icon}
+            .time-line-item-content
+                .time-line-item-title #{item.title}
+                .time-line-item-desc #{item.desc}
+    li.time-line-item 
+      .timeline-icon 
+        div 第一份工作
+      .time-line-item-content
+        .time-line-item-title ？？？
+        .time-line-item-desc 做游戏的。
+    li.time-line-item
+      .timeline-icon 
+        div 大学毕业
+      .time-line-item-content
+        .time-line-item-title 2014年09月
+        .time-line-item-desc 我从 
+          a(href="https://www.jxnu.edu.cn/" target="_blank") 江西师范大学 
+          span 毕业，获得了软件工程（虚拟现实与技术）专业的学士学位。
+    li.time-line-item
+      .timeline-icon 
+        div 高中
+      .time-line-item-content
+        .time-line-item-title ？？？
+        .time-line-item-desc 宜春中学
+    li.time-line-item
+      .timeline-icon 
+        div 初中
+      .time-line-item-content
+        .time-line-item-title ？？？
+        .time-line-item-desc 宜春实验中学
+    li.time-line-item
+      .timeline-icon 
+        div 小学
+      .time-line-item-content
+        .time-line-item-title ？？？
+        .time-line-item-desc 宜春二小
+    li.time-line-item
+          .timeline-icon 
+            div 出生
+          .time-line-item-content
+            .time-line-item-title 1996年06月
+            .time-line-item-desc 我出生于江西省丰城市泉港镇。
+    style.
+        .time-line {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            position: relative;
+        }
+
+        .time-line:before {
+            content: "";
+            width: 3px;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.37);
+            backdrop-filter: blur(12px);
+            left: 50%;
+            top: 0;
+            position: absolute;
+            transform: translateX(-50%);
+        }
+
+        .time-line::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 100%;
+            width: 0;
+            height: 0;
+            border-top: 12px solid rgba(255, 255, 255, 0.37);
+            border-right: 7px solid transparent;
+            border-left: 7px solid transparent;
+            backdrop-filter: blur(12px);
+            transform: translateX(-50%);
+        }
+
+        .time-line a {
+            color: rgb(219, 255, 121);
+            text-decoration: underline;
+            font-weight: 600;
+            transition: color 0.2s, background 0.2s;
+            border-radius: 8px;
+            padding: 1px 4px;
+        }
+        .time-line a:hover {
+            color: #fff;
+            background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%);
+            text-decoration: none;
+        }
+
+        .time-line-item {
+            color: white;
+            width: 900px;
+            margin: 20px auto;
+            position: relative;
+        }
+
+        .time-line-item:first-child {
+            margin-top: 0;
+        }
+
+        .time-line-item:last-child {
+            margin-bottom: 50px;
+        }
+
+        .timeline-icon {
+            position: absolute;
+            width: 100px;
+            height: 50px;
+            background-color: #ee4d4d7a;
+            backdrop-filter: blur(12px);
+            left: 50%;
+            top: 0;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        .time-line-item-title {
+            background-color: #ee4d4d7a;
+            backdrop-filter: blur(12px);
+            height: 50px;
+            line-height: 50px;
+            padding: 0 20px;
+        }
+
+        .time-line-item:nth-child(odd) .time-line-item-content {
+            color: white;
+            width: 50%;
+            padding-right: 80px;
+        }
+
+        .time-line-item:nth-child(odd) .time-line-item-content::before {
+            content: "";
+            position: absolute;
+            left: calc(50% - 80px);
+            top: 20px;
+            width: 0;
+            height: 0;
+            border-top: 7px solid transparent;
+            border-bottom: 7px solid transparent;
+            border-left: 7px solid #ee4d4d7a;
+            backdrop-filter: blur(12px);
+        }
+
+        .time-line-item:nth-child(even) .time-line-item-content {
+            float: right;
+            width: 50%;
+            padding-left: 80px;
+        }
+
+        .time-line-item:nth-child(even) .time-line-item-content::before {
+            content: "";
+            position: absolute;
+            right: calc(50% - 80px);
+            top: 20px;
+            width: 0;
+            height: 0;
+            border-top: 7px solid transparent;
+            border-bottom: 7px solid transparent;
+            border-right: 7px solid #ee4d4d7a;
+            backdrop-filter: blur(12px);
+        }
+
+        .time-line-item-desc {
+            background-color: #ffffff54;
+            backdrop-filter: blur(12px);
+            color: #fff;
+            padding: 20px;
+            line-height: 1.4;
+        }

src/views/layouts/pure.pug

@@ -5,7 +5,6 @@ block head
   block pageHead
 
 block content
-  // 页面整体flex布局，footer吸底
   .page-layout
     .page
       .content 

src/views/page/auth/no-auth.pug

@@ -47,3 +47,8 @@ block pageHead
       background: linear-gradient(90deg, #ffb86c 0%, #4fd1ff 100%);
       color: #fff200;
     }
+
+block pageScripts 
+  script.
+    const curUrl = URL.parse(location.href).searchParams.get("from")
+    fetch(curUrl,{redirect: 'error'}).then(res=>location.href=curUrl).catch(e=>console.log(e))

src/views/page/index/index.pug

@@ -10,42 +10,6 @@ block pageContent
       img.avatar(src="https://alist.xieyaxin.top/p/%E6%B8%B8%E5%AE%A2%E6%96%87%E4%BB%B6/%E5%85%AC%E5%85%B1%E4%BF%A1%E6%81%AF/avatar.jpg", alt="")
   .card 
     div 人生轨迹
-  ul.time-line
+  +include()
-    li.time-line-item 
+      - let timeLine = [{icon: '11',title: "aaaa",desc:"asd"}]
-      .timeline-icon 
+      include /htmx/timeline.pug
-        div 第一份工作
-      .time-line-item-content
-        .time-line-item-title ？？？
-        .time-line-item-desc 做游戏的。
-    li.time-line-item
-      .timeline-icon 
-        div 大学毕业
-      .time-line-item-content
-        .time-line-item-title 2014年09月
-        .time-line-item-desc 我从 
-          a(href="https://www.jxnu.edu.cn/" target="_blank") 江西师范大学 
-          span 毕业，获得了软件工程（虚拟现实与技术）专业的学士学位。
-    li.time-line-item
-      .timeline-icon 
-        div 高中
-      .time-line-item-content
-        .time-line-item-title ？？？
-        .time-line-item-desc 宜春中学
-    li.time-line-item
-      .timeline-icon 
-        div 初中
-      .time-line-item-content
-        .time-line-item-title ？？？
-        .time-line-item-desc 宜春实验中学
-    li.time-line-item
-      .timeline-icon 
-        div 小学
-      .time-line-item-content
-        .time-line-item-title ？？？
-        .time-line-item-desc 宜春二小
-    li.time-line-item
-          .timeline-icon 
-            div 出生
-          .time-line-item-content
-            .time-line-item-title 1996年06月
-            .time-line-item-desc 我出生于江西省丰城市泉港镇。

src/views/page/index/person.pug

@@ -0,0 +1,9 @@
+extends /layouts/pure.pug
+
+block pageHead
+  +css("css/page/index.css")
+
+block pageContent
+    +include()
+        - let timeLine = [{icon: '11',title: "aaaa",desc:"asd"}]
+        include /htmx/timeline.pug