优化排版

src/components/BlogCard.astro

@@ -105,11 +105,15 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
 
     & > .info {
       & > h1 {
-        margin-inline: 0.75rem;
+        margin-inline: 0.5rem;
         font-size: larger;
         font-weight: 600;
         margin-block-start: 0.25rem;
         margin-block-end: 0.75rem;
+
+        @media (width < 768px) {
+          margin-inline: 0.75rem;
+        }
       }
 
       &>.author, &>.iconinfo {

src/pages/blogs/[blog_id].astro

@@ -4,6 +4,7 @@ import FullLayoutV1 from '../../layout/FullLayoutV1.astro'
 import { MarkdocTreeRender } from '../../components/MarkdocRenderer.tsx'
 import { toMarkdocTree } from '../../lib/markdoc'
 import { Image } from 'astro:assets'
+import { Icon } from 'astro-icon/components'
 
 import Artalk from '../../components/Artalk.svelte'
 
@@ -22,6 +23,7 @@ if (blogData === null) {
 }
 
 const tree = await toMarkdocTree(blogData.content)
+const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
 ---
 
 <FullLayoutV1 title={blogData.title} withGap>
@@ -40,10 +42,23 @@ const tree = await toMarkdocTree(blogData.content)
   }
   <main>
     <h1>{blogData.title}</h1>
+    {
+    blogData.author && <div class="blog-info">
+      <a class="author" href=`https://legacy.passthem.top/usr/${blogData.author.username}`>
+        <div class="avatar">
+          <Image class="image" src={blogData.author.avatar.image_url}
+            width={32} height={32} alt=`用户 ${blogData.author.nickname} 的头像` />
+        </div>
+        <div class="username">{blogData.author.nickname}</div>
+      </a>
+      <span class="split">・</span>
+      <span>{ formatDate(blogData.updated_at) } 更新</span>
+    </div>
+    }
     <article>
       <MarkdocTreeRender tree={tree} client:load />
     </article>
-    <h1>评论区</h1>
+    <h1 class="comment-title"><Icon name="material-symbols:chat-rounded" /> 评论区</h1>
     <Artalk client:idle />
   </main>
 </FullLayoutV1>
@@ -96,16 +111,49 @@ const tree = await toMarkdocTree(blogData.content)
     }
   }
 
+  .blog-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+    color: var(--color-fg-1);
+
+    & > .author {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: .25rem;
+
+      & > .avatar {
+        & > .image {
+          width: 32px;
+          height: 32px;
+          object-fit: cover;
+          border-radius: 16px;
+        }
+      }
+    }
+  }
+
   main {
     max-inline-size: 840px;
     margin-inline: auto;
-    padding-block-end: 2rem;
+    padding-block-end: 4rem;
     padding-inline: 20px;
 
     & > h1 {
-      font-size: 2.4rem;
-      font-weight: 700;
+      font-size: 2rem;
+      font-weight: 900;
       margin-block: 1.2rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: .25rem;
+
+      &.comment-title {
+        margin-block-start: 3rem;
+      }
     }
   }
 </style>