feat: 标签云

src/components/IndexSidebar.astro

@@ -25,6 +25,22 @@ const { data: categories } =
       }
     </ul>
   </div>
+
+  <div class="widget">
+    <h3 class="widget-title">🏷️ 标签云</h3>
+    <div class="tag-cloud">
+      <a class="tag" href="#">HTML</a>
+      <a class="tag" href="#">CSS</a>
+      <a class="tag" href="#">JavaScript</a>
+      <a class="tag" href="#">响应式</a>
+      <a class="tag" href="#">随笔</a>
+      <a class="tag" href="#">读书</a>
+      <a class="tag" href="#">效率</a>
+      <a class="tag" href="#">设计</a>
+      <a class="tag" href="#">工具</a>
+      <a class="tag" href="#">深色模式</a>
+    </div>
+  </div>
 </aside>
 
 <style>
@@ -76,7 +92,7 @@ const { data: categories } =
   }
 
   .category-list a:hover {
-    color: var(--primary);
+    color: #4f6df5;
   }
 
   .category-list .count {
@@ -84,6 +100,31 @@ const { data: categories } =
     font-size: 13px;
   }
 
+  .tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .tags {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .tag {
+    font-size: 12px;
+    color: #4f6df5;
+    background: #eef1fe;
+    padding: 3px 10px;
+    border-radius: 999px;
+    transition: background 0.2s;
+  }
+
+  .tag:hover {
+    background: #dfe6fd;
+  }
+
   @media (max-width: 860px) {
     .sidebar {
       width: 100%;

src/types/post.ts

@@ -1,4 +1,4 @@
-type Tag = {
+export type Tag = {
   id: number
   code: string
   name: string