优化搜索后自动关闭搜索框，添加相关页面

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>

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) => {
-      a.id !== article.id &&
+      const hasCommonTags = a.id !== article.id &&
-      a.data.tags &&
+        a.data.tags &&
-      article.data.tags &&
+        article.data.tags &&
-      a.data.tags.some((tag) => article.data.tags?.includes(tag)),
+        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}

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()}