优化排版

src/components/BlogCard.astro

@@ -105,11 +105,15 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
 
     & > .info {
       & > h1 {
-        margin-inline: 0.75rem;
+        margin-inline: 0.5rem;
         font-size: larger;
         font-weight: 600;
         margin-block-start: 0.25rem;
         margin-block-end: 0.75rem;
+
+        @media (width < 768px) {
+          margin-inline: 0.75rem;
+        }
       }
 
       &>.author, &>.iconinfo {

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
 }

src/pages/blogs/[blog_id].astro

@@ -3,6 +3,8 @@ 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 { Icon } from 'astro-icon/components'
 
 import Artalk from '../../components/Artalk.svelte'
 
@@ -21,15 +23,42 @@ if (blogData === null) {
 }
 
 const tree = await toMarkdocTree(blogData.content)
+const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
 ---
 
 <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>
+    {
+    blogData.author && <div class="blog-info">
+      <a class="author" href=`https://legacy.passthem.top/usr/${blogData.author.username}`>
+        <div class="avatar">
+          <Image class="image" src={blogData.author.avatar.image_url}
+            width={32} height={32} alt=`用户 ${blogData.author.nickname} 的头像` />
+        </div>
+        <div class="username">{blogData.author.nickname}</div>
+      </a>
+      <span class="split">・</span>
+      <span>{ formatDate(blogData.updated_at) } 更新</span>
+    </div>
+    }
     <article>
       <MarkdocTreeRender tree={tree} client:load />
     </article>
-    <h1>评论区</h1>
+    <h1 class="comment-title"><Icon name="material-symbols:chat-rounded" /> 评论区</h1>
     <Artalk client:idle />
   </main>
 </FullLayoutV1>
@@ -47,15 +76,84 @@ 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;
+    }
+  }
+
+  .blog-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+    color: var(--color-fg-1);
+
+    & > .author {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: .25rem;
+
+      & > .avatar {
+        & > .image {
+          width: 32px;
+          height: 32px;
+          object-fit: cover;
+          border-radius: 16px;
+        }
+      }
+    }
+  }
+
   main {
     max-inline-size: 840px;
     margin-inline: auto;
-    padding-block-end: 2rem;
+    padding-block-end: 4rem;
+    padding-inline: 20px;
 
     & > h1 {
-      font-size: 2.4rem;
-      font-weight: 700;
+      font-size: 2rem;
+      font-weight: 900;
       margin-block: 1.2rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: .25rem;
+
+      &.comment-title {
+        margin-block-start: 3rem;
+      }
     }
   }
 </style>