完成博客索引页

2026-04-05 19:05:31 +08:00
parent 3d0eeb7996
commit 43a85ac056
8 changed files with 298 additions and 21 deletions
--- a/src/components/BlogCard.astro
+++ b/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>