mirror of
https://github.com/Kisechan/Mainpage.git
synced 2025-07-09 22:57:17 +00:00
添加 RSS 订阅功能,解析并展示最新博客文章,优化样式和交互效果
This commit is contained in:
@ -12,12 +12,55 @@
|
||||
<a href="mailto:admin@kisechan.space">admin@kisechan.space</a>
|
||||
</p>
|
||||
<hr />
|
||||
<h3>My Github Contributions</h3>
|
||||
<div class="github-calendar-container">
|
||||
<h3>My Github Contributions</h3>
|
||||
<div id="github-graph">
|
||||
<p v-if="!isLoaded">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="rss-feed-container">
|
||||
<h3>Latest Blog Posts</h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="item in feedItems" :key="item.link" :span="24">
|
||||
<el-card class="blog-card" shadow="hover">
|
||||
<div class="blog-header">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'file-lines']"
|
||||
class="icon"
|
||||
/>
|
||||
<a :href="item.link" target="_blank" class="blog-title">{{
|
||||
item.title
|
||||
}}</a>
|
||||
</div>
|
||||
<div class="blog-meta">
|
||||
<span class="update-time">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'clock']"
|
||||
class="icon"
|
||||
/>
|
||||
{{ formatDate(item.pubDate) }}
|
||||
</span>
|
||||
<span class="tags">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'tags']"
|
||||
class="icon"
|
||||
/>
|
||||
<el-tag
|
||||
v-for="(tag, index) in item.tags"
|
||||
:key="index"
|
||||
size="small"
|
||||
type="info"
|
||||
class="tag"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
@ -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();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user