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