完成博客索引页

src/pages/blogs.astro

@@ -1,30 +1,56 @@
 ---
 import FullLayoutV1 from '../layout/FullLayoutV1.astro'
 import { listBlogs } from '../lib/apis/legacy/blog'
+import BlogCard from '../components/BlogCard.astro'
+import BlogHeaderImage from '../assets/blogs-header.webp'
+import { Image } from 'astro:assets'
 
 export const prerender = false
 
 const _page = parseInt(Astro.url.searchParams.get('page') || '1')
 const page = isNaN(_page) ? 1 : Math.max(1, _page)
 
-const blogs = await listBlogs({ page })
+const blogs = await listBlogs({ page, limit: 100 })
 ---
 
-<FullLayoutV1 withGap>
+<FullLayoutV1 withGap title="博客列表 - 小帕的小窝">
   <!-- <div class="__dev__caution">
     <h1>仍在开发中，界面会崩坏</h1>
   </div> -->
-  <main>
-    <ul>
-      {
-        blogs.map((blog) => (
-          <li>
-            <a href={`/blogs/${blog.id}`}>{blog.title}</a>
-          </li>
-        ))
-      }
-    </ul>
-  </main>
+  <div class="container">
+    <section class="blogs-header">
+      <Image
+        class="image"
+        src={BlogHeaderImage}
+        alt="博客列表的头图，一个悬挂在空中的 LCD1602，上面写着一些示例文本"
+        width={1280}
+        height={720}
+      />
+      <div class="description">
+        <h1>博客列表</h1>
+        <h2>这里是 passthem 和他朋友们的文章</h2>
+      </div>
+    </section>
+    <main>
+      <ul>
+        {
+          blogs.map((blog) => (
+            <BlogCard
+              title={blog.title}
+              link={`/blogs/${blog.id}`}
+              featureImage={blog.featured_image?.image_url}
+              author={{
+                name: blog.author.nickname,
+                avatar: blog.author.avatar.image_url,
+              }}
+              createdAt={blog.created_at}
+              updatedAt={blog.updated_at}
+            />
+          ))
+        }
+      </ul>
+    </main>
+  </div>
 </FullLayoutV1>
 
 <style>
@@ -40,6 +66,71 @@ const blogs = await listBlogs({ page })
     }
   }
 
-  main {
+  .container {
+    max-inline-size: 960px;
+    margin-inline: auto;
+  }
+
+  .blogs-header {
+    margin-block-end: 3rem;
+    position: relative;
+    aspect-ratio: 16 / 9;
+
+    @media (width < 768px) and (width >= 540px) {
+      aspect-ratio: 2.5 / 1;
+    }
+
+    @media (width >= 768px) {
+      aspect-ratio: 4 / 1;
+    }
+
+    & > .image {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      filter: saturate(0.6);
+      object-fit: cover;
+      user-select: none;
+    }
+
+    & > .description {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      gap: 0.5rem;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-color: #00000099;
+      color: white;
+
+      & > h1 {
+        font-size: 2.5rem;
+        font-weight: 600;
+      }
+
+      & > h2 {
+        font-size: 1rem;
+        font-weight: 300;
+      }
+
+      & > h1,
+      & > h2 {
+        text-shadow: 0 0 10px black;
+      }
+    }
+  }
+
+  @media (width >= 768px) {
+    main {
+      margin-inline: auto;
+      max-width: 840px;
+    }
   }
 </style>

src/pages/index.astro

@@ -32,7 +32,7 @@ try {
         <Image
           src={PassthemAvatar}
           alt="passthem 的头像，一个戴眼镜的男孩"
-          loading="eager"
+          loading="lazy"
           width={240}
           height={240}
           densities={[1.5, 2]}