From 864d134acd7d053beecf9613dc052e2bcc50c6d6 Mon Sep 17 00:00:00 2001
From: lsy <lsy22@vip.qq.com>
Date: Sun, 20 Apr 2025 17:22:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2=E5=90=8E?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=85=B3=E9=97=AD=E6=90=9C=E7=B4=A2=E6=A1=86?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.astro      | 1122 ++++++++++++++++--------------
 src/components/Layout.astro      |   31 +
 src/pages/articles/[...id].astro |   71 +-
 src/pages/articles/index.astro   |   24 +-
 4 files changed, 729 insertions(+), 519 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index df340c3..58a5c6b 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -97,6 +97,7 @@ const normalizedPath =
                     ? "text-primary-600 dark:text-primary-400 border-b-2 border-primary-600 dark:border-primary-400"
                     : "text-secondary-600 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 hover:border-b-2 hover:border-primary-300 dark:hover:border-primary-700"
                 }`}
+                data-astro-prefetch="hover"
               >
                 {link.text}
               </a>
@@ -252,7 +253,10 @@ const normalizedPath =
       class="hidden md:hidden fixed inset-x-0 top-16 z-40"
       id="mobile-menu"
     >
-      <div id="mobile-menu-bg" class="bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm shadow-lg border-t border-gray-200 dark:border-gray-700/50 rounded-b-lg">
+      <div
+        id="mobile-menu-bg"
+        class="bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm shadow-lg border-t border-gray-200 dark:border-gray-700/50 rounded-b-lg"
+      >
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
           <div class="grid gap-1">
             {
@@ -264,6 +268,7 @@ const normalizedPath =
                       ? "text-white bg-primary-600 dark:bg-primary-500 shadow-sm"
                       : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800/70"
                   }`}
+                  data-astro-prefetch="hover"
                 >
                   {link.text}
                 </a>
@@ -286,431 +291,498 @@ const normalizedPath =
 </header>
 
 <script>
