时间线链接

src/data/timeline.ts

@@ -7,21 +7,25 @@ export const timeline = [
   {
     date: "高一 · 九月",
     title: "第一次点名",
-    text: "很多名字还对不上脸，但同一间教室已经开始收藏我们的吵闹、紧张和新鲜感。"
+    text: "很多名字还对不上脸，但同一间教室已经开始收藏我们的吵闹、紧张和新鲜感。",
+    href: "/gallery/classroom/"
   },
   {
     date: "高二 · 秋天",
     title: "运动会和晚自习后的风",
-    text: "有人在跑道上冲线，有人在看台上喊到嗓子哑。那天的风，后来吹进了很多照片里。"
+    text: "有人在跑道上冲线，有人在看台上喊到嗓子哑。那天的风，后来吹进了很多照片里。",
+    href: "/gallery/events/"
   },
   {
     date: "高三 · 春天",
     title: "倒计时牌越来越小",
-    text: "黑板角落的数字每天少一点，我们一边嫌累，一边悄悄把彼此记得更牢。"
+    text: "黑板角落的数字每天少一点，我们一边嫌累，一边悄悄把彼此记得更牢。",
+    href: "/messages/"
   },
   {
     date: "毕业 · 六月",
     title: "合照里的那个下午",
-    text: "校服、签名、拥抱和没说完的话，都被按下快门，留在了那一年最亮的地方。"
+    text: "校服、签名、拥抱和没说完的话，都被按下快门，留在了那一年最亮的地方。",
+    href: "/gallery/graduation-day/"
   }
 ];

src/pages/index.astro

@@ -49,7 +49,16 @@ const previewPeople = people.slice(0, 6);
 
         <div class="timeline">
           {
-            previewTimeline.map((moment) => (
+            previewTimeline.map((moment) =>
+              moment.href ? (
+                <a class="moment moment-link" href={moment.href}>
+                  <time>{moment.date}</time>
+                  <div>
+                    <h3>{moment.title}</h3>
+                    <p>{moment.text}</p>
+                  </div>
+                </a>
+              ) : (
                 <article class="moment">
                   <time>{moment.date}</time>
                   <div>
@@ -57,7 +66,8 @@ const previewPeople = people.slice(0, 6);
                     <p>{moment.text}</p>
                   </div>
                 </article>
-            ))
+              )
+            )
           }
         </div>
 

src/pages/timeline.astro

@@ -19,7 +19,16 @@ import { timeline, timelineIntro } from "../data/timeline";
       <div class="section-inner">
         <div class="timeline">
           {
-            timeline.map((moment) => (
+            timeline.map((moment) =>
+              moment.href ? (
+                <a class="moment moment-link" href={moment.href}>
+                  <time>{moment.date}</time>
+                  <div>
+                    <h3>{moment.title}</h3>
+                    <p>{moment.text}</p>
+                  </div>
+                </a>
+              ) : (
                 <article class="moment">
                   <time>{moment.date}</time>
                   <div>
@@ -27,7 +36,8 @@ import { timeline, timelineIntro } from "../data/timeline";
                     <p>{moment.text}</p>
                   </div>
                 </article>
-            ))
+              )
+            )
           }
         </div>
       </div>

src/styles/global.css

@@ -222,6 +222,31 @@ h2 {
   box-shadow: 0 8px 28px rgba(39, 55, 52, 0.06);
 }
 
+.moment-link {
+  position: relative;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.moment-link::after {
+  content: "查看";
+  align-self: start;
+  justify-self: end;
+  grid-column: 2;
+  grid-row: 1;
+  color: var(--green);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.moment-link:hover {
+  transform: translateY(-3px);
+  border-color: rgba(55, 109, 90, 0.34);
+  box-shadow: 0 16px 38px rgba(39, 55, 52, 0.12);
+}
+
 .moment time {
   color: var(--blue);
   font-weight: 800;