优化友链配置，调整导航栏链接打开方式，增加 GitHub 日历清理逻辑，限制 RSS 文章数量

public/links.yml

@@ -4,17 +4,3 @@
       title: "Kisechan's Blog"
       description: "Kisechan 的博客"
       url: "https://blog.kisechan.space"
-    - avatar: "https://example.com/avatar.png"
-      title: "个人博客"
-      description: "这是一个个人博客"
-      url: "https://example.com/personal-blog"
-- category: "友情链接"
-  links:
-    - avatar: "https://example.com/avatar.png"
-      title: "友情链接1"
-      description: "这是一个友情链接"
-      url: "https://example.com/friend-link-1"
-    - avatar: "https://example.com/avatar.png"
-      title: "友情链接2"
-      description: "这是一个友情链接"
-      url: "https://example.com/friend-link-2"

src/components/NavBar.vue

@@ -15,16 +15,19 @@
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
 // 打开外部链接
 const goToBlog = () => {
   window.open("https://blog.kisechan.space", "_blank");
 };
 
-// 打开内部链接（新标签页）
+// 打开内部链接（当前页面）
 const openLink = (path) => {
-  const fullUrl = "https://www.kisechan.space" + path; // 获取完整 URL
-  if (window.location.href === fullUrl) return; // 防止重复点击
-  window.open(fullUrl, "_blank");
+  console.log("Navigating to:", path); // 调试信息
+  router.push(path);
 };
 </script>
 

src/views/HomeView.vue

@@ -15,7 +15,6 @@
             <div class="github-calendar-container">
               <h3>My Github Contributions</h3>
               <div id="github-graph">
-                <p v-if="!isLoaded">Loading...</p>
               </div>
             </div>
             <hr />
@@ -116,55 +115,75 @@
 
 <script setup>
 import avatarUrl from "@/assets/avatar.png";
-import { onMounted } from "vue";
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 
 const isLoaded = ref(false);
 const feedItems = ref([]);
-// 懒加载
+const githubCalendarInstance = ref(null); // 提升到组件作用域
+
 const loadGitHubCalendar = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 100)); // 延迟 100ms
+  const calendarElement = document.getElementById("github-graph");
+  if (!calendarElement) {
+    console.error("Element #github-graph not found");
+    return;
+  }
+
   const GitHubCalendar = await import("github-calendar");
-  GitHubCalendar.default("#github-graph", "Kisechan", {
-    responsive: true, // 响应式设计
-    tooltips: true, // 显示提示信息
-    global_stats: false, // 显示全局统计信息
+  githubCalendarInstance.value = GitHubCalendar.default(calendarElement, "Kisechan", {
+    responsive: true,
+    tooltips: true,
+    global_stats: false,
   });
   isLoaded.value = true;
 };
 
-// 获取并解析 RSS Feed
+const cleanupGitHubCalendar = () => {
+  const calendarElement = document.getElementById("github-graph");
+  if (calendarElement) {
+    calendarElement.innerHTML = ""; // 清空日历内容
+  }
+  if (githubCalendarInstance.value) {
+    githubCalendarInstance.value = null; // 清理实例
+  }
+};
+
 const fetchRSSFeed = async () => {
-  const rssUrl = "https://blog.kisechan.space/atom.xml"; // 替换为你的 Atom Feed URL
+  const rssUrl = "https://blog.kisechan.space/atom.xml";
   try {
     const response = await fetch(rssUrl);
     const str = await response.text();
     const data = new window.DOMParser().parseFromString(str, "text/xml");
     const items = data.querySelectorAll("entry");
 
-    feedItems.value = Array.from(items).map(item => ({
-      title: item.querySelector("title").textContent,
-      link: item.querySelector("link").getAttribute("href"),
-      pubDate: item.querySelector("updated").textContent,
-      tags: Array.from(item.querySelectorAll("category")).map(
-        category => category.getAttribute("term")
-      ),
-    }));
+    feedItems.value = Array.from(items)
+      .map(item => ({
+        title: item.querySelector("title").textContent,
+        link: item.querySelector("link").getAttribute("href"),
+        pubDate: item.querySelector("updated").textContent,
+        tags: Array.from(item.querySelectorAll("category")).map(
+          category => category.getAttribute("term")
+        ),
+      }))
+      .slice(0, 6); // 只取前 6 篇文章
   } catch (error) {
     console.error("Error fetching RSS Feed:", error);
   }
 };
 
-// 格式化日期
 const formatDate = (dateString) => {
   const date = new Date(dateString);
   return date.toLocaleDateString();
 };
 
-// 在组件挂载后懒加载
 onMounted(() => {
   loadGitHubCalendar();
   fetchRSSFeed();
 });
+
+onUnmounted(() => {
+  cleanupGitHubCalendar();
+});
 </script>
 
 <style scoped>