From 9c019351a3ca089a8f7ef9615a2f4286dd0ab719 Mon Sep 17 00:00:00 2001
From: passthem <Passthem183@gmail.com>
Date: Sun, 5 Apr 2026 20:59:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8D=9A=E5=AE=A2=E5=A4=B4?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/apis/legacy/blog.ts     | 29 +++++++++++++++----
 src/pages/blogs/[blog_id].astro | 50 +++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/src/lib/apis/legacy/blog.ts b/src/lib/apis/legacy/blog.ts
index 5abbd81..abeee99 100644
--- a/src/lib/apis/legacy/blog.ts
+++ b/src/lib/apis/legacy/blog.ts
@@ -24,6 +24,10 @@ export type ListBlogItemType = {
   }
 }
 
+export type BlogContentType = ListBlogItemType & {
+  content: string
+}
+
 export const listBlogs = async ({
   page = 1,
   limit = 20,
@@ -58,17 +62,30 @@ export const listBlogs = async ({
 
 export const getBlog: (
   blog_id: number,
-) => Promise<null | { title: string; content: string }> = async (
-  blog_id: number,
-) => {
+) => Promise<null | BlogContentType> = async (blog_id: number) => {
   const resp = await legacyClient.get(`/v1/blog/${blog_id}`, {
     validateStatus: (status) => status == 200 || status == 404,
   })
   if (resp.status == 404) {
     return null
   }
-  return resp.data as {
-    title: string
-    content: string
+  let _blog = resp.data
+
+  if (_blog.featured_image) {
+    _blog = {
+      ..._blog,
+      featured_image: {
+        image_url:
+          'https://legacy.passthem.top' + _blog.featured_image.image_url,
+      },
+    }
   }
+
+  _blog.author.avatar = {
+    image_url: 'https://legacy.passthem.top' + _blog.author.avatar.image_url,
+  }
+  _blog.created_at = new Date(_blog.created_at)
+  _blog.updated_at = new Date(_blog.updated_at)
+
+  return _blog
 }
diff --git a/src/pages/blogs/[blog_id].astro b/src/pages/blogs/[blog_id].astro
index 4b3c61b..13705a8 100644
--- a/src/pages/blogs/[blog_id].astro
+++ b/src/pages/blogs/[blog_id].astro
@@ -3,6 +3,7 @@ import { getBlog } from '../../lib/apis/legacy/blog'
 import FullLayoutV1 from '../../layout/FullLayoutV1.astro'
 import { MarkdocTreeRender } from '../../components/MarkdocRenderer.tsx'
 import { toMarkdocTree } from '../../lib/markdoc'
+import { Image } from 'astro:assets'
 
 import Artalk from '../../components/Artalk.svelte'
 
@@ -24,6 +25,19 @@ const tree = await toMarkdocTree(blogData.content)
 ---
 
 <FullLayoutV1 title={blogData.title} withGap>
+  {
+    blogData.featured_image && (
+      <div class="featured-image">
+        <Image
+          class="image"
+          src={blogData.featured_image.image_url}
+          width={960}
+          height={540}
+          alt="博客的头图"
+        />
+      </div>
+    )
+  }
   <main>
     <h1>{blogData.title}</h1>
     <article>
@@ -47,10 +61,46 @@ const tree = await toMarkdocTree(blogData.content)
     }
   }
 
+  .featured-image {
+    margin-inline: auto;
+    width: 100%;
+    max-width: 960px;
+    aspect-ratio: 16 / 9;
+    margin-block-end: 2rem;
+    position: relative;
+
+    & > .image {
+      object-fit: cover;
+      height: 100%;
+      width: 100%;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      height: 50px;
+      width: 100%;
+      background: linear-gradient(to bottom, transparent, #00000044);
+    }
+
+    @media (width < 768px) and (width >= 540px) {
+      aspect-ratio: 2.5 / 1;
+    }
+
+    @media (width >= 768px) {
+      aspect-ratio: 4 / 1;
+      margin-block-end: 3rem;
+    }
+  }
+
   main {
     max-inline-size: 840px;
     margin-inline: auto;
     padding-block-end: 2rem;
+    padding-inline: 20px;
 
     & > h1 {
       font-size: 2.4rem;