添加格式化相关

src/pages/blogs/[blog_id].astro

@@ -23,7 +23,8 @@ if (blogData === null) {
 }
 
 const tree = await toMarkdocTree(blogData.content)
-const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
+const formatDate = (date: Date) =>
+  `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
 ---
 
 <FullLayoutV1 title={blogData.title} withGap>
@@ -43,22 +44,34 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
   <main>
     <h1>{blogData.title}</h1>
     {
-    blogData.author && <div class="blog-info">
-      <a class="author" href=`https://legacy.passthem.top/user/${blogData.author.username}`>
-        <div class="avatar">
-          <Image class="image" src={blogData.author.avatar.image_url}
-            width={32} height={32} alt=`用户 ${blogData.author.nickname} 的头像` />
+      blogData.author && (
+        <div class="blog-info">
+          <a
+            class="author"
+            href={`https://legacy.passthem.top/user/${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>
-        <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 class="comment-title"><Icon name="material-symbols:chat-rounded" /> 评论区</h1>
+    <h1 class="comment-title">
+      <Icon name="material-symbols:chat-rounded" /> 评论区
+    </h1>
     <Artalk client:idle />
   </main>
 </FullLayoutV1>
@@ -123,7 +136,7 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: .25rem;
+      gap: 0.25rem;
 
       & > .avatar {
         & > .image {
@@ -149,7 +162,7 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: .25rem;
+      gap: 0.25rem;
 
       &.comment-title {
         margin-block-start: 3rem;

src/pages/index.astro

@@ -96,7 +96,12 @@ try {
       <Icon name="mdi:email" />
     </div>
     <div class="contact-container">
-      <h1><div class="text">联系我<div class="animation-before"></div></div><div class="animation"></div></h1>
+      <h1>
+        <div class="text">联系我<div class="animation-before"></div></div><div
+          class="animation"
+        >
+        </div>
+      </h1>
       <table>
         <tbody>
           <tr>
@@ -188,22 +193,26 @@ try {
           [
             'https://legacy.passthem.top/assets/ydt-DIeb2Djx.png',
             'https://qm.qq.com/q/nDnHUy9KQo',
-            '有顶天变电站 (QQ)'
+            '有顶天变电站 (QQ)',
           ],
           [
             'https://legacy.passthem.top/assets/lfxdxy-BogfTZvz.png',
             'https://qm.qq.com/q/QOpCVZcvyS',
-            '六方相的新月 (QQ)'
+            '六方相的新月 (QQ)',
           ],
-        ].map(b => <a href={b[1]} class="friend">
-          <div class="avatar">
-            <Image src={b[0]} width={60} height={60} alt=`网站「${b[2]}」的图标` />
-          </div>
-          <div class="description">
-            {b[2]}
-          </div>
-        </a>
-      )
+        ].map((b) => (
+          <a href={b[1]} class="friend">
+            <div class="avatar">
+              <Image
+                src={b[0]}
+                width={60}
+                height={60}
+                alt={`网站「${b[2]}」的图标`}
+              />
+            </div>
+            <div class="description">{b[2]}</div>
+          </a>
+        ))
       }
     </div>
   </section>
@@ -567,7 +576,6 @@ try {
       & > .text {
         background-color: var(--color-fg-0);
         position: relative;
-
       }
 
       & .animation-before {
@@ -603,8 +611,7 @@ try {
         background-repeat: repeat;
         background-size: var(--bg-width) 100%;
         animation: bg-contact-roll infinite linear 2s;
-        transform: skewX(var(--skew-angle))
-          translateX(calc(var(--unit) - 1px));
+        transform: skewX(var(--skew-angle)) translateX(calc(var(--unit) - 1px));
       }
     }
 
@@ -678,7 +685,7 @@ try {
   }
 
   /* 友链页 */
-  .slide:has(>.friends) {
+  .slide:has(> .friends) {
     flex-direction: column;
     gap: 1rem;
   }
@@ -695,7 +702,7 @@ try {
     overflow-y: auto;
     margin-inline: 1rem;
     /* background-color: rgb(from var(--color-bg-0) r g b / .3); */
-    background-color: rgb(from var(--color-bg-2) r g b / .5);
+    background-color: rgb(from var(--color-bg-2) r g b / 0.5);
     border-radius: 2rem;
     backdrop-filter: blur(5px);
 
@@ -751,7 +758,8 @@ try {
         outline-offset: 3px;
       }
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         transform: scale(1.1);
       }