feat: 样式优化

src/components/blog/Hero.astro

@@ -75,8 +75,8 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 				<path d='M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116' />
 				<path d='M6 9h-.01' />
 			</svg>
-			{data.tags.map((tag, i) => (
-				<div>
+			<div class='space-x-1'>
+				{data.tags.map((tag, i) => (
 					<a
 						aria-label={`View more blogs with the tag ${tag}`}
 						class="inline-block before:content-['#'] hover:underline hover:underline-offset-4"
@@ -85,9 +85,8 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 					>
 						{tag}
 					</a>
-					{i < data.tags.length - 1 && ', '}
-				</div>
-			))}
+				))}
+			</div>
 		</div>
 	)
 }

src/components/blog/TOC.astro

@@ -14,8 +14,16 @@ const toc = generateToc(headings)
 ---
 
 <aside class='sticky top-20 order-2 -me-28 hidden basis-60 lg:flex lg:flex-col'>
-	<h2 class='font-semibold'>TABLE OF CONTENTS</h2>
-	<ul class='text-card-foreground'>
-		{toc.map((heading) => <TOCHeading heading={heading} />)}
-	</ul>
+	{
+		toc.length > 0 && (
+			<>
+				<h2 class='font-semibold'>TABLE OF CONTENTS</h2>
+				<ul class='text-card-foreground'>
+					{toc.map((heading) => (
+						<TOCHeading heading={heading} />
+					))}
+				</ul>
+			</>
+		)
+	}
 </aside>