时间线链接

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

src/pages/timeline.astro

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