From d1aad382c6b4c25055818d2b1939b4835b745c66 Mon Sep 17 00:00:00 2001 From: Kisechan Date: Thu, 6 Mar 2025 08:26:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20RSS=20=E8=AE=A2=E9=98=85?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E8=A7=A3=E6=9E=90=E5=B9=B6=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E6=9C=80=E6=96=B0=E5=8D=9A=E5=AE=A2=E6=96=87=E7=AB=A0?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/HomeView.vue | 138 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 134 insertions(+), 4 deletions(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index f0210c9..945192a 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -12,12 +12,55 @@ admin@kisechan.space


-

My Github Contributions

+

My Github Contributions

Loading...

+
+
+

Latest Blog Posts

+ + + + +
+ + + {{ formatDate(item.pubDate) }} + + + + + {{ tag }} + + +
+
+
+
+
@@ -77,6 +120,7 @@ import { onMounted } from "vue"; import { ref } from "vue"; const isLoaded = ref(false); +const feedItems = ref([]); // 懒加载 const loadGitHubCalendar = async () => { const GitHubCalendar = await import("github-calendar"); @@ -88,9 +132,38 @@ const loadGitHubCalendar = async () => { isLoaded.value = true; }; -// 在组件挂载后懒加载 GitHub 贡献图 +// 获取并解析 RSS Feed +const fetchRSSFeed = async () => { + const rssUrl = "https://blog.kisechan.space/atom.xml"; // 替换为你的 Atom Feed URL + 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") + ), + })); + } catch (error) { + console.error("Error fetching RSS Feed:", error); + } +}; + +// 格式化日期 +const formatDate = (dateString) => { + const date = new Date(dateString); + return date.toLocaleDateString(); +}; + +// 在组件挂载后懒加载 onMounted(() => { loadGitHubCalendar(); + fetchRSSFeed(); }); @@ -138,11 +211,68 @@ onMounted(() => { .right-column { display: flex; flex-direction: column; - gap: 24px; /* 设置 author-info 和 social-icons 之间的间隔 */ + gap: 24px; } .footer-content { max-width: 1200px; margin: 0 auto; } - + +.rss-feed-container { + max-width: 800px; + margin: 0 auto; + padding: 20px; +} + +.blog-card { + margin-bottom: 20px; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.blog-card:hover { + transform: translateY(-5px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.blog-header { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.blog-title { + font-size: 1.2em; + font-weight: bold; + color: #303133; + text-decoration: none; + margin-left: 10px; +} + +.blog-title:hover { + color: #409eff; +} + +.blog-meta { + display: flex; + align-items: center; + font-size: 0.9em; + color: #606266; +} + +.update-time, +.tags { + display: flex; + align-items: center; + margin-right: 20px; +} + +.icon { + margin-right: 5px; + color: #909399; +} + +.tag { + margin-left: 5px; +} + \ No newline at end of file