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
+
+
@@ -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