mirror of
https://github.com/Kisechan/Mainpage.git
synced 2025-07-09 14:47:18 +00:00
优化友链配置,调整导航栏链接打开方式,增加 GitHub 日历清理逻辑,限制 RSS 文章数量
This commit is contained in:
@ -3,18 +3,4 @@
|
|||||||
- avatar: "https://images.kisechan.space/icon.jpg"
|
- avatar: "https://images.kisechan.space/icon.jpg"
|
||||||
title: "Kisechan's Blog"
|
title: "Kisechan's Blog"
|
||||||
description: "Kisechan 的博客"
|
description: "Kisechan 的博客"
|
||||||
url: "https://blog.kisechan.space"
|
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"
|
|
@ -15,16 +15,19 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
// 打开外部链接
|
// 打开外部链接
|
||||||
const goToBlog = () => {
|
const goToBlog = () => {
|
||||||
window.open("https://blog.kisechan.space", "_blank");
|
window.open("https://blog.kisechan.space", "_blank");
|
||||||
};
|
};
|
||||||
|
|
||||||
// 打开内部链接(新标签页)
|
// 打开内部链接(当前页面)
|
||||||
const openLink = (path) => {
|
const openLink = (path) => {
|
||||||
const fullUrl = "https://www.kisechan.space" + path; // 获取完整 URL
|
console.log("Navigating to:", path); // 调试信息
|
||||||
if (window.location.href === fullUrl) return; // 防止重复点击
|
router.push(path);
|
||||||
window.open(fullUrl, "_blank");
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -15,7 +15,6 @@
|
|||||||
<div class="github-calendar-container">
|
<div class="github-calendar-container">
|
||||||
<h3>My Github Contributions</h3>
|
<h3>My Github Contributions</h3>
|
||||||
<div id="github-graph">
|
<div id="github-graph">
|
||||||
<p v-if="!isLoaded">Loading...</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
@ -116,55 +115,75 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import avatarUrl from "@/assets/avatar.png";
|
import avatarUrl from "@/assets/avatar.png";
|
||||||
import { onMounted } from "vue";
|
import { ref, onMounted, onUnmounted } from "vue";
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const isLoaded = ref(false);
|
const isLoaded = ref(false);
|
||||||
const feedItems = ref([]);
|
const feedItems = ref([]);
|
||||||
// 懒加载
|
const githubCalendarInstance = ref(null); // 提升到组件作用域
|
||||||
|
|
||||||
const loadGitHubCalendar = async () => {
|
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");
|
const GitHubCalendar = await import("github-calendar");
|
||||||
GitHubCalendar.default("#github-graph", "Kisechan", {
|
githubCalendarInstance.value = GitHubCalendar.default(calendarElement, "Kisechan", {
|
||||||
responsive: true, // 响应式设计
|
responsive: true,
|
||||||
tooltips: true, // 显示提示信息
|
tooltips: true,
|
||||||
global_stats: false, // 显示全局统计信息
|
global_stats: false,
|
||||||
});
|
});
|
||||||
isLoaded.value = true;
|
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 fetchRSSFeed = async () => {
|
||||||
const rssUrl = "https://blog.kisechan.space/atom.xml"; // 替换为你的 Atom Feed URL
|
const rssUrl = "https://blog.kisechan.space/atom.xml";
|
||||||
try {
|
try {
|
||||||
const response = await fetch(rssUrl);
|
const response = await fetch(rssUrl);
|
||||||
const str = await response.text();
|
const str = await response.text();
|
||||||
const data = new window.DOMParser().parseFromString(str, "text/xml");
|
const data = new window.DOMParser().parseFromString(str, "text/xml");
|
||||||
const items = data.querySelectorAll("entry");
|
const items = data.querySelectorAll("entry");
|
||||||
|
|
||||||
feedItems.value = Array.from(items).map(item => ({
|
feedItems.value = Array.from(items)
|
||||||
title: item.querySelector("title").textContent,
|
.map(item => ({
|
||||||
link: item.querySelector("link").getAttribute("href"),
|
title: item.querySelector("title").textContent,
|
||||||
pubDate: item.querySelector("updated").textContent,
|
link: item.querySelector("link").getAttribute("href"),
|
||||||
tags: Array.from(item.querySelectorAll("category")).map(
|
pubDate: item.querySelector("updated").textContent,
|
||||||
category => category.getAttribute("term")
|
tags: Array.from(item.querySelectorAll("category")).map(
|
||||||
),
|
category => category.getAttribute("term")
|
||||||
}));
|
),
|
||||||
|
}))
|
||||||
|
.slice(0, 6); // 只取前 6 篇文章
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching RSS Feed:", error);
|
console.error("Error fetching RSS Feed:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 格式化日期
|
|
||||||
const formatDate = (dateString) => {
|
const formatDate = (dateString) => {
|
||||||
const date = new Date(dateString);
|
const date = new Date(dateString);
|
||||||
return date.toLocaleDateString();
|
return date.toLocaleDateString();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 在组件挂载后懒加载
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadGitHubCalendar();
|
loadGitHubCalendar();
|
||||||
fetchRSSFeed();
|
fetchRSSFeed();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
cleanupGitHubCalendar();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
Reference in New Issue
Block a user