-// Header组件逻辑 - 使用"进入→绑定→退出完全清理"模式
-(function() {
-  
-  // 存储所有事件监听器，便于统一清理
-  const listeners: Array<{
-    element: EventTarget;
-    eventType: string;
-    handler: EventListenerOrEventListenerObject;
-  }> = [];
-  
-  // 记录是否已加载文章数据
-  interface Article {
-    id: string;
-    title: string;
-    date: string | Date;
-    summary?: string;
-    tags?: string[];
-    image?: string;
-    content?: string;
-  }
-  
-  let articles: Article[] = [];
-  let isArticlesLoaded = false;
-  
-  // 添加事件监听器并记录，方便后续统一清理
-  function addListener<K extends keyof HTMLElementEventMap>(
-    element: EventTarget | null,
-    eventType: string,
-    handler: EventListenerOrEventListenerObject,
-    options?: boolean | AddEventListenerOptions
-  ): EventListenerOrEventListenerObject | null {
-    if (!element) return null;
-    
-    element.addEventListener(eventType, handler, options);
-    listeners.push({ element, eventType, handler });
-    return handler;
-  }
-  
-  // 清理函数 - 移除所有事件监听器
-  function cleanup(): void {
-    // 移除所有监听器
-    listeners.forEach(({ element, eventType, handler }) => {
-      try {
-        element.removeEventListener(eventType, handler);
-      } catch (err) {
-        console.error(`移除Header事件监听器出错:`, err);
-      }
-    });
-    
-    // 清空数组
-    listeners.length = 0;
-  }
-  
-  // Header和导航高亮逻辑
-  function initHeader(): void {
-    const header = document.getElementById("header-bg");
-    const scrollThreshold = 50;
+  // Header组件逻辑 - 使用"进入→绑定→退出完全清理"模式
+  (function () {
+    // 存储所有事件监听器，便于统一清理
+    const listeners: Array<{
+      element: EventTarget;
+      eventType: string;
+      handler: EventListenerOrEventListenerObject;
+    }> = [];
 
-    // 获取桌面端导航链接（排除移动端菜单中的链接）
-    const navLinks = document.querySelectorAll('.hidden.md\\:flex a[href]');
+    // 记录是否已加载文章数据
+    interface Article {
+      id: string;
+      title: string;
+      date: string | Date;
+      summary?: string;
+      tags?: string[];
+      image?: string;
+      content?: string;
+    }
 
-    // 更新导航高亮状态
-    function updateNavHighlight(): void {
-      const currentUrl = window.location.pathname;
-      const normalizedPath =
-        currentUrl === "/"
-          ? "/"
-          : currentUrl.endsWith("/")
-            ? currentUrl.slice(0, -1)
-            : currentUrl;
+    let articles: Article[] = [];
+    let isArticlesLoaded = false;
 
-      // 更新桌面端导航链接
-      navLinks.forEach((link) => {
-        const href = link.getAttribute("href");
-        const isActive = href === normalizedPath;
-        
-        // 使用 classList.toggle 来切换类
-        link.classList.toggle("text-primary-600", isActive);
-        link.classList.toggle("dark:text-primary-400", isActive);
-        link.classList.toggle("border-b-2", isActive);
-        link.classList.toggle("border-primary-600", isActive);
-        link.classList.toggle("dark:border-primary-400", isActive);
-        
-        link.classList.toggle("text-secondary-600", !isActive);
-        link.classList.toggle("dark:text-secondary-400", !isActive);
-        link.classList.toggle("hover:text-primary-600", !isActive);
-        link.classList.toggle("dark:hover:text-primary-400", !isActive);
-        link.classList.toggle("hover:border-b-2", !isActive);
-        link.classList.toggle("hover:border-primary-300", !isActive);
-        link.classList.toggle("dark:hover:border-primary-700", !isActive);
+    // 添加事件监听器并记录，方便后续统一清理
+    function addListener<K extends keyof HTMLElementEventMap>(
+      element: EventTarget | null,
+      eventType: string,
+      handler: EventListenerOrEventListenerObject,
+      options?: boolean | AddEventListenerOptions,
+    ): EventListenerOrEventListenerObject | null {
+      if (!element) return null;
+
+      element.addEventListener(eventType, handler, options);
+      listeners.push({ element, eventType, handler });
+      return handler;
+    }
+
+    // 清理函数 - 移除所有事件监听器
+    function cleanup(): void {
+      // 移除所有监听器
+      listeners.forEach(({ element, eventType, handler }) => {
+        try {
+          element.removeEventListener(eventType, handler);
+        } catch (err) {
+          console.error(`移除Header事件监听器出错:`, err);
+        }
       });
 
-      // 更新移动端导航链接
-      const mobileNavLinks = document.querySelectorAll('#mobile-menu a[href]');
-      mobileNavLinks.forEach((link) => {
-        const href = link.getAttribute("href");
-        const isActive = href === normalizedPath;
-        
-        // 使用 classList.toggle 来切换类
-        link.classList.toggle("text-white", isActive);
-        link.classList.toggle("bg-primary-600", isActive);
-        link.classList.toggle("dark:bg-primary-500", isActive);
-        link.classList.toggle("shadow-sm", isActive);
-        
-        link.classList.toggle("text-gray-700", !isActive);
-        link.classList.toggle("dark:text-gray-200", !isActive);
-        link.classList.toggle("hover:bg-gray-100", !isActive);
-        link.classList.toggle("dark:hover:bg-gray-800/70", !isActive);
-      });
+      // 清空数组
+      listeners.length = 0;
     }
 
-    // 处理滚动更新背景
-    function updateHeaderBackground(): void {
-      if (window.scrollY > scrollThreshold) {
-        header?.classList.add("scrolled");
-      } else {
-        header?.classList.remove("scrolled");
+    // Header和导航高亮逻辑
+    function initHeader(): void {
+      const header = document.getElementById("header-bg");
+      const scrollThreshold = 50;
+
+      // 获取桌面端导航链接（排除移动端菜单中的链接）
+      const navLinks = document.querySelectorAll(".hidden.md\\:flex a[href]");
+
+      // 检查路径是否匹配导航项
+      function isPathMatchingNavItem(
+        currentPath: string,
+        navPath: string,
+      ): boolean {
+        // 精确匹配
+        if (currentPath === navPath) {
+          return true;
+        }
+
+        // 文章页面特殊处理 - 如果当前路径以 "/articles/" 开头，则匹配 "/articles" 导航
+        if (currentPath.startsWith("/articles/") && navPath === "/articles") {
+          return true;
+        }
+
+        // 可以添加其他特殊情况的处理逻辑
+
+        return false;
       }
-    }
 
-    // 初始检查
-    updateHeaderBackground();
-    updateNavHighlight();
+      // 更新导航高亮状态
+      function updateNavHighlight(): void {
+        const currentUrl = window.location.pathname;
+        const normalizedPath =
+          currentUrl === "/"
+            ? "/"
+            : currentUrl.endsWith("/")
+              ? currentUrl.slice(0, -1)
+              : currentUrl;
 
-    // 添加滚动事件监听
-    addListener(window, "scroll", updateHeaderBackground);
+        // 更新桌面端导航链接
+        navLinks.forEach((link) => {
+          const href = link.getAttribute("href");
+          const isActive = href
+            ? isPathMatchingNavItem(normalizedPath, href)
+            : false;
 
-    // 监听路由变化
-    addListener(document, 'astro:page-load', updateNavHighlight);
-    addListener(document, 'astro:after-swap', updateNavHighlight);
+          // 使用 classList.toggle 来切换类
+          link.classList.toggle("text-primary-600", isActive);
+          link.classList.toggle("dark:text-primary-400", isActive);
+          link.classList.toggle("border-b-2", isActive);
+          link.classList.toggle("border-primary-600", isActive);
+          link.classList.toggle("dark:border-primary-400", isActive);
 
-    // 移动端菜单逻辑
-    const mobileMenuButton = document.getElementById("mobile-menu-button");
-    const mobileMenu = document.getElementById("mobile-menu");
-    const menuOpenIcon = document.getElementById("menu-open-icon");
-    const menuCloseIcon = document.getElementById("menu-close-icon");
-    
-    // 移动端搜索面板元素
-    const mobileSearchButton = document.getElementById("mobile-search-button");
-    const mobileSearchPanel = document.getElementById("mobile-search-panel");
-    const mobileSearch = document.getElementById("mobile-search");
-    const mobileSearchClose = document.getElementById("mobile-search-close");
+          link.classList.toggle("text-secondary-600", !isActive);
+          link.classList.toggle("dark:text-secondary-400", !isActive);
+          link.classList.toggle("hover:text-primary-600", !isActive);
+          link.classList.toggle("dark:hover:text-primary-400", !isActive);
+          link.classList.toggle("hover:border-b-2", !isActive);
+          link.classList.toggle("hover:border-primary-300", !isActive);
+          link.classList.toggle("dark:hover:border-primary-700", !isActive);
+        });
 
-    // 关闭移动端菜单的函数
-    function closeMobileMenu(): void {
-      if (mobileMenuButton && mobileMenu && menuOpenIcon && menuCloseIcon) {
-        mobileMenuButton.setAttribute("aria-expanded", "false");
-        mobileMenu.classList.add("hidden");
-        menuOpenIcon.classList.remove("hidden");
-        menuCloseIcon.classList.add("hidden");
+        // 更新移动端导航链接
+        const mobileNavLinks = document.querySelectorAll(
+          "#mobile-menu a[href]",
+        );
+        mobileNavLinks.forEach((link) => {
+          const href = link.getAttribute("href");
+          const isActive = href
+            ? isPathMatchingNavItem(normalizedPath, href)
+            : false;
+
+          // 使用 classList.toggle 来切换类
+          link.classList.toggle("text-white", isActive);
+          link.classList.toggle("bg-primary-600", isActive);
+          link.classList.toggle("dark:bg-primary-500", isActive);
+          link.classList.toggle("shadow-sm", isActive);
+
+          link.classList.toggle("text-gray-700", !isActive);
+          link.classList.toggle("dark:text-gray-200", !isActive);
+          link.classList.toggle("hover:bg-gray-100", !isActive);
+          link.classList.toggle("dark:hover:bg-gray-800/70", !isActive);
+        });
       }
-    }
-    
-    // 关闭移动端搜索面板的函数
-    function closeMobileSearch(): void {
-      if (mobileSearchPanel) {
-        mobileSearchPanel.classList.add("hidden");
-      }
-    }
 
-    if (mobileMenuButton && mobileMenu && menuOpenIcon && menuCloseIcon) {
-      // 移动端菜单按钮点击事件 - 使用捕获模式确保事件优先处理
-      (mobileMenuButton as HTMLElement).style.pointerEvents = 'auto';
-      
-      addListener(mobileMenuButton, "click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        
-        const expanded = mobileMenuButton.getAttribute("aria-expanded") === "true";
-
-        // 切换菜单状态
-        mobileMenuButton.setAttribute("aria-expanded", (!expanded).toString());
-
-        if (expanded) {
-          // 直接隐藏菜单，不使用过渡效果
-          mobileMenu.classList.add("hidden");
+      // 处理滚动更新背景
+      function updateHeaderBackground(): void {
+        if (window.scrollY > scrollThreshold) {
+          header?.classList.add("scrolled");
         } else {
-          // 打开菜单前先关闭搜索面板
-          closeMobileSearch();
-          
-          // 直接显示菜单，不使用过渡效果
-          mobileMenu.classList.remove("hidden");
+          header?.classList.remove("scrolled");
         }
-
-        // 切换图标
-        menuOpenIcon.classList.toggle("hidden");
-        menuCloseIcon.classList.toggle("hidden");
-      }, { capture: true });
-
-      // 为移动端导航链接添加点击事件
-      const mobileNavLinks = document.querySelectorAll('#mobile-menu a[href]');
-      mobileNavLinks.forEach(link => {
-        (link as HTMLElement).style.pointerEvents = 'auto';
-        addListener(link, 'click', (e) => {
-          // 不要阻止默认行为，因为需要跳转
-          e.stopPropagation();
-          closeMobileMenu();
-        }, { capture: true });
-      });
-    }
-
-    // 移动端搜索按钮
-    if (mobileSearchButton && mobileSearchPanel) {
-      // 搜索按钮点击事件 - 使用捕获模式确保事件优先处理
-      (mobileSearchButton as HTMLElement).style.pointerEvents = 'auto';
-      
-      addListener(mobileSearchButton, "click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        
-        // 检查搜索面板是否已经打开
-        const isSearchVisible = !mobileSearchPanel.classList.contains("hidden");
-        
-        if (isSearchVisible) {
-          // 如果搜索面板已打开，则关闭它
-          closeMobileSearch();
-        } else {
-          // 打开搜索面板前先关闭菜单
-          closeMobileMenu();
-          
-          // 打开搜索面板
-          mobileSearchPanel.classList.remove("hidden");
-          if (mobileSearch) mobileSearch.focus();
-        }
-      }, { capture: true });
-
-      // 搜索面板关闭按钮
-      if (mobileSearchClose) {
-        (mobileSearchClose as HTMLElement).style.pointerEvents = 'auto';
-        addListener(mobileSearchClose, "click", (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          closeMobileSearch();
-        }, { capture: true });
       }
-    }
 
-    // 处理移动端主题切换容器
-    const themeToggleContainer = document.getElementById('theme-toggle-container');
-    if (themeToggleContainer) {
-      (themeToggleContainer as HTMLElement).style.pointerEvents = 'auto';
-      addListener(themeToggleContainer, 'click', (e: Event) => {
-        const target = e.target as HTMLElement;
-        // 如果点击的不是主题切换按钮本身，则手动触发主题切换
-        if (target.id !== 'theme-toggle-button' && !target.closest('#theme-toggle-button')) {
-          e.stopPropagation();
-          // 获取容器内的主题切换按钮并模拟点击
-          const toggleButton = themeToggleContainer.querySelector('#theme-toggle-button');
-          if (toggleButton) {
-            (toggleButton as HTMLElement).click();
-          }
-        }
-      }, { capture: true });
-    }
-  }
+      // 初始检查
+      updateHeaderBackground();
+      updateNavHighlight();
 
-  // 搜索功能逻辑
-  function initSearch(): void {
-    // 搜索节流函数
-    function debounce<T extends (...args: any[]) => void>(
-      func: T,
-      wait: number
-    ): (...args: Parameters<T>) => void {
-      let timeout: ReturnType<typeof setTimeout> | undefined;
-      return function(this: any, ...args: Parameters<T>): void {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => func.apply(this, args), wait);
-      };
-    }
+      // 添加滚动事件监听
+      addListener(window, "scroll", updateHeaderBackground);
 
-    // 获取DOM元素
-    const desktopSearch = document.getElementById("desktop-search");
-    const desktopResults = document.getElementById("desktop-search-results");
-    const desktopList = document.getElementById("desktop-search-list");
-    const desktopMessage = document.getElementById("desktop-search-message");
+      // 监听路由变化
+      addListener(document, "astro:page-load", updateNavHighlight);
+      addListener(document, "astro:after-swap", updateNavHighlight);
 
-    const mobileSearch = document.getElementById("mobile-search");
-    const mobileResults = document.getElementById("mobile-search-results");
-    const mobileList = document.getElementById("mobile-search-list");
-    const mobileMessage = document.getElementById("mobile-search-message");
+      // 移动端菜单逻辑
+      const mobileMenuButton = document.getElementById("mobile-menu-button");
+      const mobileMenu = document.getElementById("mobile-menu");
+      const menuOpenIcon = document.getElementById("menu-open-icon");
+      const menuCloseIcon = document.getElementById("menu-close-icon");
 
-    // 获取文章数据
-    async function fetchArticles(): Promise<void> {
-      if (isArticlesLoaded && articles.length > 0) return;
-
-      try {
-        const response = await fetch("/api/search");
-        if (!response.ok) {
-          throw new Error("获取文章数据失败");
-        }
-        articles = await response.json();
-        isArticlesLoaded = true;
-      } catch (error) {
-        console.error("获取文章失败:", error);
-      }
-    }
-
-    // 高亮文本中的匹配部分
-    function highlightText(text: string, query: string): string {
-      if (!text || !query.trim()) return text;
-
-      // 转义正则表达式中的特殊字符
-      const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      const regex = new RegExp(`(${escapedQuery})`, "gi");
-
-      return text.replace(
-        regex,
-        '<mark class="bg-yellow-100 dark:bg-yellow-900/30 text-gray-900 dark:text-gray-100 px-0.5 rounded">$1</mark>',
+      // 移动端搜索面板元素
+      const mobileSearchButton = document.getElementById(
+        "mobile-search-button",
       );
+      const mobileSearchPanel = document.getElementById("mobile-search-panel");
+      const mobileSearch = document.getElementById("mobile-search");
+      const mobileSearchClose = document.getElementById("mobile-search-close");
+
+      // 关闭移动端菜单的函数
+      function closeMobileMenu(): void {
+        if (mobileMenuButton && mobileMenu && menuOpenIcon && menuCloseIcon) {
+          mobileMenuButton.setAttribute("aria-expanded", "false");
+          mobileMenu.classList.add("hidden");
+          menuOpenIcon.classList.remove("hidden");
+          menuCloseIcon.classList.add("hidden");
+        }
+      }
+
+      // 关闭移动端搜索面板的函数
+      function closeMobileSearch(): void {
+        if (mobileSearchPanel) {
+          mobileSearchPanel.classList.add("hidden");
+        }
+      }
+
+      if (mobileMenuButton && mobileMenu && menuOpenIcon && menuCloseIcon) {
+        // 移动端菜单按钮点击事件 - 使用捕获模式确保事件优先处理
+        (mobileMenuButton as HTMLElement).style.pointerEvents = "auto";
+
+        addListener(
+          mobileMenuButton,
+          "click",
+          (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const expanded =
+              mobileMenuButton.getAttribute("aria-expanded") === "true";
+
+            // 切换菜单状态
+            mobileMenuButton.setAttribute(
+              "aria-expanded",
+              (!expanded).toString(),
+            );
+
+            if (expanded) {
+              // 直接隐藏菜单，不使用过渡效果
+              mobileMenu.classList.add("hidden");
+            } else {
+              // 打开菜单前先关闭搜索面板
+              closeMobileSearch();
+
+              // 直接显示菜单，不使用过渡效果
+              mobileMenu.classList.remove("hidden");
+            }
+
+            // 切换图标
+            menuOpenIcon.classList.toggle("hidden");
+            menuCloseIcon.classList.toggle("hidden");
+          },
+          { capture: true },
+        );
+
+        // 为移动端导航链接添加点击事件
+        const mobileNavLinks = document.querySelectorAll(
+          "#mobile-menu a[href]",
+        );
+        mobileNavLinks.forEach((link) => {
+          (link as HTMLElement).style.pointerEvents = "auto";
+          addListener(
+            link,
+            "click",
+            (e) => {
+              // 不要阻止默认行为，因为需要跳转
+              e.stopPropagation();
+              closeMobileMenu();
+            },
+            { capture: true },
+          );
+        });
+      }
+
+      // 移动端搜索按钮
+      if (mobileSearchButton && mobileSearchPanel) {
+        // 搜索按钮点击事件 - 使用捕获模式确保事件优先处理
+        (mobileSearchButton as HTMLElement).style.pointerEvents = "auto";
+
+        addListener(
+          mobileSearchButton,
+          "click",
+          (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // 检查搜索面板是否已经打开
+            const isSearchVisible =
+              !mobileSearchPanel.classList.contains("hidden");
+
+            if (isSearchVisible) {
+              // 如果搜索面板已打开，则关闭它
+              closeMobileSearch();
+            } else {
+              // 打开搜索面板前先关闭菜单
+              closeMobileMenu();
+
+              // 打开搜索面板
+              mobileSearchPanel.classList.remove("hidden");
+              if (mobileSearch) mobileSearch.focus();
+            }
+          },
+          { capture: true },
+        );
+
+        // 搜索面板关闭按钮
+        if (mobileSearchClose) {
+          (mobileSearchClose as HTMLElement).style.pointerEvents = "auto";
+          addListener(
+            mobileSearchClose,
+            "click",
+            (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              closeMobileSearch();
+            },
+            { capture: true },
+          );
+        }
+      }
+
+      // 处理移动端主题切换容器
+      const themeToggleContainer = document.getElementById(
+        "theme-toggle-container",
+      );
+      if (themeToggleContainer) {
+        (themeToggleContainer as HTMLElement).style.pointerEvents = "auto";
+        addListener(
+          themeToggleContainer,
+          "click",
+          (e: Event) => {
+            const target = e.target as HTMLElement;
+            // 如果点击的不是主题切换按钮本身，则手动触发主题切换
+            if (
+              target.id !== "theme-toggle-button" &&
+              !target.closest("#theme-toggle-button")
+            ) {
+              e.stopPropagation();
+              // 获取容器内的主题切换按钮并模拟点击
+              const toggleButton = themeToggleContainer.querySelector(
+                "#theme-toggle-button",
+              );
+              if (toggleButton) {
+                (toggleButton as HTMLElement).click();
+              }
+            }
+          },
+          { capture: true },
+        );
+      }
     }
 
-    // 搜索文章
-    function searchArticles(
-      query: string,
-      resultsList: HTMLElement,
-      resultsMessage: HTMLElement
-    ): void {
-      if (!query.trim()) {
-        resultsList.innerHTML = "";
-        resultsMessage.textContent = "输入关键词开始搜索";
-        resultsMessage.style.display = "block";
-        return;
+    // 搜索功能逻辑
+    function initSearch(): void {
+      // 搜索节流函数
+      function debounce<T extends (...args: any[]) => void>(
+        func: T,
+        wait: number
+      ): (...args: Parameters<T>) => void {
+        let timeout: ReturnType<typeof setTimeout> | undefined;
+        return function(this: any, ...args: Parameters<T>): void {
+          clearTimeout(timeout);
+          timeout = setTimeout(() => func.apply(this, args), wait);
+        };
       }
 
-      if (articles.length === 0) {
-        resultsMessage.textContent = "正在加载数据...";
-        resultsMessage.style.display = "block";
-        return;
+      // 获取DOM元素
+      const desktopSearch = document.getElementById("desktop-search");
+      const desktopResults = document.getElementById("desktop-search-results");
+      const desktopList = document.getElementById("desktop-search-list");
+      const desktopMessage = document.getElementById("desktop-search-message");
+
+      const mobileSearch = document.getElementById("mobile-search");
+      const mobileResults = document.getElementById("mobile-search-results");
+      const mobileList = document.getElementById("mobile-search-list");
+      const mobileMessage = document.getElementById("mobile-search-message");
+      const mobileSearchPanel = document.getElementById("mobile-search-panel");
+
+      // 获取文章数据
+      async function fetchArticles(): Promise<void> {
+        if (isArticlesLoaded && articles.length > 0) return;
+
+        try {
+          const response = await fetch("/api/search");
+          if (!response.ok) {
+            throw new Error("获取文章数据失败");
+          }
+          articles = await response.json();
+          isArticlesLoaded = true;
+        } catch (error) {
+          console.error("获取文章失败:", error);
+        }
       }
 
-      const lowerQuery = query.toLowerCase();
+      // 高亮文本中的匹配部分
+      function highlightText(text: string, query: string): string {
+        if (!text || !query.trim()) return text;
 
-      // 过滤并排序结果
-      const filteredArticles = articles
-        .filter((article: Article) => {
-          const title = article.title.toLowerCase();
-          const tags = article.tags
-            ? article.tags.map((tag: string) => tag.toLowerCase())
-            : [];
-          const summary = article.summary ? article.summary.toLowerCase() : "";
-          const content = article.content ? article.content.toLowerCase() : "";
+        // 转义正则表达式中的特殊字符
+        const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const regex = new RegExp(`(${escapedQuery})`, "gi");
 
-          return (
-            title.includes(lowerQuery) ||
-            tags.some((tag: string) => tag.includes(lowerQuery)) ||
-            summary.includes(lowerQuery) ||
-            content.includes(lowerQuery)
-          );
-        })
-        .sort((a: Article, b: Article) => {
-          // 标题匹配优先
-          const aTitle = a.title.toLowerCase();
-          const bTitle = b.title.toLowerCase();
-
-          if (aTitle.includes(lowerQuery) && !bTitle.includes(lowerQuery)) {
-            return -1;
-          }
-          if (!aTitle.includes(lowerQuery) && bTitle.includes(lowerQuery)) {
-            return 1;
-          }
-
-          // 内容匹配次之
-          const aContent = a.content ? a.content.toLowerCase() : "";
-          const bContent = b.content ? b.content.toLowerCase() : "";
-
-          if (aContent.includes(lowerQuery) && !bContent.includes(lowerQuery)) {
-            return -1;
-          }
-          if (!aContent.includes(lowerQuery) && bContent.includes(lowerQuery)) {
-            return 1;
-          }
-
-          // 日期排序
-          return new Date(b.date).getTime() - new Date(a.date).getTime();
-        })
-        .slice(0, 10); // 限制结果数量
-
-      if (filteredArticles.length === 0) {
-        resultsList.innerHTML = "";
-        resultsMessage.textContent = "没有找到相关内容";
-        resultsMessage.style.display = "block";
-        return;
+        return text.replace(
+          regex,
+          '<mark class="bg-yellow-100 dark:bg-yellow-900/30 text-gray-900 dark:text-gray-100 px-0.5 rounded">$1</mark>',
+        );
       }
 
-      // 显示结果
-      resultsMessage.style.display = "none";
-      resultsList.innerHTML = filteredArticles
-        .map((article: Article) => {
-          // 生成匹配的内容片段
-          let contentMatch = "";
-          if (
-            article.content &&
-            article.content.toLowerCase().includes(lowerQuery)
-          ) {
-            // 找到匹配文本在内容中的位置
-            const matchIndex = article.content
-              .toLowerCase()
-              .indexOf(lowerQuery);
-            // 计算片段的起始和结束位置
-            const startPos = Math.max(0, matchIndex - 50);
-            const endPos = Math.min(article.content.length, matchIndex + 100);
-            // 提取片段
-            let snippet = article.content.substring(startPos, endPos);
-            // 如果不是从文章开头开始，添加省略号
-            if (startPos > 0) {
-              snippet = "..." + snippet;
+      // 搜索文章
+      function searchArticles(
+        query: string,
+        resultsList: HTMLElement,
+        resultsMessage: HTMLElement
+      ): void {
+        if (!query.trim()) {
+          resultsList.innerHTML = "";
+          resultsMessage.textContent = "输入关键词开始搜索";
+          resultsMessage.style.display = "block";
+          return;
+        }
+
+        if (articles.length === 0) {
+          resultsMessage.textContent = "正在加载数据...";
+          resultsMessage.style.display = "block";
+          return;
+        }
+
+        const lowerQuery = query.toLowerCase();
+
+        // 过滤并排序结果
+        const filteredArticles = articles
+          .filter((article: Article) => {
+            const title = article.title.toLowerCase();
+            const tags = article.tags
+              ? article.tags.map((tag: string) => tag.toLowerCase())
+              : [];
+            const summary = article.summary ? article.summary.toLowerCase() : "";
+            const content = article.content ? article.content.toLowerCase() : "";
+
+            return (
+              title.includes(lowerQuery) ||
+              tags.some((tag: string) => tag.includes(lowerQuery)) ||
+              summary.includes(lowerQuery) ||
+              content.includes(lowerQuery)
+            );
+          })
+          .sort((a: Article, b: Article) => {
+            // 标题匹配优先
+            const aTitle = a.title.toLowerCase();
+            const bTitle = b.title.toLowerCase();
+
+            if (aTitle.includes(lowerQuery) && !bTitle.includes(lowerQuery)) {
+              return -1;
             }
-            // 如果不是到文章结尾，添加省略号
-            if (endPos < article.content.length) {
-              snippet = snippet + "...";
+            if (!aTitle.includes(lowerQuery) && bTitle.includes(lowerQuery)) {
+              return 1;
             }
-            // 高亮匹配的文本
-            snippet = highlightText(snippet, query);
-            contentMatch = `<p class="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">${snippet}</p>`;
-          }
 
-          // 高亮标题和摘要中的匹配文本
-          const highlightedTitle = highlightText(article.title, query);
-          const highlightedSummary = article.summary
-            ? highlightText(article.summary, query)
-            : "";
+            // 内容匹配次之
+            const aContent = a.content ? a.content.toLowerCase() : "";
+            const bContent = b.content ? b.content.toLowerCase() : "";
 
-          return `
+            if (aContent.includes(lowerQuery) && !bContent.includes(lowerQuery)) {
+              return -1;
+            }
+            if (!aContent.includes(lowerQuery) && bContent.includes(lowerQuery)) {
+              return 1;
+            }
+
+            // 日期排序
+            return new Date(b.date).getTime() - new Date(a.date).getTime();
+          })
+          .slice(0, 10); // 限制结果数量
+
+        if (filteredArticles.length === 0) {
+          resultsList.innerHTML = "";
+          resultsMessage.textContent = "没有找到相关内容";
+          resultsMessage.style.display = "block";
+          return;
+        }
+
+        // 显示结果
+        resultsMessage.style.display = "none";
+        resultsList.innerHTML = filteredArticles
+          .map((article: Article) => {
+            // 生成匹配的内容片段
+            let contentMatch = "";
+            if (
+              article.content &&
+              article.content.toLowerCase().includes(lowerQuery)
+            ) {
+              // 找到匹配文本在内容中的位置
+              const matchIndex = article.content
+                .toLowerCase()
+                .indexOf(lowerQuery);
+              // 计算片段的起始和结束位置
+              const startPos = Math.max(0, matchIndex - 50);
+              const endPos = Math.min(article.content.length, matchIndex + 100);
+              // 提取片段
+              let snippet = article.content.substring(startPos, endPos);
+              // 如果不是从文章开头开始，添加省略号
+              if (startPos > 0) {
+                snippet = "..." + snippet;
+              }
+              // 如果不是到文章结尾，添加省略号
+              if (endPos < article.content.length) {
+                snippet = snippet + "...";
+              }
+              // 高亮匹配的文本
+              snippet = highlightText(snippet, query);
+              contentMatch = `<p class="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">${snippet}</p>`;
+            }
+
+            // 高亮标题和摘要中的匹配文本
+            const highlightedTitle = highlightText(article.title, query);
+            const highlightedSummary = article.summary
+              ? highlightText(article.summary, query)
+              : "";
+
+            return `
                 <li>
-                    <a href="/articles/${article.id}" class="block px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700/70">
+                    <a href="/articles/${article.id}" class="block px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700/70 search-result-link">
                         <h3 class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">${highlightedTitle}</h3>
                         ${article.summary ? `<p class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">${highlightedSummary}</p>` : ""}
                         ${contentMatch}
@@ -734,131 +806,175 @@ const normalizedPath =
                     </a>
                 </li>
             `;
-        })
-        .join("");
-    }
-
-    // 节流搜索
-    const debouncedDesktopSearch = debounce((value: string) => {
-      if (desktopList && desktopMessage) {
-        searchArticles(
-          value,
-          desktopList as HTMLElement,
-          desktopMessage as HTMLElement
-        );
+          })
+          .join("");
+        
+        // 为搜索结果链接添加点击事件，点击后关闭搜索面板
+        addSearchResultsClickListeners();
       }
-    }, 300);
 
-    const debouncedMobileSearch = debounce((value: string) => {
-      if (mobileList && mobileMessage) {
-        searchArticles(
-          value,
-          mobileList as HTMLElement,
-          mobileMessage as HTMLElement
-        );
-      }
-    }, 300);
-
-    // 桌面端搜索逻辑
-    if (desktopSearch && desktopResults) {
-      // 聚焦时显示结果
-      addListener(desktopSearch, "focus", () => {
-        desktopResults.classList.remove("hidden");
-        if (!isArticlesLoaded) fetchArticles();
-      });
-
-      // 输入时更新搜索结果
-      addListener(desktopSearch, "input", (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        if (target && target.value !== undefined) {
-          debouncedDesktopSearch(target.value);
+      // 节流搜索
+      const debouncedDesktopSearch = debounce((value: string) => {
+        if (desktopList && desktopMessage) {
+          searchArticles(
+            value,
+            desktopList as HTMLElement,
+            desktopMessage as HTMLElement,
+          );
         }
-      });
+      }, 300);
 
-      // 点击外部关闭结果
-      const documentClickHandler = (e: MouseEvent) => {
-        const target = e.target as Node;
-        if (
-          desktopSearch &&
-          !desktopSearch.contains(target) &&
-          !desktopResults.contains(target)
-        ) {
-          desktopResults.classList.add("hidden");
+      const debouncedMobileSearch = debounce((value: string) => {
+        if (mobileList && mobileMessage) {
+          searchArticles(
+            value,
+            mobileList as HTMLElement,
+            mobileMessage as HTMLElement,
+          );
         }
-      };
-      
-      addListener(document, "click", documentClickHandler as EventListener);
+      }, 300);
 
-      // ESC键关闭结果
-      addListener(desktopSearch, "keydown", ((e: KeyboardEvent) => {
-        if (e.key === "Escape") {
-          desktopResults.classList.add("hidden");
-        }
-      }) as EventListener);
-    }
-
-    // 移动端搜索逻辑
-    if (mobileSearch && mobileResults) {
-      // 输入时更新搜索结果
-      addListener(mobileSearch, "input", (e: Event) => {
-        mobileResults.classList.remove("hidden");
-        const target = e.target as HTMLInputElement;
-        if (target && target.value !== undefined) {
-          debouncedMobileSearch(target.value);
+      // 桌面端搜索逻辑
+      if (desktopSearch && desktopResults) {
+        // 聚焦时显示结果
+        addListener(desktopSearch, "focus", () => {
+          desktopResults.classList.remove("hidden");
           if (!isArticlesLoaded) fetchArticles();
-        }
+        });
+
+        // 输入时更新搜索结果
+        addListener(desktopSearch, "input", (e: Event) => {
+          const target = e.target as HTMLInputElement;
+          if (target && target.value !== undefined) {
+            debouncedDesktopSearch(target.value);
+          }
+        });
+
+        // 点击外部关闭结果
+        const documentClickHandler = (e: MouseEvent) => {
+          const target = e.target as Node;
+          if (
+            desktopSearch &&
+            !desktopSearch.contains(target) &&
+            !desktopResults.contains(target)
+          ) {
+            desktopResults.classList.add("hidden");
+          }
+        };
+
+        addListener(document, "click", documentClickHandler as EventListener);
+
+        // ESC键关闭结果
+        addListener(desktopSearch, "keydown", ((e: KeyboardEvent) => {
+          if (e.key === "Escape") {
+            desktopResults.classList.add("hidden");
+          }
+        }) as EventListener);
+      }
+
+      // 移动端搜索逻辑
+      if (mobileSearch && mobileResults) {
+        // 输入时更新搜索结果
+        addListener(mobileSearch, "input", (e: Event) => {
+          mobileResults.classList.remove("hidden");
+          const target = e.target as HTMLInputElement;
+          if (target && target.value !== undefined) {
+            debouncedMobileSearch(target.value);
+            if (!isArticlesLoaded) fetchArticles();
+          }
+        });
+
+        // ESC键关闭搜索面板
+        addListener(mobileSearch, "keydown", ((e: KeyboardEvent) => {
+          if (e.key === "Escape") {
+            const mobileSearchPanel = document.getElementById(
+              "mobile-search-panel",
+            );
+            if (mobileSearchPanel) {
+              mobileSearchPanel.classList.add("hidden");
+            }
+          }
+        }) as EventListener);
+      }
+    }
+
+    // 关闭所有搜索面板的函数
+    function closeSearchPanels(): void {
+      // 关闭桌面端搜索结果
+      const desktopSearchResults = document.getElementById("desktop-search-results");
+      if (desktopSearchResults) {
+        desktopSearchResults.classList.add("hidden");
+      }
+      
+      // 关闭移动端搜索面板
+      const mobileSearchPanel = document.getElementById("mobile-search-panel");
+      if (mobileSearchPanel) {
+        mobileSearchPanel.classList.add("hidden");
+      }
+    }
+    
+    // 为搜索结果链接添加点击事件
+    function addSearchResultsClickListeners(): void {
+      // 获取所有搜索结果链接
+      const searchResultLinks = document.querySelectorAll('.search-result-link');
+      
+      // 为每个链接添加点击事件
+      searchResultLinks.forEach(link => {
+        addListener(link, 'click', () => {
+          // 点击搜索结果后关闭所有搜索面板
+          closeSearchPanels();
+        });
+      });
+    }
+
+    // 注册清理函数
+    function registerCleanup(): void {
+      // Astro 事件
+      document.addEventListener("astro:before-preparation", cleanup, {
+        once: true,
+      });
+      document.addEventListener("astro:before-swap", cleanup, { once: true });
+
+      // Swup 事件
+      document.addEventListener("swup:willReplaceContent", cleanup, {
+        once: true,
       });
 
-      // ESC键关闭搜索面板
-      addListener(mobileSearch, "keydown", ((e: KeyboardEvent) => {
-        if (e.key === "Escape") {
-          const mobileSearchPanel = document.getElementById("mobile-search-panel");
-          if (mobileSearchPanel) {
-            mobileSearchPanel.classList.add("hidden");
-          }
-        }
-      }) as EventListener);
+      // 页面卸载
+      window.addEventListener("beforeunload", cleanup, { once: true });
     }
-  }
-  
-  // 注册清理函数
-  function registerCleanup(): void {
-    // Astro 事件
-    document.addEventListener('astro:before-preparation', cleanup, { once: true });
-    document.addEventListener('astro:before-swap', cleanup, { once: true });
-    
-    // Swup 事件
-    document.addEventListener('swup:willReplaceContent', cleanup, { once: true });
-    
-    // 页面卸载
-    window.addEventListener('beforeunload', cleanup, { once: true });
-  }
-  
-  // 初始化全部功能
-  function setupHeader(): void {
-    // 先清理之前的事件监听器
-    cleanup();
-    
-    // 初始化各个组件
-    initHeader();
-    initSearch();
-    registerCleanup();
-  }
 
-  // 在页面加载时初始化
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", setupHeader, { once: true });
-  } else {
-    // 使用setTimeout确保处于事件队列末尾，避免可能的事件冲突
-    setTimeout(setupHeader, 0);
-  }
-  
-  // 在页面转换后重新初始化
-  document.addEventListener('astro:after-swap', setupHeader);
-  document.addEventListener('astro:page-load', setupHeader);
-  
-  // Swup页面内容替换后重新初始化
-  document.addEventListener('swup:contentReplaced', setupHeader);
-})();
+    // 初始化全部功能
+    function setupHeader(): void {
+      // 先清理之前的事件监听器
+      cleanup();
+      
+      // 初始化各个组件
+      initHeader();
+      initSearch();
+      registerCleanup();
+
+      // 在页面路由变化时关闭搜索面板
+      addListener(document, 'astro:page-load', closeSearchPanels);
+      addListener(document, 'astro:after-swap', closeSearchPanels);
+      addListener(document, 'swup:contentReplaced', closeSearchPanels);
+    }
+
+    // 在页面加载时初始化
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", setupHeader, {
+        once: true,
+      });
+    } else {
+      // 使用setTimeout确保处于事件队列末尾，避免可能的事件冲突
+      setTimeout(setupHeader, 0);
+    }
+
+    // 在页面转换后重新初始化
+    document.addEventListener("astro:after-swap", setupHeader);
+    document.addEventListener("astro:page-load", setupHeader);
+
+    // Swup页面内容替换后重新初始化
+    document.addEventListener("swup:contentReplaced", setupHeader);
+  })();
 </script>
-
diff --git a/src/components/Layout.astro b/src/components/Layout.astro
index 8ec4673..710b147 100644
--- a/src/components/Layout.astro
+++ b/src/components/Layout.astro
@@ -105,5 +105,36 @@ const { title = SITE_NAME, description = SITE_DESCRIPTION, date, author, tags, i
 			<slot />
 		</main>
 		<Footer icp={ICP} psbIcp={PSB_ICP} psbIcpUrl={PSB_ICP_URL} />
+		
+		<!-- 预获取脚本 -->
+		<script>
+			// 在DOM加载完成后执行
+			document.addEventListener('astro:page-load', () => {
+				// 获取所有视口预获取链接
+				const viewportLinks = document.querySelectorAll('[data-astro-prefetch="viewport"]');
+				
+				if (viewportLinks.length > 0) {
+					// 创建一个交叉观察器 
+					const observer = new IntersectionObserver((entries) => {
+						entries.forEach(entry => {
+							if (entry.isIntersecting) {
+								const link = entry.target;
+								// 进入视口时，添加data-astro-prefetch="true"属性触发预获取
+								if (link.getAttribute('data-astro-prefetch') === 'viewport') {
+									link.setAttribute('data-astro-prefetch', 'true');
+								}
+								// 一旦预获取，就不再观察这个链接
+								observer.unobserve(link);
+							}
+						});
+					});
+					
+					// 观察所有视口预获取链接
+					viewportLinks.forEach(link => {
+						observer.observe(link);
+					});
+				}
+			});
+		</script>
 	</body>
 </html>
\ No newline at end of file
diff --git a/src/pages/articles/[...id].astro b/src/pages/articles/[...id].astro
index 475022a..a590d2a 100644
--- a/src/pages/articles/[...id].astro
+++ b/src/pages/articles/[...id].astro
@@ -81,17 +81,69 @@ const breadcrumbs = section ? section.split("/") : [];
 
 // 获取相关文章
 const allArticles = await getCollection("articles");
-const relatedArticles = allArticles
+
+// 1. 尝试通过标签匹配相关文章
+let relatedArticles = allArticles
   .filter(
-    (a) =>
-      a.id !== article.id &&
-      a.data.tags &&
-      article.data.tags &&
-      a.data.tags.some((tag) => article.data.tags?.includes(tag)),
+    (a) => {
+      const hasCommonTags = a.id !== article.id &&
+        a.data.tags &&
+        article.data.tags &&
+        a.data.tags.length > 0 &&
+        article.data.tags.length > 0 &&
+        a.data.tags.some((tag) => article.data.tags?.includes(tag));
+      
+      return hasCommonTags;
+    }
   )
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
   .slice(0, 3);
 
+// 跟踪相关文章的匹配方式: "tag", "directory", "latest"
+let relatedArticlesMatchType = relatedArticles.length > 0 ? "tag" : "";
+
+// 2. 如果标签匹配没有找到足够的相关文章，尝试根据目录结构匹配
+if (relatedArticles.length < 3) {
+  // 获取当前文章的目录路径
+  const currentPath = article.id.includes('/') 
+    ? article.id.substring(0, article.id.lastIndexOf('/')) 
+    : '';
+  
+  // 如果有目录路径，查找同目录的其他文章
+  if (currentPath) {
+    // 收集同目录下的文章，但排除已经通过标签匹配的和当前文章
+    const dirRelatedArticles = allArticles
+      .filter(a => 
+        a.id !== article.id && 
+        a.id.startsWith(currentPath + '/') &&
+        !relatedArticles.some(r => r.id === a.id)
+      )
+      .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
+      .slice(0, 3 - relatedArticles.length);
+    
+    if (dirRelatedArticles.length > 0) {
+      relatedArticles = [...relatedArticles, ...dirRelatedArticles];
+      relatedArticlesMatchType = relatedArticles.length > 0 && !relatedArticlesMatchType ? "directory" : relatedArticlesMatchType;
+    }
+  }
+}
+
+// 3. 如果仍然没有找到足够的相关文章，则选择最新的文章（排除当前文章和已选择的文章）
+if (relatedArticles.length < 3) {
+  const latestArticles = allArticles
+    .filter(a => 
+      a.id !== article.id && 
+      !relatedArticles.some(r => r.id === a.id)
+    )
+    .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
+    .slice(0, 3 - relatedArticles.length);
+  
+  if (latestArticles.length > 0) {
+    relatedArticles = [...relatedArticles, ...latestArticles];
+    relatedArticlesMatchType = relatedArticles.length > 0 && !relatedArticlesMatchType ? "latest" : relatedArticlesMatchType;
+  }
+}
+
 // 准备文章描述
 const description =
   article.data.summary ||
@@ -147,6 +199,7 @@ function getArticleUrl(articleId: string) {
             <a
               href={`/articles${view ? `/${view}` : ""}`}
               class="text-secondary-500 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 flex items-center text-sm"
+              data-astro-prefetch="hover"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -196,7 +249,6 @@ function getArticleUrl(articleId: string) {
           {article.data.date.toLocaleDateString("zh-CN")}
         </time>
 
-        {/* 显示文章所在目录 */}
         {
           section && (
             <span class="flex items-center">
@@ -232,6 +284,7 @@ function getArticleUrl(articleId: string) {
               <a
                 href={`/articles?tag=${tag}`}
                 class="text-xs bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 py-1 px-2 rounded hover:bg-primary-100 dark:hover:bg-primary-800/30"
+                data-astro-prefetch="hover"
               >
                 #{tag}
               </a>
@@ -322,13 +375,15 @@ function getArticleUrl(articleId: string) {
       relatedArticles.length > 0 && (
         <div class="mt-12 pt-8 border-t border-secondary-200 dark:border-dark-border">
           <h2 class="text-2xl font-bold mb-6 text-primary-900 dark:text-primary-100">
-            相关文章
+            {relatedArticlesMatchType === "tag" ? "相关文章" : 
+             relatedArticlesMatchType === "directory" ? "同类文章" : "推荐阅读"}
           </h2>
           <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
             {relatedArticles.map((relatedArticle) => (
               <a
                 href={getArticleUrl(relatedArticle.id)}
                 class="block p-5 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-dark-card hover:shadow-xl hover:-translate-y-1 shadow-lg"
+                data-astro-prefetch="viewport"
               >
                 <h3 class="font-bold text-lg mb-2 line-clamp-2 text-gray-800 dark:text-gray-200 hover:text-primary-700 dark:hover:text-primary-400">
                   {relatedArticle.data.title}
diff --git a/src/pages/articles/index.astro b/src/pages/articles/index.astro
index 797e876..b6a192c 100644
--- a/src/pages/articles/index.astro
+++ b/src/pages/articles/index.astro
@@ -222,7 +222,8 @@ function getArticleUrl(articleId: string) {
                    viewMode === 'grid' 
                      ? 'text-primary-600' 
                      : 'text-gray-400 hover:text-gray-500'
-                 }`}>
+                 }`}
+                 data-astro-prefetch="hover">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                 </svg>
@@ -232,7 +233,8 @@ function getArticleUrl(articleId: string) {
                    viewMode === 'timeline' 
                      ? 'text-primary-600' 
                      : 'text-gray-400 hover:text-gray-500'
-                 }`}>
+                 }`}
+                 data-astro-prefetch="hover">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                 </svg>
@@ -249,7 +251,8 @@ function getArticleUrl(articleId: string) {
             {/* 上一级目录卡片 - 仅在浏览目录时显示 */}
             {!tagFilter && pathSegments.length > 0 && (
               <a href={`/articles/${pathSegments.length > 1 ? pathSegments.slice(0, -1).join('/') : ''}/${view}`} 
-                 class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg">
+                 class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg"
+                 data-astro-prefetch="hover">
                 <div class="flex items-center">
                   <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -276,7 +279,8 @@ function getArticleUrl(articleId: string) {
               
               return (
                 <a href={`/articles/${dirLink}`} 
-                   class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg">
+                   class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg"
+                   data-astro-prefetch="viewport">
                   <div class="flex items-center">
                     <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
                       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -319,7 +323,8 @@ function getArticleUrl(articleId: string) {
               // 显示标签过滤后的文章
               filteredArticles.map(article => (
                 <a href={getArticleUrl(article.id)} 
-                   class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg">
+                   class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg recent-article"
+                   data-astro-prefetch="viewport">
                   <div class="flex items-start">
                     <div class="w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
                       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -389,7 +394,8 @@ function getArticleUrl(articleId: string) {
                 
                 return (
                   <a href={`/articles/${article.id}`} 
-                     class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg">
+                     class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg recent-article"
+                     data-astro-prefetch="viewport">
                     <div class="flex items-start">
                       <div class="w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -459,7 +465,8 @@ function getArticleUrl(articleId: string) {
                        isActive 
                          ? 'bg-primary-600 text-white dark:bg-primary-500 dark:text-gray-100 hover:bg-primary-700 dark:hover:bg-primary-600 shadow-md hover:shadow-lg' 
                          : 'bg-primary-50 dark:bg-gray-700/50 text-primary-600 dark:text-gray-300 hover:bg-primary-100 dark:hover:bg-gray-700 hover:text-primary-700 dark:hover:text-primary-400'
-                     }`}>
+                     }`}
+                     data-astro-prefetch="hover">
                     {tag}
                   </a>
                 );
@@ -483,7 +490,8 @@ function getArticleUrl(articleId: string) {
 
                     {/* 文章卡片 */}
                     <a href={`/articles/${article.id}${viewMode ? `/${viewMode}` : ''}`} 
-                       class={`group/card ml-10 md:ml-0 ${isEven ? 'md:mr-[50%] md:pr-8' : 'md:ml-[50%] md:pl-8'} block`}>
+                       class={`group/card ml-10 md:ml-0 ${isEven ? 'md:mr-[50%] md:pr-8' : 'md:ml-[50%] md:pl-8'} block`}
+                       data-astro-prefetch="viewport">
                       <article class="relative flex flex-col gap-4 rounded-xl bg-white dark:bg-gray-800 p-6 shadow-lg hover:shadow-xl hover:-translate-y-1 border border-gray-200 dark:border-gray-700">
                         {/* 日期标签 */}
                         <time datetime={article.data.date.toISOString()}