完成博客索引页

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "20260327_blog_frontend_v2",
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/node": "^10.0.4",
@@ -12,6 +13,7 @@
         "@astrojs/rss": "^4.0.18",
         "@astrojs/svelte": "^8.0.4",
         "@astrojs/vue": "^6.0.1",
+        "@iconify-json/material-symbols": "^1.2.65",
         "@iconify-json/mdi": "^1.2.3",
         "@markdoc/markdoc": "^0.5.7",
         "@traptitech/markdown-it-katex": "^3.6.0",
@@ -1335,6 +1337,15 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify-json/material-symbols": {
+      "version": "1.2.65",
+      "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.65.tgz",
+      "integrity": "sha512-0kGO7z+yuWjn4de2gAz1hrOpDHN1rvnb1Lr3YnkmZr/pJ9bfLSv2bRXQo/nKx6oODXKcoYuFLcLvg2xPxMq5Pg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/mdi": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.3.tgz",
@@ -4021,9 +4032,9 @@
       }
     },
     "node_modules/defu": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.6.tgz",
+      "integrity": "sha512-f8mefEW4WIVg4LckePx3mALjQSPQgFlg9U8yaPdlsbdYcHQyj9n2zL2LJEA52smeYxOvmd/nB7TpMtHGMTHcug==",
       "license": "MIT"
     },
     "node_modules/delayed-stream": {

package.json

@@ -17,6 +17,7 @@
     "@astrojs/rss": "^4.0.18",
     "@astrojs/svelte": "^8.0.4",
     "@astrojs/vue": "^6.0.1",
+    "@iconify-json/material-symbols": "^1.2.65",
     "@iconify-json/mdi": "^1.2.3",
     "@markdoc/markdoc": "^0.5.7",
     "@traptitech/markdown-it-katex": "^3.6.0",

src/components/BlogCard.astro

@@ -0,0 +1,145 @@
+---
+import { Image } from 'astro:assets'
+import { Icon } from 'astro-icon/components'
+
+interface Props {
+  link: string
+  title: string
+  featureImage?: string
+  createdAt?: Date
+  updatedAt?: Date
+  author?: {
+    name: string
+    avatar?: string
+  }
+}
+
+const { link, title, featureImage, author, createdAt, updatedAt } = Astro.props
+
+const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
+
+---
+
+<a class="card" href={link}>
+  {
+    featureImage && (
+      <Image
+        class="image"
+        src={featureImage}
+        width={640}
+        height={360}
+        alt="博文的头图"
+      />
+    )
+  }
+  <div class="info">
+    <h1 class="title">{title}</h1>
+    {author && <div class="author">
+      <Image
+        class="image"
+        src={author.avatar ?? ""}
+        alt=`用户 ${author.name} 的头像`
+        width={24}
+        height={24}
+      />
+      <span class="content">{author.name}</span>
+    </div>}
+    {createdAt && <div class="iconinfo">
+      <Icon class="icon" name="material-symbols:calendar-add-on-rounded" />
+      <span class="content">{formatDate(createdAt)}</span>
+    </div>}
+    {updatedAt && (!createdAt || formatDate(createdAt) != formatDate(updatedAt)) && <div class="iconinfo">
+      <Icon class="icon" name="material-symbols:calendar-check-rounded" />
+      <span class="content">{formatDate(updatedAt)}</span>
+    </div>}
+  </div>
+</a>
+
+<style>
+  .card {
+    --icon-size: 24px;
+
+    background-color: var(--color-bg-n);
+
+    margin: 1rem;
+    padding-inline: 1rem;
+    padding-block: 1.25rem;
+
+    display: flex;
+    flex-direction: column;
+    /* gap: 0.75rem; */
+    border-radius: 2rem;
+    transition: all cubic-bezier(0.4, 1, 0.4, 1) 0.3s;
+
+    @media (width >= 768px) {
+      flex-direction: row;
+      gap: 0.5rem;
+    }
+
+    outline: solid 0px transparent;
+    &:hover {
+      outline-offset: 4px;
+      outline: solid 4px var(--color-blue);
+    }
+
+    &:has(> .image) {
+      padding-block-start: 1rem;
+      @media (width >= 768px) {
+        padding-block-end: 1rem;
+      }
+
+      & > .image {
+        border-radius: 1rem;
+        aspect-ratio: 16 / 9;
+        object-fit: cover;
+        margin-block-end: 0.75rem;
+
+        @media (width >= 768px) {
+          width: 300px;
+          margin-block-end: 0;
+        }
+      }
+    }
+
+    & > .info {
+      & > h1 {
+        margin-inline: 0.75rem;
+        font-size: larger;
+        font-weight: 600;
+        margin-block-start: 0.25rem;
+        margin-block-end: 0.75rem;
+      }
+
+      &>.author, &>.iconinfo {
+        margin-inline: 0.5rem;
+        display: flex;
+        align-items: center;
+        gap: .5rem;
+        margin-block: 0.1rem;
+
+        &>.image {
+          aspect-ratio: 1;
+          object-fit: cover;
+          width: var(--icon-size);
+          border-radius: 50%;
+        }
+
+        &>.icon {
+          width: var(--icon-size);
+          height: var(--icon-size);
+          padding: 2px;
+          opacity: .5;
+        }
+
+        &>.content {
+          opacity: .5;
+          font-size: 0.9rem;
+        }
+      }
+
+      &>.author {
+        margin-block: 0.25rem;
+      }
+    }
+  }
+</style>

src/layout/FullLayoutV1.astro

@@ -44,6 +44,11 @@ const { title = '小帕的小窝', withGap = false } = Astro.props
             ><Icon name="mdi:history" /> 旧博客系统*</a
           >
         </li>
+        <li>
+          <a href="/rss.xml">
+            <Icon name="material-symbols:rss-feed" /> 博客 RSS
+          </a>
+        </li>
       </ul>
     </nav>
   </div>

src/lib/apis/legacy/blog.ts

@@ -5,10 +5,10 @@ export type ListBlogItemType = {
   title: string
 
   /** ISO8601 */
-  created_at: string
+  created_at: Date
 
   /** ISO8601 */
-  updated_at: string
+  updated_at: Date
 
   featured_image: null | {
     image_url: string
@@ -18,6 +18,9 @@ export type ListBlogItemType = {
     id: number
     username: string
     nickname: string
+    avatar: {
+      image_url: string
+    }
   }
 }
 
@@ -29,7 +32,28 @@ export const listBlogs = async ({
   limit?: number
 }) => {
   const resp = await legacyClient.post('/v1/blog/list', { page, limit })
-  return resp.data.data as ListBlogItemType[]
+  return resp.data.data.map((blog: any) => {
+    let _blog = blog
+    if (blog.featured_image) {
+      _blog = {
+        ...blog,
+        featured_image: {
+          image_url:
+            'https://legacy.passthem.top' + blog.featured_image.image_url,
+        },
+      }
+    } else {
+      _blog = blog
+    }
+
+    _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
+  }) as ListBlogItemType[]
 }
 
 export const getBlog: (

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]}