修复:GitHub calendar报错

This commit is contained in:
2025-06-07 16:20:09 +08:00
parent 13d092653e
commit 01115689db

View File

@ -27,14 +27,22 @@
</div> </div>
<div class="footer-content"> <div class="footer-content">
<p> <p>
<a href="https://icp.gov.moe/?keyword=20251453" target="_self">萌ICP备20251453号</a> <a href="https://icp.gov.moe/?keyword=20251453" target="_self"
>萌ICP备20251453号</a
>
</p> </p>
<p> <p>
&copy; 2025 By &copy; 2025 By
<a href="https://github.com/Kisechan" target="_self" rel="nofollow noopener"><strong>Kisechan</strong></a> <a
href="https://github.com/Kisechan"
target="_self"
rel="nofollow noopener"
><strong>Kisechan</strong></a
>
</p> </p>
<p style="font-size: 0.75em"> <p style="font-size: 0.75em">
Made With <a href="https://cn.vuejs.org/">Vue3</a> & <a href="https://element-plus.org/zh-CN/">Element Plus</a> Made With <a href="https://cn.vuejs.org/">Vue3</a> &
<a href="https://element-plus.org/zh-CN/">Element Plus</a>
</p> </p>
</div> </div>
</el-col> </el-col>
@ -48,18 +56,30 @@
</p> </p>
<hr /> <hr />
<div class="github-calendar-container"> <div class="github-calendar-container">
<h3><i class="fa-solid fa-code-branch"></i>My Github Contributions</h3> <h3>
<i class="fa-solid fa-code-branch"></i>My Github Contributions
</h3>
<div id="github-graph"></div> <div id="github-graph"></div>
</div> </div>
<hr /> <hr />
<div class="rss-feed-container"> <div class="rss-feed-container">
<h3><i class="fa-solid fa-box-archive"></i>Latest Blog Posts</h3> <h3><i class="fa-solid fa-box-archive"></i>Latest Blog Posts</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col v-for="item in feedItems" :key="item.link" :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> <el-col
v-for="item in feedItems"
:key="item.link"
:xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
>
<el-card class="blog-card" shadow="hover"> <el-card class="blog-card" shadow="hover">
<div class="blog-header"> <div class="blog-header">
<i class="fa-solid fa-newspaper"></i> <i class="fa-solid fa-newspaper"></i>
<a :href="item.link" target="_self" class="blog-title">{{ item.title }}</a> <a :href="item.link" target="_self" class="blog-title">{{
item.title
}}</a>
</div> </div>
<div class="blog-meta"> <div class="blog-meta">
<i class="fa-solid fa-clock-rotate-left"></i> <i class="fa-solid fa-clock-rotate-left"></i>
@ -84,8 +104,16 @@
</el-row> </el-row>
</div> </div>
<div class="read-more-container"> <div class="read-more-container">
<el-tooltip content="前往博客查看更多文章" placement="top" class="read-more-tooltip"> <el-tooltip
<el-card class="read-more-card" shadow="hover" @click="goToBlog"> content="前往博客查看更多文章"
placement="top"
class="read-more-tooltip"
>
<el-card
class="read-more-card"
shadow="hover"
@click="goToBlog"
>
<div class="read-more-content"> <div class="read-more-content">
<span>Read More</span> <span>Read More</span>
<i class="fa-brands fa-readme"></i> <i class="fa-brands fa-readme"></i>
@ -102,42 +130,31 @@
<script setup> <script setup>
import avatarUrl from "@/assets/avatar.png"; import avatarUrl from "@/assets/avatar.png";
import { ref, onMounted, onUnmounted } from "vue"; import { ref, onMounted } from "vue";
import GitHubCalendar from "github-calendar"; // 静态导入
const isLoaded = ref(false);
const feedItems = ref([]); const feedItems = ref([]);
const githubCalendarInstance = ref(null);
const loadGitHubCalendar = async () => { const loadGitHubCalendar = () => {
await new Promise((resolve) => setTimeout(resolve, 100)); const calendarContainerSelector = "#github-graph";
const calendarElement = document.getElementById("github-graph"); const calendarElement = document.querySelector(calendarContainerSelector);
if (!calendarElement) { if (!calendarElement) {
console.error("Element #github-graph not found"); console.error(
`GitHub Calendar 目标元素未找到: ${calendarContainerSelector}`
);
return; return;
} }
const GitHubCalendar = await import("github-calendar"); GitHubCalendar(calendarContainerSelector, "Kisechan", {
githubCalendarInstance.value = GitHubCalendar.default(calendarElement, "Kisechan", {
responsive: true, responsive: true,
tooltips: true, tooltips: true,
global_stats: false, global_stats: false,
}); });
isLoaded.value = true;
};
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 = import.meta.env.VITE_RSS_FEED_URL; const rssUrl = import.meta.env.VITE_RSS_FEED_URL;
console.log("Fetching RSS Feed:", rssUrl);
try { try {
const response = await fetch(rssUrl); const response = await fetch(rssUrl);
const str = await response.text(); const str = await response.text();
@ -173,9 +190,6 @@ onMounted(() => {
fetchRSSFeed(); fetchRSSFeed();
}); });
onUnmounted(() => {
cleanupGitHubCalendar();
});
</script> </script>
<style scoped> <style scoped>
@ -356,4 +370,4 @@ h3 {
justify-content: center; justify-content: center;
} }
} }
</style> </style>