添加图标

src/data/site.ts

@@ -34,15 +34,15 @@ export const contactLinks = [
 ];
 
 export const navItems = [
-  { label: "首页", href: "/" },
-  { label: "三年时间线", href: "/timeline/" },
-  { label: "照片墙", href: "/gallery/" },
-  { label: "青春刊物", href: "/articles/" },
-  { label: "如今的我们", href: "/people/" },
-  { label: "班级地图", href: "/map/" },
-  { label: "综合试卷", href: "/exam/" },
-  { label: "留言墙", href: "/messages/" },
-  { label: "搜索", href: "/search/" }
+  { label: "首页", href: "/", icon: "fa-solid fa-house" },
+  { label: "三年时间线", href: "/timeline/", icon: "fa-solid fa-timeline" },
+  { label: "照片墙", href: "/gallery/", icon: "fa-solid fa-images" },
+  { label: "青春刊物", href: "/articles/", icon: "fa-solid fa-book-open" },
+  { label: "如今的我们", href: "/people/", icon: "fa-solid fa-user-group" },
+  { label: "班级地图", href: "/map/", icon: "fa-solid fa-map-location-dot" },
+  { label: "综合试卷", href: "/exam/", icon: "fa-solid fa-file-pen" },
+  { label: "留言墙", href: "/messages/", icon: "fa-solid fa-comments" },
+  { label: "搜索", href: "/search/", icon: "fa-solid fa-magnifying-glass", iconOnly: true }
 ];
 
 const leavingCampusDate = "2024-06-08";

src/layouts/BaseLayout.astro

@@ -69,7 +69,19 @@ const buildTime = new Intl.DateTimeFormat("zh-CN", {
         <span aria-hidden="true"></span>
       </button>
       <nav class="nav" id="site-nav">
-        {navItems.map((item) => <a href={item.href}>{item.label}</a>)}
+        {
+          navItems.map((item) => (
+            <a
+              href={item.href}
+              class:list={[item.iconOnly && "nav-icon-only"]}
+              aria-label={item.iconOnly ? item.label : undefined}
+              title={item.iconOnly ? item.label : undefined}
+            >
+              <i class:list={[item.icon, "nav-item-icon"]} aria-hidden="true"></i>
+              {item.iconOnly ? <span class="sr-only">{item.label}</span> : <span>{item.label}</span>}
+            </a>
+          ))
+        }
       </nav>
     </header>
 
@@ -123,7 +135,7 @@ const buildTime = new Intl.DateTimeFormat("zh-CN", {
         });
 
         nav.addEventListener("click", (event) => {
-          if (event.target instanceof HTMLAnchorElement) {
+          if (event.target instanceof Element && event.target.closest("a")) {
             closeMenu();
           }
         });

src/styles/global.css

@@ -100,9 +100,24 @@ a {
 }
 
 .nav a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
   opacity: 0.88;
 }
 
+.nav-item-icon {
+  width: 1.15em;
+  flex: 0 0 auto;
+  text-align: center;
+}
+
+.nav a.nav-icon-only {
+  justify-content: center;
+  min-width: 2.25rem;
+  padding-inline: 0.6rem;
+}
+
 .hero {
   min-height: 92vh;
   position: relative;