添加博客头图

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;