添加博客头图

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 (
+) => Promise<null | BlogContentType> = async (blog_id: number) => {
-  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 {
+  let _blog = resp.data
-    title: string
+
-    content: string
+  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,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;