✨ 优化 Menu 结构

src/components/Header.astro

@@ -1,5 +1,5 @@
 ---
-import Menu from "./Menu.astro";
+import Menu from "./menu/Menu.astro";
 ---
 
 <header class="container mt-12">

src/components/menu/Menu.astro

@@ -0,0 +1,51 @@
+---
+interface Props {
+  includeHome?: boolean;
+}
+
+const { includeHome = true } = Astro.props;
+
+interface MenuItem {
+  name: string;
+  icon: string;
+  url: string;
+}
+
+import yml from "./config.yml";
+---
+
+<ul>
+  {
+    includeHome && (
+      <li>
+        <a class="link" href="/">
+          <i class="ri-newspaper-line" />
+          主页
+        </a>
+      </li>
+    )
+  }
+  {
+    yml.menu.map((item: MenuItem) => (
+      <li>
+        <a class="link" href={item.url}>
+          <i class={item.icon} />
+          {item.name}
+        </a>
+      </li>
+    ))
+  }
+</ul>
+
+<style lang="scss">
+  ul {
+    @apply inline-block;
+
+    li {
+      @apply inline-block ml-2;
+      &:first-child {
+        @apply ml-0;
+      }
+    }
+  }
+</style>

src/components/menu/config.yml

@@ -0,0 +1,13 @@
+menu:
+  - name: 博客
+    icon: ri-newspaper-line
+    url: https://blog.skywt.cn/
+  - name: 实验室
+    icon: ri-server-line
+    url: https://lab.skywt.cn/
+  - name: 友人
+    icon: ri-contacts-line
+    url: https://blog.skywt.cn/friends
+  - name: 关于
+    icon: ri-cup-line
+    url: https://blog.skywt.cn/about

src/env.d.ts

@@ -1 +1,6 @@
 /// <reference types="astro/client" />
+
+declare module "*.yml" {
+  const value: any;
+  export default value;
+}

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Menu from "../components/Menu.astro";
+import Menu from "../components/menu/Menu.astro";
 import Bento from "../components/bento/Bento.astro";
 import ProjectsCards from "../components/projects/ProjectsCards.astro";
 import SocialLinks from "../components/socials/SocialLinks.astro";