Add friend links page and navigation

Author: SpriCoder

src/components/Footer.astro

@@ -11,6 +11,7 @@ const year = new Date().getFullYear();
       <nav class="footer-links" aria-label="页脚导航">
         <a href="/atom.xml">RSS 订阅 <span aria-hidden="true">↗</span></a>
         <a href="https://github.com/SpriCoder" target="_blank" rel="noopener noreferrer">GitHub <span aria-hidden="true">↗</span></a>
+        <a href="/links/">友链</a>
         <a href="/about/">关于我</a>
       </nav>
     </div>

src/components/Header.astro

@@ -4,6 +4,7 @@ const links = [
   { href: '/', label: '首页' },
   { href: '/series/', label: '专题' },
   { href: '/archives/', label: '归档' },
+  { href: '/links/', label: '友链' },
   { href: '/about/', label: '关于' },
 ];
 const active = (href: string) => href === '/' ? pathname === '/' : href === '/series/' ? pathname.startsWith('/series/') || pathname.startsWith('/courses/') : pathname.startsWith(href);

src/pages/[...path].astro

@@ -8,6 +8,7 @@ export async function getStaticPaths() {
   const paths = posts.map(post => ({ params: { path: post.url.replace(/^\/+|\/+$/g, '') }, props: { post, posts } }));
   const occupied = new Set(posts.map(post => post.url));
   for (const listing of legacyRoutes) {
+    if (listing.kind === 'links') continue;
     if (!occupied.has(listing.url)) paths.push({ params: { path: listing.url.replace(/^\/+|\/+$/g, '') }, props: { listing, posts } });
   }
   for (const kind of ['tags', 'categories', 'archives']) {

src/pages/links.astro

@@ -0,0 +1,12 @@
+---
+import SiteLayout from '../layouts/SiteLayout.astro';
+---
+
+<SiteLayout title="友链" description="朋友的博客与个人网站。">
+  <div class="container">
+    <header class="page-header"><h1>友链</h1></header>
+    <ul class="archive-list">
+      <li><a href="https://tanxinyu.work/" target="_blank" rel="noopener noreferrer">谭新宇的博客 <small>tanxinyu.work <span aria-hidden="true">↗</span></small></a></li>
+    </ul>
+  </div>
+</SiteLayout>

src/styles/global.css

@@ -66,7 +66,7 @@ main { min-height: 55vh; outline: none; }
 .header-navigation, .main-nav, .header-tools { display: flex; align-items: center; }
 .header-navigation { gap: 32px; }
 .main-nav { gap: 28px; font-size: 14px; }
-.main-nav a { padding: 8px 0; position: relative; }
+.main-nav a { padding: 8px 0; position: relative; white-space: nowrap; }
 .main-nav a::after { content: ''; height: 2px; position: absolute; bottom: 0; left: 0; right: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
 .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
 .main-nav a.active { color: var(--ink); font-weight: 600; }
@@ -373,7 +373,7 @@ html[data-theme='dark'] .theme-icon-moon { display: none; }
 @media (max-width: 480px) {
   .header-inner { display: grid; grid-template-columns: 1fr; gap: 14px; }
   .header-navigation { justify-content: space-between; }
-  .main-nav { gap: 27px; }
+  .main-nav { gap: 16px; }
   .header-tools { border: 0; }
 }
 @media (prefers-reduced-motion: reduce) {