添加格式化相关

src/components/BlogCard.astro

@@ -16,8 +16,8 @@ interface Props {
 
 const { link, title, featureImage, author, createdAt, updatedAt } = Astro.props
 
-const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
-
+const formatDate = (date: Date) =>
+  `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
 ---
 
 <a class="card" href={link}>
@@ -35,25 +35,38 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
   }
   <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}
-        densities={[1.5, 2]}
-      />
-      <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>}
+    {
+      author && (
+        <div class="author">
+          <Image
+            class="image"
+            src={author.avatar ?? ''}
+            alt={`用户 ${author.name} 的头像`}
+            width={24}
+            height={24}
+            densities={[1.5, 2]}
+          />
+          <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>
 
@@ -116,34 +129,35 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
         }
       }
 
-      &>.author, &>.iconinfo {
+      & > .author,
+      & > .iconinfo {
         margin-inline: 0.5rem;
         display: flex;
         align-items: center;
-        gap: .5rem;
+        gap: 0.5rem;
         margin-block: 0.1rem;
 
-        &>.image {
+        & > .image {
           aspect-ratio: 1;
           object-fit: cover;
           width: var(--icon-size);
           border-radius: 50%;
         }
 
-        &>.icon {
+        & > .icon {
           width: var(--icon-size);
           height: var(--icon-size);
           padding: 2px;
-          opacity: .5;
+          opacity: 0.5;
         }
 
-        &>.content {
-          opacity: .5;
+        & > .content {
+          opacity: 0.5;
           font-size: 0.9rem;
         }
       }
 
-      &>.author {
+      & > .author {
         margin-block: 0.25rem;
       }
     }